Add automatic theme

examples/next-example/src/pages/_app.tsx

@@ -3,7 +3,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
-import { Theme, ThemeProvider } from "yoshiki";
+import { Theme, ThemeProvider, useAutomaticTheme } from "yoshiki";
 import { useYoshiki, useMobileHover } from "yoshiki/web";
 import { AppProps } from "next/app";
 
@@ -11,25 +11,31 @@ declare module "yoshiki" {
 	export interface Theme {
 		spacing: string;
 		name: string;
+		background: string;
+		light: { background: string; nested: { black: string } };
+		dark: { background: string; nested: { black: string } };
 	}
 }
 
 export const theme: Theme = {
 	spacing: "24px",
 	name: "yoshiki",
+	background: "white",
+	light: { background: "white", nested: { black: "black" } },
+	dark: { background: "black", nested: { black: "red" } },
 };
 
 const AppName = () => {
 	const { css, theme } = useYoshiki();
-
 	return <p {...css({ padding: (theme) => theme.spacing })}>{theme.name}</p>;
 };
 
 const App = ({ Component, pageProps }: AppProps) => {
 	useMobileHover();
+	const auto = useAutomaticTheme(theme);
 
 	return (
-		<ThemeProvider theme={theme}>
+		<ThemeProvider theme={{ ...theme, ...auto }}>
 			<Component {...pageProps} />
 			<AppName />
 		</ThemeProvider>

examples/next-example/src/pages/index.tsx

@@ -5,7 +5,7 @@
 
 import Head from "next/head";
 import Image from "next/image";
-import { useYoshiki, Stylable, px, md } from "yoshiki/web";
+import { useYoshiki, Stylable, md } from "yoshiki/web";
 import { ReactNode } from "react";
 
 const Box = ({ children, ...props }: { children?: ReactNode } & Stylable) => {
@@ -27,6 +27,7 @@ export default function Home(props: object) {
 						display: "flex",
 						paddingLeft: "2rem",
 						paddingRight: "2rem",
+						bg: (theme) => theme.background,
 					},
 					md({
 						flexGrow: 1,
@@ -48,7 +49,7 @@ export default function Home(props: object) {
 				</h1>
 
 				<Box />
-				<Box {...css({ bg: "blue", p: px(12) })} />
+				<Box {...css({ bg: "blue", padding: "12px" })} />
 
 				<p>
 					Get started by editing <code>pages/index.tsx</code>