chingu-x · marktlinn · Sep 19, 2023 · Sep 11, 2023 · Sep 12, 2023 · Sep 12, 2023
@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "next": "13.4.12",
     "next-auth": "^4.22.3",
+    "next-themes": "^0.2.1",
     "prisma": "^5.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

@@ -1,7 +1,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { StoreProvider, Navbar } from "@/components";
+import { StoreProvider, Navbar, ThemeProvider } from "@/components";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -21,10 +21,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${inter.className} bg-base-content`}>
+    <html
+      lang="en"
+      className={`${inter.className} bg-base-content`}
+      suppressHydrationWarning
+    >
       <body>
-        <Navbar />
-        <StoreProvider>{children}</StoreProvider>
+        <ThemeProvider
+          defaultTheme="light"
+          enableSystem={false}
+          storageKey="chingu-theme"
+        >
+          <Navbar />
+          <StoreProvider>{children}</StoreProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

@@ -0,0 +1,34 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { SunIcon, MoonIcon } from "@heroicons/react/20/solid";
+import { ChangeEvent, useEffect, useState } from "react";
+
+export default function ModeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { setTheme, theme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const toggleTheme = (e: ChangeEvent<HTMLInputElement>) => {
+    setTheme(e.target.checked === true ? "light" : "dark");
+  };
+
+  return (
+    <label className="swap swap-rotate">
+      <input
+        type="checkbox"
+        onChange={toggleTheme}
+        checked={theme === "light"}
+      />
+      <MoonIcon className="w-6 h-6 duration-200 fill-current swap-on" />
+      <SunIcon className="w-6 h-6 duration-200 fill-current swap-off" />
+    </label>
+  );
+}
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
+
+export default ThemeProvider;
@@ -2,3 +2,5 @@ export { default as StoreProvider } from "./StoreProvider";
 export { default as Avatar } from "./Avatar";
 export { default as Navbar } from "./navbar/Navbar";
 export { default as Button } from "./Button";
+export { default as ModeToggle } from "./ModeToggle";
+export { default as ThemeProvider } from "./ThemeProvider";
@@ -1,18 +1,19 @@
-import { Avatar } from "@/components";
+import { Avatar, ModeToggle } from "@/components";
 import { Bell, ChinguMenu, DropDown } from "@/components/navbar";
 
 const name = "Yorick";
 const notificationCount = 4;
 
 export default function Navbar() {
   return (
-    <nav className="navbar bg-primary h-8">
+    <nav className="h-8 navbar bg-primary">
       <div className="flex-1 pl-2">
         <ChinguMenu />
       </div>
-      <div>
+      <div className="flex gap-x-10">
+        <ModeToggle />
         <Bell notificationCount={notificationCount} />
-        <div className="px-2 ml-6 flex flex-row items-center">
+        <div className="flex flex-row items-center pr-2">
           <Avatar image="/avatar.png" height={34} width={34} />
           <DropDown name={name} />
         </div>

@@ -8,19 +8,19 @@ module.exports = {
   daisyui: {
     themes: [
       {
-        chingu: {
+        light: {
           primary: "#40936D",
-          "primary-focus": "#3A8663",
+          "primary-focus": "#327355",
           "primary-content": "#C4DED2",
-          secondary: "#C2DAE9",
+          secondary: "#A3CEE9",
           "secondary-focus": "#B1C6D4",
-          "secondary-content": "#ECF4F8",
-          accent: "#A7F3D0",
+          "secondary-content": "#DAEAF2",
+          accent: "#6EE7B7",
           "accent-focus": "#98DDBD",
-          "accent-content": "#E4FBF0",
-          neutral: "#757575",
-          "neutral-focus": "#535353",
-          "neutral-content": "#919191",
+          "accent-content": "#D7EDE3",
+          neutral: "#6B7280",
+          "neutral-focus": "#4C515B",
+          "neutral-content": "#9CA1AA",
           info: "#8FC4E5",
           "info-content": "#DCEDF7",
           success: "#14B8A6",
@@ -29,10 +29,38 @@ module.exports = {
           "warning-content": "#FFE5B4",
           error: "#E6624B",
           "error-content": "#F7CEC7",
-          "base-100": "#D4D4D4",
-          "base-200": "#C0C0C0",
-          "base-300": "#A3A3A3",
-          "base-content": "#F1F1F1",
+          "base-100": "#D1D3D8",
+          "base-200": "#F5F5F5",
+          "base-300": "#16171A",
+          "base-content": "#EEEFF0",
+        },
+      },
+      {
+        dark: {
+          primary: "#40936D",
+          "primary-focus": "#82D9B1",
+          "primary-content": "#7FB79D",
+          secondary: "#8FB4CC",
+          "secondary-focus": "#A6D1ED",
+          "secondary-content": "#697F8C",
+          accent: "#61CCA2",
+          "accent-focus": "#6EE7B7",
+          "accent-content": "#6B9984",
+          neutral: "#6B7280",
+          "neutral-focus": "#A0A5AE",
+          "neutral-content": "#3B3F46",
+          info: "#84B5D4",
+          "info-content": "#668BA3",
+          success: "#43C6B8",
+          "success-content": "#0E8376",
+          warning: "#FFBD3D",
+          "warning-content": "#B57A09",
+          error: "#EB816F",
+          "error-content": "#A34635",
+          "base-100": "#4C515B",
+          "base-200": "#16171A",
+          "base-300": "#F5F5F5",
+          "base-content": "#2D3036",
         },
       },
     ],

@@ -4269,6 +4269,11 @@ next-auth@^4.22.3:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
 [email protected]:
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"