Fix dark/light theme toggle — incomplete CSS overrides for key elements #17

New Issue

NW · 2026-05-19T21:43:14Z

NW commented

2026-05-19 21:43:14 +00:00

Bug Description

The dark/light theme toggle is incomplete. Switching to light theme leaves several elements (footer, dark sections, glass cards) with dark backgrounds and/or invisible text because [data-theme="light"] CSS overrides are missing.

Root Cause Analysis

[data-theme="light"] overrides are incomplete in style.css
.footer — no light theme background/text color defined (dark bg + dark text = invisible)
.bg-dark-section — no light theme override (stays dark in light mode)
.glass-card — no light theme override (glass effect designed for dark background)
Theme toggle button may not appear in navbar on all pages
Some sections may have hardcoded dark colors instead of CSS variables

Acceptance Criteria

All elements respond correctly to [data-theme="light"]
.footer has proper light background and text colors
.bg-dark-section has light theme override (light background, dark text)
.glass-card has light theme variant (light bg, dark text, subtle shadow)
Theme toggle button visible in navbar on all 6 pages
All text is readable in both themes (contrast ratio ≥ 4.5:1)
No lingering dark-background elements in light mode
Theme preference persists on navigation between pages

Files Likely Affected

css/style.css — [data-theme="light"] overrides
js/theme.js or js/main.js — theme toggle logic, localStorage persistence
index.html + 5 other pages — theme toggle button presence in navbar

How to Verify

Load landing page in dark theme (default)
Toggle to light theme
Verify ALL sections have light backgrounds and dark text
Verify footer is readable in light theme
Check navbar toggle button is visible
Navigate to another page — theme preference persists
Toggle back to dark — everything returns to dark theme

## Bug Description The dark/light theme toggle is incomplete. Switching to light theme leaves several elements (footer, dark sections, glass cards) with dark backgrounds and/or invisible text because `[data-theme="light"]` CSS overrides are missing. ## Root Cause Analysis - `[data-theme="light"]` overrides are incomplete in `style.css` - `.footer` — no light theme background/text color defined (dark bg + dark text = invisible) - `.bg-dark-section` — no light theme override (stays dark in light mode) - `.glass-card` — no light theme override (glass effect designed for dark background) - Theme toggle button may not appear in navbar on all pages - Some sections may have hardcoded dark colors instead of CSS variables ## Acceptance Criteria - [ ] All elements respond correctly to `[data-theme="light"]` - [ ] `.footer` has proper light background and text colors - [ ] `.bg-dark-section` has light theme override (light background, dark text) - [ ] `.glass-card` has light theme variant (light bg, dark text, subtle shadow) - [ ] Theme toggle button visible in navbar on all 6 pages - [ ] All text is readable in both themes (contrast ratio ≥ 4.5:1) - [ ] No lingering dark-background elements in light mode - [ ] Theme preference persists on navigation between pages ## Files Likely Affected - `css/style.css` — `[data-theme="light"]` overrides - `js/theme.js` or `js/main.js` — theme toggle logic, localStorage persistence - `index.html` + 5 other pages — theme toggle button presence in navbar ## How to Verify 1. Load landing page in dark theme (default) 2. Toggle to light theme 3. Verify ALL sections have light backgrounds and dark text 4. Verify footer is readable in light theme 5. Check navbar toggle button is visible 6. Navigate to another page — theme preference persists 7. Toggle back to dark — everything returns to dark theme

NW added this to the Landing Bug Fixes 2025-05 milestone 2026-05-19 21:43:14 +00:00

NW added the status::new priority::high type::bug workflow::landing labels 2026-05-19 21:43:14 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: UniqueSoft/Phantom#17