feat(web): add light theme with dark/light/system toggle by ilblackdragon · Pull Request #1457 · nearai/ironclaw

ilblackdragon · 2026-03-20T06:56:48Z

Summary

Continuation of #853 by @CPU-216.

Adds a three-state theme toggle (dark / light / system) to the Web Gateway UI. Extracts ~100 hardcoded CSS color values into 30+ CSS custom properties, adds a complete [data-theme="light"] override block, and implements FOUC prevention via a synchronous init script. Pure CSS + vanilla JS, no new dependencies.

Changes from original

Merged with latest staging (resolved 18 CSS conflicts from parallel variable extraction in feat(gateway): unified settings page with subtabs #1191 and feat: chat onboarding and routine advisor #927)
Fixed dark-mode readability bug: .stepper-step.failed .stepper-circle and .image-preview-remove used --text-on-accent (near-black) on var(--danger) (red) background — changed to --text-on-danger (#fff)
Restored hover visual feedback on .image-preview-remove:hover using filter: brightness(1.2)
Changed var to const/let in theme-init.js for consistency with app.js

Original PR

#853 - feat(web): add light theme with dark/light/system toggle

Review comments addressed

Deny button text color bug (zmanian): Already fixed by author in original PR via --text-on-danger variable. Extended the fix to two additional elements (stepper circle, image remove button) that had the same class of bug.
Incomplete variable extraction (zmanian): Already fixed by author. Merged cleanly with staging's own variable extraction work.
!important on * transition selector (gemini-code-assist, zmanian): Already removed by author.
Accessibility aria-live (zmanian): Already added by author (#theme-announce span).
var to const/let (gemini-code-assist): Already fixed in app.js by author. Extended to theme-init.js.

Test plan

All existing tests pass (55 pre-existing config test failures unrelated to this PR)
cargo fmt clean
cargo clippy --all --all-features clean
No Rust code changes beyond route registration

Co-Authored-By: CPU-216 3125034290@stu.cpu.edu.cn

Generated with Claude Code

Add three-state theme toggle (dark → light → system) to the Web Gateway: - Extract 101 hardcoded CSS colors into 30+ CSS custom properties - Add [data-theme='light'] overrides for all variables - Add theme toggle button in tab-bar (moon/sun/monitor icons) - Theme persists via localStorage, defaults to 'system' - System mode follows OS prefers-color-scheme in real-time - FOUC prevention via inline script in <head> - Delayed CSS transition to avoid flash on initial load - Pure CSS icon switching via data-theme-mode attribute Closes #761

# Conflicts: # src/channels/web/static/style.css

- Fix dark-mode readability bug: .stepper-step.failed and .image-preview-remove used --text-on-accent (#09090b) on var(--danger) background, making text unreadable. Changed to --text-on-danger (#fff). - Restore hover visual feedback on .image-preview-remove:hover using filter: brightness(1.2) instead of redundant var(--danger). - Use const/let instead of var in theme-init.js for consistency with app.js (per gemini-code-assist review feedback). Co-Authored-By: CPU-216 <3125034290@stu.cpu.edu.cn> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

gemini-code-assist · 2026-03-20T06:56:52Z

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

Copilot

Pull request overview

Adds a three-state (dark/light/system) theme system to the Web Gateway UI, including light theme variable overrides and a pre-paint initialization script to prevent theme flash on load.

Changes:

Introduces a synchronous theme-init.js loaded in <head> to apply the saved/system theme before first paint.
Refactors many hardcoded colors into CSS custom properties and adds a [data-theme="light"] override block.
Adds a theme toggle button to the tab bar and client-side theme management logic in app.js, plus a new static route for theme-init.js.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/channels/web/static/theme-init.js	Pre-paint theme initialization based on persisted mode / system preference
src/channels/web/static/style.css	CSS variable extraction, light theme overrides, toggle button + transition styling
src/channels/web/static/index.html	Loads `theme-init.js` synchronously; adds toggle button + `aria-live` announcer
src/channels/web/static/app.js	Implements theme mode cycling/persistence and system-theme change handling
src/channels/web/server.rs	Serves `theme-init.js` via an embedded static handler

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-20T07:00:52Z

src/channels/web/static/app.js

+// Listen for OS theme changes — only re-apply when in 'system' mode.
+window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', function() {
+  if (getThemeMode() === 'system') {
+    applyTheme('system');
+  }
+});


matchMedia(...).addEventListener('change', ...) can throw on browsers that still expose MediaQueryList.addListener/removeListener but not addEventListener (notably older Safari/WebKit). Since an exception here would break all subsequent JS initialization, add a compatibility fallback (feature-detect addEventListener vs addListener) and ideally reuse a single MediaQueryList instance.

Copilot · 2026-03-20T07:00:52Z

src/channels/web/static/app.js

+function getThemeMode() {
+  return localStorage.getItem('ironclaw-theme') || 'system';
+}
+
+function resolveTheme(mode) {
+  return mode === 'system' ? getSystemTheme() : mode;
+}


Theme mode read from localStorage is used without validation. If the stored value is anything other than dark/light/system, this will set data-theme/data-theme-mode to unexpected values and the UI can end up in a broken/unspecified theme state. Consider normalizing/whitelisting the mode and falling back to system (or dark) when the stored value is invalid.

Copilot · 2026-03-20T07:00:52Z

src/channels/web/static/app.js

+  const titles = { dark: 'Theme: Dark (click for Light)', light: 'Theme: Light (click for System)', system: 'Theme: System (click for Dark)' };
+  const btn = document.getElementById('theme-toggle');
+  if (btn) btn.title = titles[mode] || '';
+  const announce = document.getElementById('theme-announce');
+  if (announce) announce.textContent = 'Theme: ' + mode;


New user-visible strings for the theme button (tooltip titles and aria-live announcement) are hardcoded in English. Since the rest of this file consistently uses I18n.t(...) for UI copy, consider moving these strings into the i18n tables so non-English users get localized tooltips/announcements.

Suggested change

const titles = { dark: 'Theme: Dark (click for Light)', light: 'Theme: Light (click for System)', system: 'Theme: System (click for Dark)' };

const btn = document.getElementById('theme-toggle');

if (btn) btn.title = titles[mode] || '';

const announce = document.getElementById('theme-announce');

if (announce) announce.textContent = 'Theme: ' + mode;

const titles = {

dark: I18n.t('theme.button.tooltip.dark'),

light: I18n.t('theme.button.tooltip.light'),

system: I18n.t('theme.button.tooltip.system')

};

const btn = document.getElementById('theme-toggle');

if (btn) btn.title = titles[mode] || '';

const announceTexts = {

dark: I18n.t('theme.announcement.dark'),

light: I18n.t('theme.announcement.light'),

system: I18n.t('theme.announcement.system')

};

const announce = document.getElementById('theme-announce');

if (announce) announce.textContent = announceTexts[mode] || '';

Copilot · 2026-03-20T07:00:52Z

src/channels/web/static/theme-init.js

+  const mode = localStorage.getItem('ironclaw-theme') || 'system';
+  let resolved = mode;
+  if (mode === 'system') {
+    resolved = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  }
+  document.documentElement.setAttribute('data-theme', resolved);
+  document.documentElement.setAttribute('data-theme-mode', mode);


theme-init.js uses the persisted theme mode value directly as both data-theme and data-theme-mode. If localStorage contains an unexpected value, the page can render without matching theme variables (and with no icon shown). Consider whitelisting dark/light/system and falling back to system (or dark) when the stored value is invalid.

Copilot · 2026-03-20T07:00:53Z

src/channels/web/static/style.css

+.tools-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tools-table th,
+.tools-table td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.tools-table th {
+  color: var(--text-secondary);
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.5px;
+}
+
+.tools-table tr:hover td {
+  background: var(--hover-surface);
+}
+
+


A new .tools-table styling block is added, but there are no references to tools-table in the HTML/JS in this PR (and a repo-wide search under static/ only finds it in this CSS). If this table isn’t actually rendered anymore, consider removing these rules to avoid accumulating dead CSS; otherwise, add/point to the corresponding markup so the styles are exercised.

Suggested change

.tools-table {

width: 100%;

border-collapse: collapse;

}

.tools-table th,

.tools-table td {

padding: 8px 12px;

text-align: left;

border-bottom: 1px solid var(--border);

font-size: 13px;

}

.tools-table th {

color: var(--text-secondary);

font-weight: 500;

text-transform: uppercase;

font-size: 11px;

letter-spacing: 0.5px;

}

.tools-table tr:hover td {

background: var(--hover-surface);

}

Copilot · 2026-03-20T07:00:53Z

src/channels/web/static/index.html

+  <style>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}</style>
+  <script src="/theme-init.js"></script>


The new .sr-only utility is injected as a minified inline <style> in the document head. Since it’s a general-purpose utility class (and the app already has a main stylesheet), consider moving it into style.css for maintainability and to keep all styling in one place.

…ight-theme-toggle

- Fix missing `fallback_deliverable` field in job_monitor test constructors (pre-existing staging issue surfaced by merge) - Validate localStorage theme value against whitelist in both theme-init.js and app.js to prevent broken state from invalid values - Add matchMedia addEventListener fallback for older Safari/WebKit - Add i18n keys for theme tooltip and aria-live announcement strings (en + zh-CN) to match existing localization patterns - Move .sr-only utility from inline <style> to style.css [skip-regression-check] Co-Authored-By: CPU-216 <3125034290@stu.cpu.edu.cn> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(web): add light theme with dark/light/system toggle (#761) Add three-state theme toggle (dark → light → system) to the Web Gateway: - Extract 101 hardcoded CSS colors into 30+ CSS custom properties - Add [data-theme='light'] overrides for all variables - Add theme toggle button in tab-bar (moon/sun/monitor icons) - Theme persists via localStorage, defaults to 'system' - System mode follows OS prefers-color-scheme in real-time - FOUC prevention via inline script in <head> - Delayed CSS transition to avoid flash on initial load - Pure CSS icon switching via data-theme-mode attribute Closes #761 * fix: address review feedback and code improvements (takeover #853) - Fix dark-mode readability bug: .stepper-step.failed and .image-preview-remove used --text-on-accent (#09090b) on var(--danger) background, making text unreadable. Changed to --text-on-danger (#fff). - Restore hover visual feedback on .image-preview-remove:hover using filter: brightness(1.2) instead of redundant var(--danger). - Use const/let instead of var in theme-init.js for consistency with app.js (per gemini-code-assist review feedback). Co-Authored-By: CPU-216 <3125034290@stu.cpu.edu.cn> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: address CI failures and Copilot review feedback (takeover #853) - Fix missing `fallback_deliverable` field in job_monitor test constructors (pre-existing staging issue surfaced by merge) - Validate localStorage theme value against whitelist in both theme-init.js and app.js to prevent broken state from invalid values - Add matchMedia addEventListener fallback for older Safari/WebKit - Add i18n keys for theme tooltip and aria-live announcement strings (en + zh-CN) to match existing localization patterns - Move .sr-only utility from inline <style> to style.css [skip-regression-check] Co-Authored-By: CPU-216 <3125034290@stu.cpu.edu.cn> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Gao Zheng <3125034290@stu.cpu.edu.cn> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CPU-216 and others added 4 commits March 16, 2026 14:03

Merge branch 'staging' into feat/web-gateway-light-theme

f6d2181

Merge branch 'pr-853-incoming' into takeover/853-web-light-theme-toggle

3c670c2

# Conflicts: # src/channels/web/static/style.css

Copilot AI review requested due to automatic review settings March 20, 2026 06:56

github-actions bot added scope: channel/web Web gateway channel size: L 200-499 changed lines risk: medium Business logic, config, or moderate-risk modules contributor: core 20+ merged PRs labels Mar 20, 2026

Copilot started reviewing on behalf of ilblackdragon March 20, 2026 06:57 View session

ilblackdragon mentioned this pull request Mar 20, 2026

feat(web): add light theme with dark/light/system toggle #853

Closed

7 tasks

Copilot AI reviewed Mar 20, 2026

View reviewed changes

Merge remote-tracking branch 'origin/staging' into takeover/853-web-l…

6d46c9d

…ight-theme-toggle

ilblackdragon added the skip-regression-check Bypass regression test CI gate (tests exist but not in tests/ dir) label Mar 20, 2026

github-actions bot added scope: agent Agent core (agent loop, router, scheduler) size: XL 500+ changed lines and removed size: L 200-499 changed lines labels Mar 20, 2026

ilblackdragon merged commit cba1bc3 into staging Mar 20, 2026
14 checks passed

ilblackdragon deleted the takeover/853-web-light-theme-toggle branch March 20, 2026 07:45

This was referenced Mar 23, 2026

chore: promote staging to staging-promote/455f543b-23329172268 (2026-03-20 05:23 UTC) #1452

Merged

chore: promote staging to staging-promote/89203225-23327092672 (2026-03-20 04:32 UTC) #1451

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): add light theme with dark/light/system toggle#1457

feat(web): add light theme with dark/light/system toggle#1457
ilblackdragon merged 6 commits intostagingfrom
takeover/853-web-light-theme-toggle

ilblackdragon commented Mar 20, 2026

Uh oh!

gemini-code-assist bot commented Mar 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		<style>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}</style>
		<script src="/theme-init.js"></script>

Conversation

ilblackdragon commented Mar 20, 2026

Summary

Changes from original

Original PR

Review comments addressed

Test plan

Uh oh!

gemini-code-assist bot commented Mar 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants