fix for the light mode

webdevcody · Oct 16, 2024 · 8bfa0fe · 8bfa0fe
1 parent eaf4971
commit 8bfa0fe
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 43 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -4,6 +4,7 @@
 
 /* To change the theme colors, change the values below
   or use the "Copy code" button at https://ui.shadcn.com/themes */
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -32,27 +33,54 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
   }
-
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 222.2 84% 4.9%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -68,4 +96,7 @@
   body {
     @apply bg-gradient-to-b from-slate-950 to-slate-900 text-foreground;
   }
+  .light body {
+    @apply bg-gradient-to-b from-blue-300 to-blue-100;
+  }
 }
diff --git a/app/header.tsx b/app/header.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { useConvexAuth } from "convex/react";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 function SignInWithGitHub() {
   const { signIn } = useAuthActions();
@@ -25,14 +26,14 @@ export default function Header() {
   const { isAuthenticated } = useConvexAuth();
 
   return (
-    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b bg-slate-950">
+    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b">
       <Link href="/" className="flex items-center">
         <Image src="/logo.png" alt="Logo" width={32} height={32} />
         <span className="ml-2 text-xl font-bold">SurviveTheNight</span>
       </Link>
 
       <div className="flex items-center">
-        <span className="mr-2 text-sm text-gray-200">Synced using Convex</span>
+        <span className="mr-2 text-sm">Synced using Convex</span>
         <Link
           href="https://www.convex.dev"
           target="_blank"
@@ -42,11 +43,16 @@ export default function Header() {
         </Link>
       </div>
 
-      {!isAuthenticated ? (
-        <SignInWithGitHub />
-      ) : (
-        <Button onClick={() => void signOut()}>Sign Out</Button>
-      )}
+      <div className="flex">
+        <div className="flex hover:bg-slate-500 mr-3 rounded-md px-1">
+          <ThemeToggle/>
+        </div>
+        {!isAuthenticated ? (
+          <SignInWithGitHub />
+        ) : (
+          <Button onClick={() => void signOut()}>Sign Out</Button>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
@@ -7,13 +7,16 @@ import { useTheme } from "next-themes";
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   return (
-    <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme}>
-      <ToggleGroupItem value="light" aria-label="Light">
-        <SunIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="dark" aria-label="Dark">
-        <MoonIcon />
-      </ToggleGroupItem>
+    <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme} className="">
+      {theme == "light" ? (
+        <ToggleGroupItem value="dark" aria-label="Dark">
+          <MoonIcon />
+        </ToggleGroupItem>
+      ) : (
+        <ToggleGroupItem value="light" aria-label="Light">
+          <SunIcon />
+        </ToggleGroupItem>
+      )}
       <ToggleGroupItem value="system" aria-label="System">
         <DesktopIcon />
       </ToggleGroupItem>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,14 +1,14 @@
 import type { Config } from "tailwindcss";
 
-const config = {
-  darkMode: "selector",
+const config: Config = {
+  darkMode: "class", // Use 'class' strategy for toggling dark mode
   content: [
     "./pages/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
   ],
-  safelist: ["dark"],
+  safelist: ["dark", "light"], // Safelist the 'light' class
   prefix: "",
   theme: {
     container: {
@@ -53,6 +53,42 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        // Light mode colors
+        light: {
+          border: "hsl(var(--light-border))",
+          input: "hsl(var(--light-input))",
+          ring: "hsl(var(--light-ring))",
+          background: "hsl(var(--light-background))",
+          foreground: "hsl(var(--light-foreground))",
+          primary: {
+            DEFAULT: "hsl(var(--light-primary))",
+            foreground: "hsl(var(--light-primary-foreground))",
+          },
+          secondary: {
+            DEFAULT: "hsl(var(--light-secondary))",
+            foreground: "hsl(var(--light-secondary-foreground))",
+          },
+          destructive: {
+            DEFAULT: "hsl(var(--light-destructive))",
+            foreground: "hsl(var(--light-destructive-foreground))",
+          },
+          muted: {
+            DEFAULT: "hsl(var(--light-muted))",
+            foreground: "hsl(var(--light-muted-foreground))",
+          },
+          accent: {
+            DEFAULT: "hsl(var(--light-accent))",
+            foreground: "hsl(var(--light-accent-foreground))",
+          },
+          popover: {
+            DEFAULT: "hsl(var(--light-popover))",
+            foreground: "hsl(var(--light-popover-foreground))",
+          },
+          card: {
+            DEFAULT: "hsl(var(--light-card))",
+            foreground: "hsl(var(--light-card-foreground))",
+          },
+        },
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -69,13 +105,8 @@ const config = {
           to: { height: "0" },
         },
       },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-} satisfies Config;
+};
 
-export default config;
+export default config;