From 8bfa0fee05a7f2abdf137fd5f27b96aef9b197e8 Mon Sep 17 00:00:00 2001 From: Jaspal Singh Date: Wed, 16 Oct 2024 15:23:00 +0530 Subject: [PATCH] fix for the light mode --- app/globals.css | 69 +++++++++++++++++++++++++++----------- app/header.tsx | 20 +++++++---- components/ThemeToggle.tsx | 17 ++++++---- tailwind.config.ts | 51 ++++++++++++++++++++++------ 4 files changed, 114 insertions(+), 43 deletions(-) diff --git a/app/globals.css b/app/globals.css index 4679ba1..c5a40ec 100644 --- 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 index 2be764a..523c4b9 100644 --- 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 ( -
+
Logo SurviveTheNight
- Synced using Convex + Synced using Convex
- {!isAuthenticated ? ( - - ) : ( - - )} +
+
+ +
+ {!isAuthenticated ? ( + + ) : ( + + )} +
); } diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx index 87468ef..3c4e681 100644 --- 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 ( - - - - - - - + + {theme == "light" ? ( + + + + ) : ( + + + + )} diff --git a/tailwind.config.ts b/tailwind.config.ts index 25a0c3d..0248b43 100644 --- 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; \ No newline at end of file