archive: add-dark-light-mode change complete

2026-02-13 09:37:18 +01:00 · 2026-02-13 09:37:18 +01:00 · 88e7347918
commit 88e7347918
parent a8f9327d19
7 changed files with 0 additions and 0 deletions
--- a/openspec/changes/archive/2026-02-13-add-dark-light-mode/specs/hacker-theme/spec.md
+++ b/openspec/changes/archive/2026-02-13-add-dark-light-mode/specs/hacker-theme/spec.md
@ -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