archive: add-dark-light-mode change complete
This commit is contained in:
parent
a8f9327d19
commit
88e7347918
7 changed files with 0 additions and 0 deletions
|
|
@ -1,28 +0,0 @@
|
|||
## Why
|
||||
|
||||
The application currently uses a fixed hacker theme with a dark background. Users may prefer a light theme for better visibility in bright environments or to match their system preferences. Adding dark/light mode with system theme detection and manual override provides flexibility and improves accessibility.
|
||||
|
||||
## What Changes
|
||||
|
||||
- Add system theme detection that automatically applies dark or light mode based on the user's OS/browser preference
|
||||
- Add a manual theme toggle control that allows users to override the system preference
|
||||
- Persist the user's theme preference in localStorage so it survives page refreshes
|
||||
- Update the hacker theme implementation to support both light and dark variants while maintaining the monospace, neon-accent aesthetic
|
||||
- Ensure all UI components (sidebar, chart, buttons, inputs, modals) adapt correctly to both themes
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `theme-switching`: System for detecting OS theme preference, providing manual theme toggle, and persisting user preference across sessions
|
||||
|
||||
### Modified Capabilities
|
||||
- `hacker-theme`: Extend existing hacker theme to support both dark and light color variants while preserving monospace typography, neon accents, and terminal aesthetic
|
||||
- `ui-shell`: Add theme toggle control to the UI layout
|
||||
|
||||
## Impact
|
||||
|
||||
- **Frontend**: New theme provider/context in Next.js app, updated Tailwind config with light mode colors, theme toggle component
|
||||
- **CSS**: Extended color palette in globals.css and tailwind.config.ts for light mode variants
|
||||
- **Components**: All components must support both themes (sidebar, chart canvas, toolbox, modals, inputs)
|
||||
- **Dependencies**: May require next-themes or similar library for robust theme management
|
||||
- **User preferences**: localStorage usage for theme persistence
|
||||
Loading…
Add table
Add a link
Reference in a new issue