E535 Dark theme implementation by Kosztyk · Pull Request #505 · C4illin/ConvertX · GitHub
[go: up one dir, main page]
Skip to content

Dark theme implementation #505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Kosztyk wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Dark theme implementation #505

Kosztyk wants to merge 4 commits into from

Conversation

@Kosztyk
Copy link
@Kosztyk Kosztyk commented Jan 12, 2026 •
edited by cubic-dev-ai bot
Loading

Dark theme implementation

Screenshot 2026-01-12 at 21 14 26

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[bot]
cubic-dev-ai bot reviewed Jan 12, 2026
View reviewed changes
Copy link
@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
DevStrategist commented Jan 16, 2026

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cubic-dev-ai cubic-dev-ai[bot] cubic-dev-ai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Kosztyk @DevStrategist
0