gsadmin/ActiveDirectoryManager
1
0
Fork 0
mirror of https://github.com/freedbygrace/ActiveDirectoryManager.git synced 2026-08-19 14:57:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance theme switching to handle missing context

Browse Source 
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/70b9c0b1-a5f0-4a27-9a6a-5bb48b9d90b1.jpg
This commit is contained in:
alphaeusmote
2025-04-09 00:47:22 +00:00
parent b466886372
commit 597f859e08
3 changed files with 137 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/settings-page.tsx
+60 -14
View File
@@ -1,3 +1,4 @@
import { useState, useEffect } from "react";
import { DashboardLayout } from "@/layouts/dashboard-layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
@@ -14,6 +15,64 @@ import {
SelectValue
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Moon, Sun, Laptop } from "lucide-react";
// Safe theme selector that doesn't throw errors if ThemeProvider is missing
function ThemeSelector() {
const [currentTheme, setCurrentTheme] = useState<string>(() => {
// Read from localStorage or default to system
return localStorage.getItem("ad-management-theme") || "system";
});
const handleThemeChange = (value: string) => {
setCurrentTheme(value);
try {
// Handle theme change manually if context is missing
localStorage.setItem("ad-management-theme", value);
const root = window.document.documentElement;
root.classList.remove("light", "dark");
if (value === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
root.classList.add(systemTheme);
} else {
root.classList.add(value);
}
} catch (error) {
console.error("Error changing theme:", error);
}
};
return (
<RadioGroup value={currentTheme} onValueChange={handleThemeChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="light" id="light-theme" />
<Label htmlFor="light-theme" className="flex items-center">
<Sun className="mr-2 h-4 w-4" />
Light
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="dark" id="dark-theme" />
<Label htmlFor="dark-theme" className="flex items-center">
<Moon className="mr-2 h-4 w-4" />
Dark
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="system" id="system-theme" />
<Label htmlFor="system-theme" className="flex items-center">
<Laptop className="mr-2 h-4 w-4" />
System
</Label>
</div>
</RadioGroup>
);
}
export default function SettingsPage() {
return (
@@ -43,20 +102,7 @@ export default function SettingsPage() {
<div className="space-y-2">
<Label>Theme</Label>
<RadioGroup defaultValue="light">
<div className="flex items-center space-x-2">
<RadioGroupItem value="light" id="light" />
<Label htmlFor="light">Light</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="dark" id="dark" />
<Label htmlFor="dark">Dark</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="system" id="system" />
<Label htmlFor="system">System</Label>
</div>
</RadioGroup>
<ThemeSelector />
</div>
<div className="space-y-2">