Fix web UI light theme not forcing light mode (#456) by EyJunge1 · Pull Request #752 · jniebuhr/gaggimate

EyJunge1 · 2026-06-10T08:40:47Z

Summary

Fixes [Bug] Settings - "light" mode doesn't work #456: Web Settings "Light" now forces the light theme even when the OS is in dark mode
Adds a separate "System" option that follows OS light/dark preferences
Updates the pre-load theme script in index.html and adds explicit light-theme CSS overrides for analyzer/statistics colors

Test plan

With OS in dark mode, select Light in Web Settings → UI stays light
With OS in dark mode, select System → UI follows OS (dark)
Reload page after theme change → theme persists without flash
npm run lint:check and npm run build in web/ pass

Summary by CodeRabbit

New Features
- Added a "System" theme option in Settings that follows the device appearance.
Improvements
- Default theme selection changed to "System".
- Prevents flashing of an incorrect theme on page load.
- Improved light-theme color definitions for more consistent visuals.

cla-bot · 2026-06-10T08:40:49Z

We require contributors to sign our Contributor License Agreement, and we don't have yours on file. In order for us to review and merge your code, please contact @jniebuhr (mdwasp) on Discord to get yourself added.

cla-bot · 2026-06-10T08:44:06Z

We require contributors to sign our Contributor License Agreement, and we don't have yours on file. In order for us to review and merge your code, please contact @jniebuhr (mdwasp) on Discord to get yourself added.

coderabbitai · 2026-06-10T08:44:31Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e2a8471a-8b62-4ff9-9e82-5f6cbf0ac086

📥 Commits

Reviewing files that changed from the base of the PR and between 3ce4576 and 647c2d7.

📒 Files selected for processing (4)

web/index.html
web/src/pages/Settings/index.jsx
web/src/style.css
web/src/utils/themeManager.js

🚧 Files skipped from review as they are similar to previous changes (4)

web/src/pages/Settings/index.jsx
web/index.html
web/src/style.css
web/src/utils/themeManager.js

📝 Walkthrough

Walkthrough

The PR adds an explicit "system" theme option that follows OS preference by not setting data-theme, introduces Set-based theme validation and constants, updates applyTheme and the index.html bootstrap to avoid theme flash, changes Settings default to "system" with a new selector option, and adds CSS variables for a forced light theme.

Changes

System Theme Support

Layer / File(s)	Summary
Theme constants and storage validation `web/src/utils/themeManager.js`	Introduces `SYSTEM_THEME`, `EXPLICIT_THEME_LIST`, `EXPLICIT_THEMES`, and `AVAILABLE_THEMES` as Set-based collections. `getStoredTheme()` now validates and defaults to `system`; `setStoredTheme()` validates before persisting.
Theme application logic and DOM interaction `web/src/utils/themeManager.js`, `web/index.html`	`applyTheme()` now removes `document.documentElement.dataset.theme` for `system` and sets it for explicit themes. `getAvailableThemes()` prepends a `system` option. The inline bootstrap in `index.html` applies the stored theme synchronously with the same logic to prevent flashing.
Settings page theme default and selector `web/src/pages/Settings/index.jsx`	`currentTheme` initial state changed from `'light'` to `'system'`, and a new `<option value='system'>System</option>` was added to the theme dropdown.
Light theme CSS variables `web/src/style.css`	Adds `html[data-theme='light']` selector defining analyzer and statistics CSS custom properties, tooltip styling, and computed surface/border/shadow values for the forced light theme.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🐰 A system theme arrives, respecting what the OS knows,
No flashing defaults now—the theme gently flows,
Light variables defined, explicit choices bloom,
Users pick their preference, no darkness in the room! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: fixing the light theme to force light mode instead of following system preferences.
Linked Issues check	✅ Passed	All coding requirements from issue `#456` are met: Light theme forces light mode, System option added for OS preference, theme persists on reload, and explicit CSS overrides ensure light colors.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the light theme behavior and adding system theme support as required by issue `#456`; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

EyJunge1 · 2026-06-10T12:23:00Z

@cla-bot check

cla-bot · 2026-06-10T12:23:04Z

The cla-bot has been summoned, and re-checked this pull request!

Add a System theme option that follows OS preferences and make Light explicitly set data-theme='light'. Update the pre-load theme script and add light-theme CSS overrides so analyzer colors stay light even when the OS prefers dark. Co-authored-by: Cursor <cursoragent@cursor.com>

Use Set.has(), Array.includes(), and dataset API for theme checks and data-theme updates in the pre-load script and theme manager. Co-authored-by: Cursor <cursoragent@cursor.com>

sonarqubecloud · 2026-06-18T12:36:05Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

cla-bot Bot added the cla-signed label Jun 10, 2026

EyJunge1 and others added 2 commits June 10, 2026 14:24

Address SonarQube findings in theme handling

647c2d7

Use Set.has(), Array.includes(), and dataset API for theme checks and data-theme updates in the pre-load script and theme manager. Co-authored-by: Cursor <cursoragent@cursor.com>

EyJunge1 force-pushed the fix/456-light-theme branch from 3ce4576 to 647c2d7 Compare June 10, 2026 12:24

EyJunge1 added 2 commits June 13, 2026 13:08

Merge branch 'jniebuhr:master' into fix/456-light-theme

076ccfb

Merge branch 'jniebuhr:master' into fix/456-light-theme

e1d188f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix web UI light theme not forcing light mode (#456)#752

Fix web UI light theme not forcing light mode (#456)#752
EyJunge1 wants to merge 4 commits into
jniebuhr:masterfrom
EyJunge1:fix/456-light-theme

EyJunge1 commented Jun 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

cla-bot Bot commented Jun 10, 2026

Uh oh!

cla-bot Bot commented Jun 10, 2026

Uh oh!

coderabbitai Bot commented Jun 10, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

EyJunge1 commented Jun 10, 2026

Uh oh!

cla-bot Bot commented Jun 10, 2026

Uh oh!

sonarqubecloud Bot commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

EyJunge1 commented Jun 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

cla-bot Bot commented Jun 10, 2026

Uh oh!

cla-bot Bot commented Jun 10, 2026

Uh oh!

coderabbitai Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

EyJunge1 commented Jun 10, 2026

Uh oh!

cla-bot Bot commented Jun 10, 2026

Uh oh!

sonarqubecloud Bot commented Jun 18, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

EyJunge1 commented Jun 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 10, 2026 •

edited

Loading