feat: add theme manager

awesome!

inertia/components/layouts/_base_layout.tsx

@@ -1,14 +1,11 @@
-import { Global, ThemeProvider } from '@emotion/react';
 import { ReactNode } from 'react';
-import documentStyle from '~/styles/document';
-import { cssReset } from '~/styles/reset';
-import { theme } from '~/styles/theme';
+import ContextThemeProvider from '~/components/layouts/_theme_layout';
+import DarkThemeContextProvider from '~/contexts/dark_theme_context';
 
-export default function BaseLayout({ children }: { children: ReactNode }) {
-  return (
-    <>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      <Global styles={[cssReset, documentStyle]} />
-    </>
-  );
-}
+const BaseLayout = ({ children }: { children: ReactNode }) => (
+  <DarkThemeContextProvider>
+    <ContextThemeProvider>{children}</ContextThemeProvider>
+  </DarkThemeContextProvider>
+);
+
+export default BaseLayout;

inertia/components/layouts/_theme_layout.tsx

@@ -0,0 +1,108 @@
+import { Global, ThemeProvider, css, useTheme } from '@emotion/react';
+import { ReactNode } from 'react';
+import useDarkTheme from '~/hooks/use_dark_theme';
+import { darkTheme, lightTheme } from '~/styles/theme';
+
+export default function ContextThemeProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { isDarkTheme } = useDarkTheme();
+  return (
+    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+      <GlobalStyles />
+      {children}
+    </ThemeProvider>
+  );
+}
+
+function GlobalStyles() {
+  const localTheme = useTheme();
+  const cssReset = css({
+    '*': {
+      boxSizing: 'border-box',
+      outline: 0,
+      margin: 0,
+      padding: 0,
+      scrollBehavior: 'smooth',
+    },
+
+    '.reset': {
+      backgroundColor: 'inherit',
+      color: 'inherit',
+      padding: 0,
+      margin: 0,
+      border: 0,
+    },
+
+    a: {
+      width: 'fit-content',
+      color: localTheme.colors.primary,
+      textDecoration: 'none',
+      borderBottom: '1px solid transparent',
+    },
+
+    b: {
+      fontWeight: 600,
+      letterSpacing: '0.5px',
+    },
+
+    'h1, h2, h3, h4, h5, h6': {
+      fontWeight: '500',
+      color: localTheme.colors.primary,
+    },
+
+    kbd: {
+      textShadow: '0 1px 0 #fff',
+      fontSize: '12px',
+      color: 'rgb(51, 51, 51)',
+      backgroundColor: 'rgb(247, 247, 247)',
+      padding: '0.25em 0.5em',
+      borderRadius: '3px',
+      border: '1px solid rgb(204, 204, 204)',
+      boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset',
+      display: 'inline-block',
+    },
+  });
+
+  const documentStyle = css({
+    'html, body, #app': {
+      height: '100svh',
+      width: '100svw',
+      fontFamily: "'Poppins', sans-serif",
+      fontSize: '14px',
+      color: localTheme.colors.font,
+      backgroundColor: localTheme.colors.background,
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    },
+  });
+
+  const scrollbarStyle = css({
+    /* width */
+    '::-webkit-scrollbar': {
+      height: '0.45em',
+      width: '0.45em',
+    },
+
+    /* Track */
+    '::-webkit-scrollbar-track': {
+      borderRadius: localTheme.border.radius,
+    },
+
+    /* Handle */
+    '::-webkit-scrollbar-thumb': {
+      background: localTheme.colors.primary,
+      borderRadius: localTheme.border.radius,
+
+      '&:hover': {
+        background: localTheme.colors.darkBlue,
+      },
+    },
+  });
+
+  return <Global styles={[cssReset, documentStyle, scrollbarStyle]} />;
+}