feat: Add dark/light mode theme switching with dynamic favicons
Implemented comprehensive dark/light mode support throughout the app: - Added ColorSchemeScript to layout for auto-detection of system preference - Updated MantineProvider to use 'auto' color scheme (respects system) - Updated theme.ts with dynamic Paper component styles based on color scheme - Created ThemeToggle component with sun/moon icons - Added toggle to desktop sidebar navigation - Created theme-specific favicons (favicon-light.svg, favicon-dark.svg) - Made ThoughtGalaxy 3D visualization theme-aware: - Dynamic node colors based on theme - Theme-aware lighting intensity - Theme-aware link colors - Theme-aware text labels - Added comprehensive Playwright tests for theme functionality - Theme preference persists via localStorage Tested manually with Playwright MCP: - ✅ Theme toggle switches between light and dark modes - ✅ Theme persists across page reloads - ✅ Both modes render correctly with appropriate colors - ✅ Icons change based on current theme (sun/moon) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -13,6 +13,7 @@ import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icon
|
||||
import { useSelector } from '@xstate/react';
|
||||
import { useAppMachine } from '@/hooks/useAppMachine';
|
||||
import { UserMenu } from '@/components/UserMenu';
|
||||
import { ThemeToggle } from '@/components/ThemeToggle';
|
||||
|
||||
export function DesktopSidebar() {
|
||||
const actor = useAppMachine();
|
||||
@@ -111,6 +112,9 @@ export function DesktopSidebar() {
|
||||
|
||||
<Divider my="md" color="#373A40" />
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<ThemeToggle />
|
||||
|
||||
{/* User Menu - styled like other nav items */}
|
||||
<UserMenu showLabel={true} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user