Dark theme implementation

[Kosztyk]

Dark theme implementation

---

Summary by cubic

Adds a dark theme with an accessible header toggle. Defaults to the OS setting, and remembers the user’s choice without flashing on load.

• New Features
  • Added public/theme.js to manage theme (localStorage + matchMedia) and sync the header switch and label.
  • Added a header toggle (checkbox + label) with ARIA, keyboard support, and animated UI.
  • Applied an inline script in BaseHtml to set the stored theme early to prevent a flash.
  • Expanded theme.css with light/dark tokens, data-theme overrides, and OS fallback when no override is set.

^{Written for commit e56020d. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found across 4 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="public/theme.js">

<violation number="1" location="public/theme.js:33">
P2: Auto mode never sets `color-scheme`, so native controls can stay light while the page goes dark</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[DevStrategist]

Hi! Hope you don't mind me testing out your repo - my team and I are building ito.ai, an automated QA testing tool for individual PRs.

What I did:

1. Spun up the dev container
2. Generated a test plan for the theme toggle feature (20 test cases)
3. Ran the ito-bot test agent against the live app with video recording
4. All tests passed ✅

Overview

Status	No issues found - 20 flows tested
Test Summary	Theme toggle functionality testing for ConvertX application

Here is a Video of the bot testing Case THEME-11 :
https://github.com/user-attachments/assets/424c406a-f241-4551-bb3b-7aead8b0ca54

Highlights:

• Theme persists correctly across page navigation and browser refresh
• localStorage fallback works when storage is unavailable
• Invalid localStorage values handled gracefully (defaults to system preference)
• All pages (login, register, account, history, results, about, converters) theme correctly
• ARIA accessibility attributes update properly
• No flash of unstyled content (FOUC) on page load

---

Details

✅ Tests Passed (20 passed)

Test ID	Test Description	Status	Explanation	Video
THEME-1	Theme toggle visibility	Passed	Theme toggle visible in navbar with "Light"/"Dark" label	THEME-1.webm
THEME-2	Toggle dark to light mode	Passed	Theme successfully toggles between dark and light modes	THEME-2.webm
THEME-3	localStorage persistence	Passed	Theme preference persists in localStorage as 'convertx-theme'	THEME-3.webm
THEME-4	Theme persistence across navigation	Passed	Theme persists when navigating between pages	THEME-4.webm
THEME-5	Login page theme toggle	Passed	Theme toggle works on login page	THEME-5.webm
THEME-6	Register page theme toggle	Passed	Theme toggle works on registration page (manually verified)	THEME-6.webm
THEME-7	OS dark mode preference detection	Passed	App detects and applies OS dark mode preference	THEME-7.webm
THEME-8	OS light mode preference detection	Passed	App detects and applies OS light mode preference	THEME-8.webm
THEME-9	Manual override persists	Passed	Manual theme selection overrides OS preference	THEME-9.webm
THEME-10	History page table theming	Passed	Tables on history page render correctly in both themes	THEME-10.webm
THEME-11	Results page theming	Passed	Results table and action buttons theme correctly	THEME-11-PASSED.webm
THEME-12	Keyboard accessibility	Passed	Theme toggle accessible via Tab and Space keys	THEME-12.webm
THEME-13	ARIA accessibility attributes	Passed	aria-label and aria-checked attributes update correctly	THEME-13.webm
THEME-14	No flash of unstyled content	Passed	Dark mode applied immediately on load without FOUC	THEME-14.webm
THEME-15	localStorage unavailable fallback	Passed	Toggle works gracefully when localStorage throws errors	THEME-15.webm
THEME-16	Invalid localStorage value handling	Passed	App falls back to light mode with invalid localStorage value	THEME-16.webm
THEME-17	CSS custom properties update	Passed	Body background and color properties update with theme	THEME-17.webm
THEME-18	Form controls styling	Passed	Search box and form controls update styling with theme	THEME-18.webm
THEME-19	Label text synchronization	Passed	"Light"/"Dark" label syncs with current theme state	THEME-19.webm
THEME-20	Accent colors update	Passed	Green accent colors adjust lightness for theme contrast	THEME-20.webm

🔧 Test Environment

Application	ConvertX v0.16.1
URL	http://localhost:3000
Test Date	2026-01-15
Browser	Ito-Bot Chromium
Resolution	1920x1080

---

Conclusion

All 20 test cases passed successfully. The theme toggle feature in ConvertX works correctly across all tested pages and scenarios. The implementation handles edge cases gracefully (localStorage unavailable, invalid values) and meets accessibility standards (keyboard navigation, ARIA attributes).

---