app/favicon-light.svg at 39aea340264eff588ce672118166b97d95155661 - app - Vaporware

ponderants/app

Files

Albert 9bf16fefaf 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>

2025-11-09 22:04:26 +00:00

8 lines

340 B

XML

Raw Blame History

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <!-- Dark icon for light mode -->
   <circle cx="50" cy="50" r="40" fill="#212529" />
   <circle cx="35" cy="45" r="5" fill="#ffffff" />
   <circle cx="65" cy="45" r="5" fill="#ffffff" />
   <path d="M 30 65 Q 50 75 70 65" stroke="#ffffff" stroke-width="3" fill="none" />
 </svg>