Light & dark mode
How AskPhi's theme works today and how to influence it from your browser.
AskPhi supports both light and dark colour themes. Dark mode is designed for low-light environments and people who prefer dimmer interfaces.
Current state
The styling system is fully theme-aware: every page, button, and chart
is built with light and dark colour tokens. Your preference is stored
on this device under the key theme (light or dark).
noteA user-facing theme toggle is on the roadmap but not in the in-app UI yet. Until it ships, AskPhi defaults to light unless your saved value is
dark.
Switch theme today
Until a toggle button appears in the app:
-
Open your browser's developer tools console.
-
Run one of:
localStorage.setItem('theme', 'dark');or to go back to light:
localStorage.setItem('theme', 'light'); -
Refresh the page.
AskPhi reads the value at startup and applies the matching theme.
When the toggle ships
The plan is to add a sun/moon icon at the bottom of the sidebar. Click it to flip between light and dark instantly. Your choice will continue to be saved on this device, so each browser keeps its own preference.
What changes between themes
| Element | Light theme | Dark theme |
|---|---|---|
| Background | White / light grey | Near-black / very dark grey |
| Text | Dark grey | Light grey |
| Brand accent | #5661F6 (same) | #5661F6 (same) |
| Code blocks (in docs) | Light syntax theme | Dark syntax theme |
| Charts | White plot background | Dark plot background |
Tips
- Choose dark mode for evening use; many users find it less tiring.
- Print-friendly screenshots and shared content tend to look better in light mode.
- Browser settings (
prefers-color-scheme) don't automatically override your saved value yet. Set the theme manually if you want it changed.
Troubleshooting
- Theme didn't change after I edited localStorage — refresh the page; AskPhi applies the value on load.
- Other users see a different theme on the same machine — themes are saved per browser, not per AskPhi account. Each user signs in fresh and inherits whatever you set.