added ThemeProvider to prevent user's default color scheme setting by…

… their device
AmirKakavand · Aug 2, 2024 · ad475a7 · ad475a7
1 parent 805ac9d
commit ad475a7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 27 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -9,24 +9,6 @@
   font-style: normal;
 }
 
-:root {
-  --background-color: #231F20;
-  --text-color: #F9F4DA; /* Light mode text */
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-      --background-color: #231F20; /* Dark mode background */
-      --text-color: #F9F4DA; /* Dark mode text */
-  }
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-      --background-color: #231F20; /* Dark mode background */
-      --text-color: #F9F4DA; /* Dark mode text */
-  }
-}
-
 body {
   /* color: rgb(var(--foreground-rgb)); */
   background-color: #231F20;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,11 +1,12 @@
 import type { Metadata } from "next";
-import Head from "next/head"
+import Head from "next/head";
 import "./globals.css";
-
+import { ThemeProvider } from "next-themes";
 
 export const metadata: Metadata = {
   title: "Rick & Morty Wiki",
-  description: "Explore all the different characters of the popular Rick and Morty Show",
+  description:
+    "Explore all the different characters of the popular Rick and Morty Show",
 };
 
 export default function RootLayout({
@@ -14,12 +15,22 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" href="/favicon.ico" sizes="any" />
+    <ThemeProvider enableColorScheme={false} attribute="class">
+      <html lang="en">
+        <Head>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <link rel="icon" href="/favicon.ico" sizes="any" />
         </Head>
-      <body style={{fontFamily: "Wellfleet, sans-serif"}} className="max-w-screen">{children}</body>
-    </html>
+        <body
+          style={{ fontFamily: "Wellfleet, sans-serif" }}
+          className="max-w-screen"
+        >
+          {children}
+        </body>
+      </html>
+    </ThemeProvider>
   );
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@heroicons/react": "^2.1.5",
     "@tailwindcss/forms": "^0.5.7",
     "next": "14.2.5",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "swr": "^2.2.5"