gsadmin/ActiveDirectoryManager
1
0
Fork 0
mirror of https://github.com/freedbygrace/ActiveDirectoryManager.git synced 2026-07-26 11:59:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement automatic theme syncing based on system preferences

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/a42bd2e2-cfdc-48ae-9e9e-dea25be47f88.jpg
This commit is contained in:
alphaeusmote
2025-04-09 02:42:21 +00:00
parent 50be12f28d e018e40db7
commit 849b976bfa
4 changed files with 149 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+4
View File
@@ -3,6 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<meta name="theme-color" content="#ffffff" />
<meta name="description" content="Active Directory Management - A powerful tool for managing your AD infrastructure" />
<title>Active Directory Management</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
<div id="root"></div>
client/public/favicon.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
path { fill: #1e40af; }
@media (prefers-color-scheme: dark) {
path { fill: #60a5fa; }
}
</style>
<path d="M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm6 4a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm-5 9c.83 0 1.58-.34 2.12-.88C7.61 12.85 8.17 12 12 12c3.83 0 4.39.85 2.88 2.12.54.54 1.29.88 2.12.88C19.17 16 20 15.17 20 14v-.5c0-1.1-.9-2-2-2h-1.44C15.76 11.83 14.91 12 14 12h-4c-.91 0-1.76-.17-2.56-.5H6c-1.1 0-2 .9-2 2v.5c0 1.17.83 2 2 2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 627 B

client/src/components/theme-toggle.tsx
+69 -14
View File
@@ -1,11 +1,12 @@
import * as React from "react";
import { Moon, Sun, Laptop } from "lucide-react";
import { Moon, Sun, Laptop, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { useTheme } from "@/hooks/use-theme";
@@ -28,29 +29,83 @@ export function ThemeToggle() {
// Component that uses the theme context
function ThemeToggleWithContext() {
const { theme, setTheme } = useTheme();
const { theme, setTheme, resolvedTheme } = useTheme();
const iconClassName = "h-5 w-5 transition-all duration-200";
// Determine which icon to show in the button based on current theme
const getButtonIcon = () => {
if (theme === 'system') {
return resolvedTheme === 'dark'
? <Moon className={iconClassName} />
: <Sun className={iconClassName} />;
} else if (theme === 'dark') {
return <Moon className={iconClassName} />;
} else {
return <Sun className={iconClassName} />;
}
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="relative h-9 w-9 rounded-md">
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<Button
variant="ghost"
size="icon"
className="relative h-9 w-9 rounded-md transition-colors"
title={`Current theme: ${theme} ${theme === 'system' ? `(${resolvedTheme})` : ''}`}
>
{getButtonIcon()}
<span className="sr-only">Toggle theme</span>
{theme === 'system' && (
<span className="absolute bottom-1 right-1 h-2 w-2 rounded-full bg-primary"
title="Using system preference"></span>
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
<Sun className="mr-2 h-4 w-4" />
<span>Light</span>
<div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
Theme
</div>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => setTheme("light")}
className="flex justify-between"
>
<div className="flex items-center">
<Sun className="mr-2 h-4 w-4" />
<span>Light</span>
</div>
{theme === "light" && <Check className="h-4 w-4 ml-1 text-primary" />}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
<Moon className="mr-2 h-4 w-4" />
<span>Dark</span>
<DropdownMenuItem
onClick={() => setTheme("dark")}
className="flex justify-between"
>
<div className="flex items-center">
<Moon className="mr-2 h-4 w-4" />
<span>Dark</span>
</div>
{theme === "dark" && <Check className="h-4 w-4 ml-1 text-primary" />}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
<Laptop className="mr-2 h-4 w-4" />
<span>System</span>
<DropdownMenuItem
onClick={() => setTheme("system")}
className="flex justify-between"
>
<div className="flex items-center">
<Laptop className="mr-2 h-4 w-4" />
<span>System</span>
</div>
{theme === "system" && (
<div className="flex items-center">
{resolvedTheme === "dark" ? (
<Moon className="h-3 w-3 mr-1 text-muted-foreground" />
) : (
<Sun className="h-3 w-3 mr-1 text-muted-foreground" />
)}
<Check className="h-4 w-4 text-primary" />
</div>
)}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
client/src/hooks/use-theme.tsx
+66 -16
View File
@@ -5,6 +5,7 @@ type Theme = 'dark' | 'light' | 'system';
interface ThemeContextType {
theme: Theme;
setTheme: (theme: Theme) => void;
resolvedTheme: 'dark' | 'light';
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -24,25 +25,60 @@ export function ThemeProvider({
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
);
const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>(
window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
);
// Apply the theme to the document
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove('light', 'dark');
let effectiveTheme: 'light' | 'dark';
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
root.classList.add(systemTheme);
return;
effectiveTheme = resolvedTheme;
} else {
effectiveTheme = theme as 'light' | 'dark';
}
root.classList.add(effectiveTheme);
root.classList.add(theme);
}, [theme]);
// Add a transition for smoother theme changes
root.style.colorScheme = effectiveTheme;
// Set meta theme-color for mobile browsers
document.querySelector('meta[name="theme-color"]')?.setAttribute(
'content',
effectiveTheme === 'dark' ? '#020817' : '#ffffff'
);
}, [theme, resolvedTheme]);
// Listen for system theme changes
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
// Define handler for system theme changes
const handleSystemThemeChange = (event: MediaQueryListEvent) => {
const newSystemTheme = event.matches ? 'dark' : 'light';
setResolvedTheme(newSystemTheme);
// Log the change for debugging
console.log(`System theme changed to ${newSystemTheme}`);
};
// Add listener for system theme changes
mediaQuery.addEventListener('change', handleSystemThemeChange);
// Clean up listener on component unmount
return () => {
mediaQuery.removeEventListener('change', handleSystemThemeChange);
};
}, []);
const value = {
theme,
resolvedTheme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
@@ -64,6 +100,9 @@ export const useTheme = (): ThemeContextType => {
// This prevents crashes but won't sync across components
const storageKey = 'ad-management-theme';
const defaultTheme = 'system';
const resolvedSystemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
// Create a fallback state using localStorage
const getThemeFromStorage = (): Theme => {
@@ -77,19 +116,29 @@ export const useTheme = (): ThemeContextType => {
const currentTheme = getThemeFromStorage();
const getResolvedTheme = (theme: Theme): 'light' | 'dark' => {
if (theme === 'system') {
return resolvedSystemTheme;
}
return theme as 'light' | 'dark';
};
const applyThemeToDOM = (newTheme: Theme) => {
try {
const root = window.document.documentElement;
root.classList.remove('light', 'dark');
if (newTheme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
root.classList.add(systemTheme);
} else {
root.classList.add(newTheme);
}
const effectiveTheme = getResolvedTheme(newTheme);
root.classList.add(effectiveTheme);
// Add a transition for smoother theme changes
root.style.colorScheme = effectiveTheme;
// Set meta theme-color for mobile browsers
document.querySelector('meta[name="theme-color"]')?.setAttribute(
'content',
effectiveTheme === 'dark' ? '#020817' : '#ffffff'
);
} catch (e) {
console.error('Error applying theme to DOM:', e);
}
@@ -101,6 +150,7 @@ export const useTheme = (): ThemeContextType => {
// Return a fallback implementation
return {
theme: currentTheme,
resolvedTheme: getResolvedTheme(currentTheme),
setTheme: (newTheme: Theme) => {
try {
localStorage.setItem(storageKey, newTheme);