archive: add-dark-light-mode change complete
This commit is contained in:
Marko Djordjevic
parent
a8f9327d19
commit
88e7347918
7 changed files with 0 additions and 0 deletions
|
|
@ -0,0 +1,121 @@
|
|||
## MODIFIED Requirements
|
||||
|
||||
### Requirement: Matrix-style color scheme
|
||||
The application SHALL use a dark background with neon green (#00ff41) accent color scheme in dark mode and a light background with muted green accents in light mode.
|
||||
|
||||
#### Scenario: Dark mode background colors
|
||||
- **WHEN** rendering main layout in dark mode
|
||||
- **THEN** page background is #0a0e0a (near black), sidebar background is #0d110d, and chart background is #000000
|
||||
|
||||
#### Scenario: Dark mode primary accent color
|
||||
- **WHEN** highlighting interactive elements in dark mode
|
||||
- **THEN** uses #00ff41 (matrix green) as the primary accent color
|
||||
|
||||
#### Scenario: Dark mode secondary accent colors
|
||||
- **WHEN** rendering labels or status indicators in dark mode
|
||||
- **THEN** uses #ff0040 (neon red) for break_down/destructive, #00ff41 (neon green) for break_up/success, #00d4ff (neon cyan) for informational, #ffff00 (neon yellow) for warnings
|
||||
|
||||
#### Scenario: Dark mode text colors
|
||||
- **WHEN** rendering text in dark mode
|
||||
- **THEN** primary text is #00ff41, secondary text is #00cc33, and disabled text is #003311
|
||||
|
||||
#### Scenario: Dark mode border colors
|
||||
- **WHEN** rendering borders in dark mode
|
||||
- **THEN** uses #00ff41 with 1px solid for active elements, #003311 for inactive borders
|
||||
|
||||
#### Scenario: Light mode background colors
|
||||
- **WHEN** rendering main layout in light mode
|
||||
- **THEN** page background is #f8faf8 (off-white with green tint), sidebar background is #f0f4f0, and chart background is #ffffff
|
||||
|
||||
#### Scenario: Light mode primary accent color
|
||||
- **WHEN** highlighting interactive elements in light mode
|
||||
- **THEN** uses #16a34a (green-600) as the primary accent color
|
||||
|
||||
#### Scenario: Light mode text colors
|
||||
- **WHEN** rendering text in light mode
|
||||
- **THEN** primary text is #1a1a2e (near-black), secondary text is #4a5568 (gray-600), and disabled text is #a0aec0 (gray-400)
|
||||
|
||||
#### Scenario: Light mode border colors
|
||||
- **WHEN** rendering borders in light mode
|
||||
- **THEN** uses #d1d5db (gray-300) for borders, #16a34a for active element borders
|
||||
|
||||
### Requirement: Neon glow effects
|
||||
The application SHALL apply glow effects to active and interactive elements in dark mode only.
|
||||
|
||||
#### Scenario: Button hover glow in dark mode
|
||||
- **WHEN** user hovers over any button in dark mode
|
||||
- **THEN** button shows box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff4180
|
||||
|
||||
#### Scenario: No glow in light mode
|
||||
- **WHEN** user hovers over any button in light mode
|
||||
- **THEN** button shows standard hover state (subtle background change) without neon glow effects
|
||||
|
||||
#### Scenario: Active tool glow in dark mode
|
||||
- **WHEN** a tool is active (selected) in dark mode
|
||||
- **THEN** button shows pulsing glow animation
|
||||
|
||||
#### Scenario: Active tool highlight in light mode
|
||||
- **WHEN** a tool is active (selected) in light mode
|
||||
- **THEN** button shows solid green background/border highlight without glow animation
|
||||
|
||||
### Requirement: Responsive dark theme
|
||||
The application SHALL maintain theme consistency across all components and states in both dark and light modes.
|
||||
|
||||
#### Scenario: Modal dialogs in dark mode
|
||||
- **WHEN** displaying confirmation dialogs in dark mode
|
||||
- **THEN** modal has dark background (#0d110d), neon green border, monospace font
|
||||
|
||||
#### Scenario: Modal dialogs in light mode
|
||||
- **WHEN** displaying confirmation dialogs in light mode
|
||||
- **THEN** modal has white background, gray border, monospace font
|
||||
|
||||
#### Scenario: Input fields in dark mode
|
||||
- **WHEN** rendering text inputs in dark mode
|
||||
- **THEN** inputs have transparent background, #00ff41 border, #00ff41 text
|
||||
|
||||
#### Scenario: Input fields in light mode
|
||||
- **WHEN** rendering text inputs in light mode
|
||||
- **THEN** inputs have white background, gray-300 border, near-black text
|
||||
|
||||
#### Scenario: Scrollbars in dark mode
|
||||
- **WHEN** content requires scrolling in dark mode
|
||||
- **THEN** scrollbar track is #003311, thumb is #00ff41
|
||||
|
||||
#### Scenario: Scrollbars in light mode
|
||||
- **WHEN** content requires scrolling in light mode
|
||||
- **THEN** scrollbar track is #e2e8f0, thumb is #94a3b8
|
||||
|
||||
### Requirement: Tailwind CSS configuration
|
||||
The Tailwind config SHALL support theme tokens for both dark and light modes via CSS variables.
|
||||
|
||||
#### Scenario: CSS variables for dark mode
|
||||
- **WHEN** the `dark` class is on `<html>`
|
||||
- **THEN** CSS variables resolve to hacker-theme dark palette values
|
||||
|
||||
#### Scenario: CSS variables for light mode
|
||||
- **WHEN** the `dark` class is NOT on `<html>`
|
||||
- **THEN** CSS variables resolve to light theme palette values
|
||||
|
||||
### Requirement: globals.css updates
|
||||
The globals.css file SHALL define CSS variables for both light and dark themes.
|
||||
|
||||
#### Scenario: Light mode CSS variables
|
||||
- **WHEN** globals.css is loaded without `dark` class
|
||||
- **THEN** `:root` defines light theme color variables
|
||||
|
||||
#### Scenario: Dark mode CSS variables
|
||||
- **WHEN** globals.css is loaded with `dark` class on `<html>`
|
||||
- **THEN** `.dark` selector overrides with hacker-theme dark palette variables
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Cyber-retro effects dark-mode only
|
||||
The application SHALL only apply CRT scanline effects, noise textures, and flicker animations in dark mode.
|
||||
|
||||
#### Scenario: Scanlines in dark mode
|
||||
- **WHEN** rendering main container in dark mode
|
||||
- **THEN** applies subtle CRT scanline overlay at 5% opacity
|
||||
|
||||
#### Scenario: No scanlines in light mode
|
||||
- **WHEN** rendering main container in light mode
|
||||
- **THEN** no scanline or CRT effects are applied
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: System theme detection
|
||||
The application SHALL detect the user's operating system color scheme preference on initial load and apply the matching theme (dark or light).
|
||||
|
||||
#### Scenario: System prefers dark mode
|
||||
- **WHEN** the user's OS is set to dark mode and no manual preference is stored
|
||||
- **THEN** the application renders with the dark theme
|
||||
|
||||
#### Scenario: System prefers light mode
|
||||
- **WHEN** the user's OS is set to light mode and no manual preference is stored
|
||||
- **THEN** the application renders with the light theme
|
||||
|
||||
#### Scenario: System preference changes while app is open
|
||||
- **WHEN** the user changes their OS color scheme while the app is open and theme is set to "system"
|
||||
- **THEN** the application switches to match the new system preference without page reload
|
||||
|
||||
### Requirement: Manual theme toggle
|
||||
The application SHALL provide a toggle control that cycles through three modes: System, Light, and Dark.
|
||||
|
||||
#### Scenario: Toggle from system to light
|
||||
- **WHEN** user clicks the theme toggle while in "system" mode
|
||||
- **THEN** the theme switches to "light" mode regardless of system preference
|
||||
|
||||
#### Scenario: Toggle from light to dark
|
||||
- **WHEN** user clicks the theme toggle while in "light" mode
|
||||
- **THEN** the theme switches to "dark" mode regardless of system preference
|
||||
|
||||
#### Scenario: Toggle from dark to system
|
||||
- **WHEN** user clicks the theme toggle while in "dark" mode
|
||||
- **THEN** the theme switches to "system" mode and applies the current OS preference
|
||||
|
||||
#### Scenario: Toggle icon reflects current mode
|
||||
- **WHEN** the theme is set to "system"
|
||||
- **THEN** the toggle displays a monitor icon
|
||||
- **WHEN** the theme is set to "light"
|
||||
- **THEN** the toggle displays a sun icon
|
||||
- **WHEN** the theme is set to "dark"
|
||||
- **THEN** the toggle displays a moon icon
|
||||
|
||||
### Requirement: Theme preference persistence
|
||||
The application SHALL persist the user's theme choice in localStorage so it survives page refreshes and browser restarts.
|
||||
|
||||
#### Scenario: Preference survives refresh
|
||||
- **WHEN** user selects "dark" mode and refreshes the page
|
||||
- **THEN** the application loads in dark mode without flashing light mode first
|
||||
|
||||
#### Scenario: Clearing preference
|
||||
- **WHEN** user selects "system" mode
|
||||
- **THEN** the stored preference is set to "system" and the OS preference is followed
|
||||
|
||||
### Requirement: No flash of incorrect theme (FOUC prevention)
|
||||
The application SHALL apply the correct theme before the first paint to prevent a visible flash of the wrong color scheme.
|
||||
|
||||
#### Scenario: Dark mode user loads page
|
||||
- **WHEN** a user with dark mode preference stored loads the page
|
||||
- **THEN** the page renders dark from the first visible frame with no white flash
|
||||
|
||||
#### Scenario: Light mode user loads page
|
||||
- **WHEN** a user with light mode preference stored loads the page
|
||||
- **THEN** the page renders light from the first visible frame with no dark flash
|
||||
|
||||
### Requirement: ThemeProvider integration
|
||||
The application SHALL use a ThemeProvider component wrapping the app in the root layout. The provider SHALL use the `class` strategy to add/remove the `dark` class on the `<html>` element.
|
||||
|
||||
#### Scenario: Dark class applied
|
||||
- **WHEN** the active theme is dark
|
||||
- **THEN** the `<html>` element has the `dark` class
|
||||
|
||||
#### Scenario: Dark class removed
|
||||
- **WHEN** the active theme is light
|
||||
- **THEN** the `<html>` element does NOT have the `dark` class
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Theme toggle in sidebar
|
||||
The UI shell SHALL include a theme toggle button in the sidebar. The button SHALL be positioned at the bottom of the sidebar, visually separated from the tool buttons.
|
||||
|
||||
#### Scenario: Toggle button renders
|
||||
- **WHEN** the application loads
|
||||
- **THEN** a theme toggle button is visible at the bottom of the sidebar
|
||||
|
||||
#### Scenario: Toggle button displays correct icon
|
||||
- **WHEN** the current theme mode is "system"
|
||||
- **THEN** the button shows a monitor icon (lucide-react `Monitor`)
|
||||
- **WHEN** the current theme mode is "light"
|
||||
- **THEN** the button shows a sun icon (lucide-react `Sun`)
|
||||
- **WHEN** the current theme mode is "dark"
|
||||
- **THEN** the button shows a moon icon (lucide-react `Moon`)
|
||||
|
||||
#### Scenario: Toggle button has tooltip
|
||||
- **WHEN** user hovers over the theme toggle button
|
||||
- **THEN** a tooltip displays the current mode name (e.g., "Theme: System", "Theme: Light", "Theme: Dark")
|
||||
Loading…
Add table
Add a link
Reference in a new issue