From 98145f0264586ee00ca1db0dd6e21fa2fe2b4363 Mon Sep 17 00:00:00 2001 From: Hannah_Bagga Date: Mon, 29 Jun 2026 19:28:35 +0200 Subject: [PATCH] light and dark mode fixed and default mode is the default unless you pick Spidey mode --- Web_Backgrounds/spidey-theme.css | 31 ++++++++++++++++++++++ src/app/api/auth/login/route.ts | 6 +++++ src/app/login/page.tsx | 5 ++++ src/components/settings/theme-settings.tsx | 8 +++--- src/providers/website-theme-provider.tsx | 13 +++------ 5 files changed, 50 insertions(+), 13 deletions(-) diff --git a/Web_Backgrounds/spidey-theme.css b/Web_Backgrounds/spidey-theme.css index 1fbd3d7..f1623ac 100644 --- a/Web_Backgrounds/spidey-theme.css +++ b/Web_Backgrounds/spidey-theme.css @@ -4,6 +4,37 @@ ============================================================================ */ .theme-spidey { + --background: 240 18% 97%; + --foreground: 240 8% 14%; + --card: 0 0% 100%; + --card-foreground: 240 8% 14%; + --popover: 0 0% 100%; + --popover-foreground: 240 8% 14%; + --primary: 0 90% 46%; + --primary-foreground: 0 0% 100%; + --secondary: 220 75% 48%; + --secondary-foreground: 0 0% 100%; + --muted: 240 8% 92%; + --muted-foreground: 240 5% 50%; + --accent: 220 15% 90%; + --accent-foreground: 220 60% 28%; + --destructive: 0 70% 46%; + --destructive-foreground: 0 0% 100%; + --border: 240 8% 84%; + --input: 240 8% 84%; + --ring: 0 90% 46%; + --radius: 0.5rem; + --sidebar: 0 0% 99%; + --sidebar-foreground: 240 8% 14%; + --sidebar-primary: 0 90% 46%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 220 20% 93%; + --sidebar-accent-foreground: 220 70% 28%; + --sidebar-border: 240 8% 84%; + --sidebar-ring: 0 90% 46%; +} + +.dark.theme-spidey { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts index ea1cd8a..5e1fbcc 100644 --- a/src/app/api/auth/login/route.ts +++ b/src/app/api/auth/login/route.ts @@ -12,6 +12,7 @@ import { setSessionContext, SESSION_COOKIE, } from "@/lib/auth" +import { query } from "@/lib/db" function jsonResponse(data: unknown, status: number) { return new Response(JSON.stringify(data), { @@ -114,6 +115,11 @@ export async function POST(request: NextRequest) { true ) + await query( + `UPDATE users SET preferences = preferences || $2::jsonb WHERE id = $1`, + [dbUser.id, JSON.stringify({ website_theme: "default" })], + ) + const token = await createSession(dbUser.id, dbUser.role_name) await setSessionContext(dbUser.id, ipAddress) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 587932b..081bf85 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -4,6 +4,8 @@ import { useState, useEffect, useRef, Suspense } from "react" import { useSearchParams, useRouter } from "next/navigation" import { Eye, EyeOff, Loader2 } from "lucide-react" +const WEBSITE_THEME_KEY = "crm-website-theme" + const waves = [ { a: 16, f: 0.011, s: 0.018, y: 0.38, fill: "rgba(27,176,206,0.18)" }, { a: 20, f: 0.008, s: 0.013, y: 0.52, fill: "rgba(27,176,206,0.25)" }, @@ -227,6 +229,9 @@ function LoginForm() { }) if (res.ok) { + localStorage.removeItem(WEBSITE_THEME_KEY) + const root = document.documentElement + root.className = root.className.split(" ").filter((c) => !c.startsWith("theme-")).join(" ").trim() const redirectTo = searchParams.get("redirect") || "/dashboard" router.push(redirectTo) } else { diff --git a/src/components/settings/theme-settings.tsx b/src/components/settings/theme-settings.tsx index 0d7584d..68f54f4 100644 --- a/src/components/settings/theme-settings.tsx +++ b/src/components/settings/theme-settings.tsx @@ -41,12 +41,12 @@ function getStoredColorTheme(): string { } function applyColorTheme(theme: string) { - document.documentElement.className = document.documentElement.className - .replace(/\b(default|ocean|forest|sunset|midnight|rose|amber|violet|slate|ruby)\b/g, "") - .trim() + const colorThemes = ["default","ocean","forest","sunset","midnight","rose","amber","violet","slate","ruby"] + const classes = document.documentElement.className.split(" ").filter(c => !colorThemes.includes(c)) if (theme !== "default") { - document.documentElement.classList.add(theme) + classes.push(theme) } + document.documentElement.className = classes.join(" ").trim() localStorage.setItem(COLOR_THEME_KEY, theme) } diff --git a/src/providers/website-theme-provider.tsx b/src/providers/website-theme-provider.tsx index 6bd122a..70034b2 100644 --- a/src/providers/website-theme-provider.tsx +++ b/src/providers/website-theme-provider.tsx @@ -5,7 +5,6 @@ import { createContext, useContext, useState, useEffect, ReactNode, useCallback const WEBSITE_THEME_KEY = "crm-website-theme" const themeClasses: Record = { - default: "theme-default", spidey: "theme-spidey", } @@ -43,13 +42,6 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) { const [loading, setLoading] = useState(true) useEffect(() => { - const stored = getStoredTheme() - if (stored) { - setWebsiteThemeState(stored) - applyWebsiteTheme(stored) - setLoading(false) - return - } fetch("/api/settings/website-theme") .then((res) => (res.ok ? res.json() : null)) .then((data) => { @@ -59,7 +51,10 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) { applyWebsiteTheme(theme) }) .catch(() => { - applyWebsiteTheme("default") + const stored = getStoredTheme() + const theme = stored || "default" + setWebsiteThemeState(theme) + applyWebsiteTheme(theme) }) .finally(() => setLoading(false)) }, [])