feat: theme

apps/web/app/components/logo.tsx

@@ -8,7 +8,7 @@ export const Logo: FC = () => {
       viewBox="0 0 64 64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="h-8 w-auto text-black"
+      className="h-8 w-auto text-black dark:text-white"
     >
       <path
         fillRule="evenodd"

apps/web/app/router.tsx

@@ -3,6 +3,7 @@ import { createRouter as createTanStackRouter } from '@tanstack/react-router';
 import { routerWithQueryClient } from '@tanstack/react-router-with-query';
 import { Provider } from 'jotai';
 import { Loader2 } from 'lucide-react';
+import { ThemeProvider } from 'next-themes';
 
 import NotFound from '~/components/not-found';
 // Import the generated route tree
@@ -26,7 +27,11 @@ export function createRouter() {
       ),
       defaultNotFoundComponent: NotFound,
       Wrap: function WrapComponent({ children }) {
-        return <Provider>{children}</Provider>;
+        return (
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <Provider>{children}</Provider>
+          </ThemeProvider>
+        );
       },
     }),
     queryClient,

apps/web/app/routes/__root.tsx

@@ -81,6 +81,10 @@ export const Route = createRootRouteWithContext<{
       name: 'og:site_name',
       content: 'Kyaku',
     },
+    {
+      name: 'color-scheme',
+      content: 'dark light',
+    },
   ],
   links: () => [
     { rel: 'stylesheet', href: appCss },

apps/web/package.json

@@ -26,6 +26,7 @@
     "jotai": "^2.10.0",
     "lexical": "^0.18.0",
     "lucide-react": "^0.447.0",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",

yarn.lock

@@ -2980,6 +2980,7 @@ __metadata:
     jsdom: "npm:^25.0.1"
     lexical: "npm:^0.18.0"
     lucide-react: "npm:^0.447.0"
+    next-themes: "npm:^0.3.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-hook-form: "npm:^7.53.0"
@@ -12953,6 +12954,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-themes@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "next-themes@npm:0.3.0"
+  peerDependencies:
+    react: ^16.8 || ^17 || ^18
+    react-dom: ^16.8 || ^17 || ^18
+  checksum: 10c0/72bd670ad6b9f547dc18cece340dfd1ac41e3e7b37eb321d4767db90bfa2c239f937011cd0efe35ca0081f1ea260051bc0868808ef39b0fbff2ddefd7146cec6
+  languageName: node
+  linkType: hard
+
 "nitropack@npm:^2.9.1":
   version: 2.9.7
   resolution: "nitropack@npm:2.9.7"