From 656d0329f1d4999a099dd55ec71e380c33000d4e Mon Sep 17 00:00:00 2001
From: David Rouyer <rouyer.david@gmail.com>
Date: Sat, 5 Oct 2024 15:13:13 +0200
Subject: [PATCH] feat: theme

---
 apps/web/app/components/logo.tsx |  2 +-
 apps/web/app/router.tsx          |  7 ++++++-
 apps/web/app/routes/__root.tsx   |  4 ++++
 apps/web/package.json            |  1 +
 yarn.lock                        | 11 +++++++++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/components/logo.tsx b/apps/web/app/components/logo.tsx
index 18c351e11..6f9c244d3 100644
--- a/apps/web/app/components/logo.tsx
+++ b/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"
diff --git a/apps/web/app/router.tsx b/apps/web/app/router.tsx
index 76dab69e7..01bd9f891 100644
--- a/apps/web/app/router.tsx
+++ b/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,
diff --git a/apps/web/app/routes/__root.tsx b/apps/web/app/routes/__root.tsx
index f1a7ec561..1a0466541 100644
--- a/apps/web/app/routes/__root.tsx
+++ b/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 },
diff --git a/apps/web/package.json b/apps/web/package.json
index 6d067a1ab..779d08e54 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 3840416b9..72ae069da 100644
--- a/yarn.lock
+++ b/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"