gitops/optimclaw
1
0
Fork 0
mirror of https://github.com/outbackdingo/optimclaw.git synced 2026-08-25 14:53:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 <[email protected]>
Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* 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 <[email protected]>
Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

---------

Co-authored-by: Gao Zheng <[email protected]>
Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>
This commit is contained in:
Illia Polosukhin
2026-03-20 00:45:17 -07:00
committed by GitHub
co-authored by Gao Zheng Claude Opus 4.6
parent 1b97ef4feb
commit cba1bc3799
7 changed files with 404 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/channels/web/server.rs
+11
View File
@@ -344,6 +344,7 @@ pub async fn start_server(
.route("/", get(index_handler)) .route("/", get(index_handler))
.route("/style.css", get(css_handler)) .route("/style.css", get(css_handler))
.route("/app.js", get(js_handler)) .route("/app.js", get(js_handler))
.route("/theme-init.js", get(theme_init_handler))
.route("/favicon.ico", get(favicon_handler)) .route("/favicon.ico", get(favicon_handler))
.route("/i18n/index.js", get(i18n_index_handler)) .route("/i18n/index.js", get(i18n_index_handler))
.route("/i18n/en.js", get(i18n_en_handler)) .route("/i18n/en.js", get(i18n_en_handler))
@@ -465,6 +466,16 @@ async fn js_handler() -> impl IntoResponse {
) )
} }
async fn theme_init_handler() -> impl IntoResponse {
(
[
(header::CONTENT_TYPE, "application/javascript"),
(header::CACHE_CONTROL, "no-cache"),
],
include_str!("static/theme-init.js"),
)
}
async fn favicon_handler() -> impl IntoResponse { async fn favicon_handler() -> impl IntoResponse {
( (
[ [
src/channels/web/static/app.js
+64
View File
@@ -1,5 +1,69 @@
// IronClaw Web Gateway - Client // IronClaw Web Gateway - Client
// --- Theme Management (dark / light / system) ---
// Icon switching is handled by pure CSS via data-theme-mode on <html>.
function getSystemTheme() {
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
}
const VALID_THEME_MODES = { dark: true, light: true, system: true };
function getThemeMode() {
const stored = localStorage.getItem('ironclaw-theme');
return (stored && VALID_THEME_MODES[stored]) ? stored : 'system';
}
function resolveTheme(mode) {
return mode === 'system' ? getSystemTheme() : mode;
}
function applyTheme(mode) {
const resolved = resolveTheme(mode);
document.documentElement.setAttribute('data-theme', resolved);
document.documentElement.setAttribute('data-theme-mode', mode);
const titleKeys = { dark: 'theme.tooltipDark', light: 'theme.tooltipLight', system: 'theme.tooltipSystem' };
const btn = document.getElementById('theme-toggle');
if (btn) btn.title = (typeof I18n !== 'undefined' && titleKeys[mode]) ? I18n.t(titleKeys[mode]) : ('Theme: ' + mode);
const announce = document.getElementById('theme-announce');
if (announce) announce.textContent = (typeof I18n !== 'undefined') ? I18n.t('theme.announce', { mode: mode }) : ('Theme: ' + mode);
}
function toggleTheme() {
const cycle = { dark: 'light', light: 'system', system: 'dark' };
const current = getThemeMode();
const next = cycle[current] || 'dark';
localStorage.setItem('ironclaw-theme', next);
applyTheme(next);
}
// Apply theme immediately (FOUC prevention is done via inline script in <head>,
// but we call again here to ensure tooltip is set after DOM is ready).
applyTheme(getThemeMode());
// Delay enabling theme transition to avoid flash on initial load.
requestAnimationFrame(function() {
requestAnimationFrame(function() {
document.body.classList.add('theme-transition');
});
});
// Listen for OS theme changes — only re-apply when in 'system' mode.
const mql = window.matchMedia('(prefers-color-scheme: light)');
const onSchemeChange = function() {
if (getThemeMode() === 'system') {
applyTheme('system');
}
};
if (mql.addEventListener) {
mql.addEventListener('change', onSchemeChange);
} else if (mql.addListener) {
mql.addListener(onSchemeChange);
}
// Bind theme toggle button (CSP-compliant — no inline onclick).
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
let token = ''; let token = '';
let eventSource = null; let eventSource = null;
let logEventSource = null; let logEventSource = null;
src/channels/web/static/i18n/en.js
+6
View File
@@ -24,6 +24,12 @@ I18n.register('en', {
'restart.progressSubtitle': 'Please wait for the process to restart...', 'restart.progressSubtitle': 'Please wait for the process to restart...',
'restart.checkLogs': 'Check the Logs tab for details after restart completes.', 'restart.checkLogs': 'Check the Logs tab for details after restart completes.',
// Theme
'theme.tooltipDark': 'Theme: Dark (click for Light)',
'theme.tooltipLight': 'Theme: Light (click for System)',
'theme.tooltipSystem': 'Theme: System (click for Dark)',
'theme.announce': 'Theme: {mode}',
// Tabs // Tabs
'tab.chat': 'Chat', 'tab.chat': 'Chat',
'tab.memory': 'Memory', 'tab.memory': 'Memory',
src/channels/web/static/i18n/zh-CN.js
+6
View File
@@ -24,6 +24,12 @@ I18n.register('zh-CN', {
'restart.progressSubtitle': '请等待进程重启...', 'restart.progressSubtitle': '请等待进程重启...',
'restart.checkLogs': '重启完成后，请查看日志标签页了解详情。', 'restart.checkLogs': '重启完成后，请查看日志标签页了解详情。',
// 主题
'theme.tooltipDark': '主题：深色（点击切换浅色）',
'theme.tooltipLight': '主题：浅色（点击切换跟随系统）',
'theme.tooltipSystem': '主题：跟随系统（点击切换深色）',
'theme.announce': '主题：{mode}',
// 标签页 // 标签页
'tab.chat': '聊天', 'tab.chat': '聊天',
'tab.memory': '记忆', 'tab.memory': '记忆',
src/channels/web/static/index.html
+13
View File
@@ -25,6 +25,7 @@
integrity="sha384-pN9zSKOnTZwXRtYZAu0PBPEgR2B7DOC1aeLxQ33oJ0oy5iN1we6gm57xldM2irDG" integrity="sha384-pN9zSKOnTZwXRtYZAu0PBPEgR2B7DOC1aeLxQ33oJ0oy5iN1we6gm57xldM2irDG"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
<script src="/theme-init.js"></script>
</head> </head>
<body> <body>
<!-- Auth Screen --> <!-- Auth Screen -->
@@ -109,6 +110,18 @@
</div> </div>
<button class="status-logs-btn" data-tab="logs" data-i18n="tab.logs" title="Logs">Logs</button> <button class="status-logs-btn" data-tab="logs" data-i18n="tab.logs" title="Logs">Logs</button>
<button class="theme-toggle-btn" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
<svg class="theme-icon icon-dark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
<svg class="theme-icon icon-light" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<svg class="theme-icon icon-system" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
</svg>
</button>
<span id="theme-announce" class="sr-only" aria-live="polite"></span>
<div class="tee-shield" id="tee-shield" style="display:none" title="Running in a Trusted Execution Environment"> <div class="tee-shield" id="tee-shield" style="display:none" title="Running in a Trusted Execution Environment">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
src/channels/web/static/style.css
+292 -118
View File
@@ -18,10 +18,46 @@
--radius-lg: 12px; --radius-lg: 12px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
--font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', Consolas, monospace; --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
--text-muted: #71717a; --bg-overlay: rgba(0, 0, 0, 0.5);
--bg-hover: rgba(255, 255, 255, 0.03); --bg-modal: #1a1a1a;
--danger-soft: rgba(230, 76, 76, 0.15); --border-modal: #333;
--warning-soft: rgba(245, 166, 35, 0.15); --border-soft: #2a2a2a;
--text-tertiary: #e0e0e0;
--text-muted: #888;
--text-dimmed: #666;
--text-on-accent: #09090b;
--accent-brand: #00D894;
--accent-brand-hover: #00be82;
--warning-bg: #1e1400;
--warning-border: #3a2a00;
--warning-text: #facc15;
--tab-bg: rgba(9, 9, 11, 0.75);
--popover-bg: rgba(15, 15, 17, 0.9);
--badge-sandbox-bg: rgba(136, 132, 216, 0.15);
--badge-sandbox-text: #b4b0e8;
--hover-surface: rgba(255, 255, 255, 0.03);
--focus-ring: rgba(52, 211, 153, 0.1);
--accent-subtle: rgba(52, 211, 153, 0.15);
--accent-border-subtle: rgba(52, 211, 153, 0.3);
--danger-subtle: rgba(230, 76, 76, 0.15);
--danger-border-subtle: rgba(230, 76, 76, 0.3);
--warning-subtle: rgba(245, 166, 35, 0.15);
--border-hover: rgba(255, 255, 255, 0.15);
--user-msg-bg: rgba(52, 211, 153, 0.08);
--user-msg-border: rgba(52, 211, 153, 0.2);
--danger-error-bg: rgba(230, 76, 76, 0.1);
--accent-tee-bg: rgba(52, 211, 153, 0.1);
--accent-tee-border: rgba(52, 211, 153, 0.25);
--accent-tee-hover: rgba(52, 211, 153, 0.18);
--text-on-danger: #fff;
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
--shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--danger-error-border: rgba(230, 76, 76, 0.2);
--note-bg: rgba(255, 255, 255, 0.04);
--overlay-heavy: rgba(0, 0, 0, 0.6);
--highlight-bg: rgba(52, 211, 153, 0.3);
--hover-subtle: rgba(255, 255, 255, 0.06);
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-base: 0.2s ease; --transition-base: 0.2s ease;
} }
@@ -62,7 +98,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-card);
} }
.auth-brand { .auth-brand {
@@ -106,13 +142,13 @@ body {
#auth-screen input:focus { #auth-screen input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3); box-shadow: 0 0 0 3px var(--accent-border-subtle);
} }
#auth-screen button { #auth-screen button {
padding: 10px 16px; padding: 10px 16px;
background: var(--accent); background: var(--accent);
color: #09090b; color: var(--text-on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
@@ -156,7 +192,7 @@ body {
/* Tab Bar */ /* Tab Bar */
.tab-bar { .tab-bar {
display: flex; display: flex;
background: rgba(9, 9, 11, 0.75); background: var(--tab-bg);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
will-change: backdrop-filter; will-change: backdrop-filter;
@@ -212,7 +248,7 @@ body {
.tab-bar .status-logs-btn.active { .tab-bar .status-logs-btn.active {
color: var(--accent); color: var(--accent);
border-color: var(--accent); border-color: var(--accent);
background: rgba(52, 211, 153, 0.1); background: var(--accent-tee-bg);
} }
.tab-bar .status { .tab-bar .status {
@@ -245,8 +281,8 @@ body {
color: var(--success); color: var(--success);
padding: 4px 10px; padding: 4px 10px;
border-radius: 12px; border-radius: 12px;
background: rgba(52, 211, 153, 0.1); background: var(--accent-tee-bg);
border: 1px solid rgba(52, 211, 153, 0.25); border: 1px solid var(--accent-tee-border);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
margin-right: 8px; margin-right: 8px;
@@ -254,7 +290,7 @@ body {
} }
.tee-shield:hover { .tee-shield:hover {
background: rgba(52, 211, 153, 0.18); background: var(--accent-tee-hover);
} }
.tee-shield svg { .tee-shield svg {
@@ -275,20 +311,20 @@ body {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
border: 1px solid #00d894; border: 1px solid var(--accent-brand);
color: #00d894; color: var(--accent-brand);
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
transition: color 150ms, background-color 150ms, border-color 150ms; transition: color 150ms, background-color 150ms, border-color 150ms;
} }
.tab-bar .restart-btn:hover:not(:disabled) { .tab-bar .restart-btn:hover:not(:disabled) {
background-color: rgba(0, 216, 148, 0.1); background-color: var(--accent-tee-bg);
} }
.tab-bar .restart-btn:disabled { .tab-bar .restart-btn:disabled {
border-color: #333; border-color: var(--border-modal);
color: #666; color: var(--text-dimmed);
cursor: not-allowed; cursor: not-allowed;
} }
@@ -330,7 +366,7 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: var(--bg-overlay);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: -1; z-index: -1;
} }
@@ -338,10 +374,10 @@ body {
.restart-loader-content { .restart-loader-content {
position: relative; position: relative;
z-index: 10000; z-index: 10000;
background-color: var(--bg-secondary); background-color: var(--bg-modal);
border: 1px solid var(--border); border: 1px solid var(--border-modal);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-lg);
width: 100%; width: 100%;
max-width: 28rem; max-width: 28rem;
margin: 0 1rem; margin: 0 1rem;
@@ -358,7 +394,7 @@ body {
} }
.restart-title { .restart-title {
color: var(--text); color: var(--text-tertiary);
font-size: 0.85rem; font-size: 0.85rem;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-top: 0; margin-top: 0;
@@ -387,17 +423,17 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: var(--bg-overlay);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
.restart-modal-content { .restart-modal-content {
position: relative; position: relative;
z-index: 10000; z-index: 10000;
background-color: var(--bg-secondary); background-color: var(--bg-modal);
border: 1px solid var(--border); border: 1px solid var(--border-modal);
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-lg);
width: 100%; width: 100%;
max-width: 28rem; max-width: 28rem;
margin: 0 1rem; margin: 0 1rem;
@@ -409,17 +445,17 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border-soft);
} }
.restart-modal-header h2 { .restart-modal-header h2 {
color: var(--text); color: var(--text-tertiary);
font-size: 0.95rem; font-size: 0.95rem;
margin: 0; margin: 0;
} }
.restart-modal-close { .restart-modal-close {
color: #888; color: var(--text-muted);
padding: 0.25rem; padding: 0.25rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: transparent; background-color: transparent;
@@ -432,8 +468,8 @@ body {
} }
.restart-modal-close:hover { .restart-modal-close:hover {
color: var(--text-secondary); color: var(--text);
background-color: var(--bg-tertiary); background-color: var(--border-soft);
} }
.restart-modal-body { .restart-modal-body {
@@ -448,14 +484,14 @@ body {
.restart-modal-warning { .restart-modal-warning {
margin-top: 1rem; margin-top: 1rem;
background-color: var(--warning-soft); background-color: var(--warning-bg);
border: 1px solid rgba(245, 166, 35, 0.25); border: 1px solid var(--warning-border);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
.restart-modal-warning p { .restart-modal-warning p {
color: var(--warning); color: var(--warning-text);
font-size: 0.8rem; font-size: 0.8rem;
margin: 0; margin: 0;
} }
@@ -466,7 +502,7 @@ body {
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
border-top: 1px solid var(--border); border-top: 1px solid var(--border-soft);
} }
.restart-modal-btn { .restart-modal-btn {
@@ -479,28 +515,28 @@ body {
} }
.restart-modal-btn.cancel { .restart-modal-btn.cancel {
color: var(--text-secondary); color: var(--text);
background-color: transparent; background-color: transparent;
} }
.restart-modal-btn.cancel:hover { .restart-modal-btn.cancel:hover {
background-color: var(--bg-tertiary); background-color: var(--border-soft);
} }
.restart-modal-btn.confirm { .restart-modal-btn.confirm {
background-color: var(--accent); background-color: var(--accent-brand);
color: #09090b; color: var(--text-on-accent);
} }
.restart-modal-btn.confirm:hover { .restart-modal-btn.confirm:hover {
background-color: var(--accent-hover); background-color: var(--accent-brand-hover);
} }
/* Progress Bar for Restart */ /* Progress Bar for Restart */
.restart-progress-bar { .restart-progress-bar {
width: 100%; width: 100%;
height: 0.375rem; height: 0.375rem;
background-color: var(--bg-tertiary); background-color: var(--border-soft);
border-radius: 9999px; border-radius: 9999px;
overflow: hidden; overflow: hidden;
} }
@@ -508,7 +544,7 @@ body {
.restart-progress-fill { .restart-progress-fill {
height: 100%; height: 100%;
border-radius: 9999px; border-radius: 9999px;
background-color: var(--accent); background-color: var(--accent-brand);
width: 40%; width: 40%;
animation: indeterminate 1.5s ease-in-out infinite; animation: indeterminate 1.5s ease-in-out infinite;
} }
@@ -529,14 +565,14 @@ body {
} }
.restart-modal-info { .restart-modal-info {
color: var(--text-secondary); color: var(--text-dimmed);
font-size: 0.8rem; font-size: 0.8rem;
margin-top: 1.25rem; margin-top: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
} }
.restart-modal-info a { .restart-modal-info a {
color: var(--accent); color: var(--accent-brand);
text-decoration: none; text-decoration: none;
} }
@@ -550,7 +586,7 @@ body {
top: 100%; top: 100%;
right: 0; right: 0;
margin-top: 8px; margin-top: 8px;
background: rgba(15, 15, 17, 0.9); background: var(--popover-bg);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -887,11 +923,11 @@ body {
} }
.activity-tool-card[data-status="running"] { .activity-tool-card[data-status="running"] {
border-color: rgba(52, 211, 153, 0.3); border-color: var(--accent-border-subtle);
} }
.activity-tool-card[data-status="fail"] { .activity-tool-card[data-status="fail"] {
border-color: rgba(230, 76, 76, 0.3); border-color: var(--danger-border-subtle);
} }
.activity-tool-card[data-status="fail"] .activity-tool-name { .activity-tool-card[data-status="fail"] .activity-tool-name {
@@ -1132,21 +1168,21 @@ body {
.approval-card .approval-actions button.approve { .approval-card .approval-actions button.approve {
background: var(--success); background: var(--success);
border-color: var(--success); border-color: var(--success);
color: #09090b; color: var(--text-on-accent);
font-weight: 600; font-weight: 600;
} }
.approval-card .approval-actions button.always { .approval-card .approval-actions button.always {
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
color: #09090b; color: var(--text-on-accent);
font-weight: 600; font-weight: 600;
} }
.approval-card .approval-actions button.deny { .approval-card .approval-actions button.deny {
background: var(--danger); background: var(--danger);
border-color: var(--danger); border-color: var(--danger);
color: #fff; color: var(--text-on-danger);
} }
.approval-resolved { .approval-resolved {
@@ -1308,7 +1344,7 @@ body {
.auth-card .auth-token-input input:focus { .auth-card .auth-token-input input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.auth-card .auth-actions { .auth-card .auth-actions {
@@ -1335,7 +1371,7 @@ body {
.auth-card .auth-actions button.auth-submit { .auth-card .auth-actions button.auth-submit {
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
color: #09090b; color: var(--text-on-accent);
font-weight: 600; font-weight: 600;
} }
@@ -1347,7 +1383,7 @@ body {
.auth-card .auth-actions button.auth-oauth { .auth-card .auth-actions button.auth-oauth {
background: var(--success); background: var(--success);
border-color: var(--success); border-color: var(--success);
color: #09090b; color: var(--text-on-accent);
font-weight: 600; font-weight: 600;
} }
@@ -1413,7 +1449,7 @@ body {
.chat-input-wrapper textarea:focus { .chat-input-wrapper textarea:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.chat-input-wrapper textarea:disabled { .chat-input-wrapper textarea:disabled {
@@ -1451,7 +1487,7 @@ body {
.chat-input button { .chat-input button {
padding: 8px 20px; padding: 8px 20px;
background: var(--accent); background: var(--accent);
color: #09090b; color: var(--text-on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
@@ -1518,7 +1554,7 @@ body {
.memory-sidebar input:focus { .memory-sidebar input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.memory-tree { .memory-tree {
@@ -1712,7 +1748,7 @@ body {
} }
.summary-card:hover { .summary-card:hover {
border-color: rgba(255, 255, 255, 0.15); border-color: var(--border-hover);
} }
.summary-card .count { .summary-card .count {
@@ -1756,7 +1792,7 @@ body {
} }
.jobs-table tr:hover td { .jobs-table tr:hover td {
background: rgba(255, 255, 255, 0.03); background: var(--hover-surface);
} }
.badge { .badge {
@@ -1768,13 +1804,13 @@ body {
} }
.badge.pending { background: var(--bg-tertiary); color: var(--text-secondary); } .badge.pending { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge.in_progress { background: rgba(52, 211, 153, 0.15); color: var(--accent); } .badge.in_progress { background: var(--accent-subtle); color: var(--accent); }
.badge.completed { background: rgba(52, 211, 153, 0.15); color: var(--success); } .badge.completed { background: var(--accent-subtle); color: var(--success); }
.badge.failed { background: rgba(230, 76, 76, 0.15); color: var(--danger); } .badge.failed { background: var(--danger-subtle); color: var(--danger); }
.badge.stuck { background: rgba(245, 166, 35, 0.15); color: var(--warning); } .badge.stuck { background: var(--warning-subtle); color: var(--warning); }
.badge.cancelled { background: var(--bg-tertiary); color: var(--text-secondary); } .badge.cancelled { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge.interrupted { background: rgba(245, 166, 35, 0.15); color: var(--warning); } .badge.interrupted { background: var(--warning-subtle); color: var(--warning); }
.badge.source-sandbox { background: rgba(136, 132, 216, 0.15); color: #b4b0e8; } .badge.source-sandbox { background: var(--badge-sandbox-bg); color: var(--badge-sandbox-text); }
.badge.source-direct { background: var(--bg-tertiary); color: var(--text-secondary); } .badge.source-direct { background: var(--bg-tertiary); color: var(--text-secondary); }
.btn-cancel { .btn-cancel {
@@ -1788,7 +1824,7 @@ body {
} }
.btn-cancel:hover { .btn-cancel:hover {
background: rgba(230, 76, 76, 0.15); background: var(--danger-subtle);
} }
.btn-restart { .btn-restart {
@@ -1802,7 +1838,7 @@ body {
} }
.btn-restart:hover { .btn-restart:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
.btn-browse { .btn-browse {
@@ -1817,7 +1853,7 @@ body {
} }
.btn-browse:hover { .btn-browse:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
/* Job started card in chat */ /* Job started card in chat */
@@ -1835,7 +1871,7 @@ body {
} }
.job-card:hover { .job-card:hover {
border-color: rgba(255, 255, 255, 0.15); border-color: var(--border-hover);
} }
.job-card-icon { .job-card-icon {
@@ -1872,7 +1908,7 @@ body {
} }
.job-card-view:hover { .job-card-view:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
.job-card-browse { .job-card-browse {
@@ -1882,7 +1918,7 @@ body {
} }
.job-card-browse:hover { .job-card-browse:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
/* Clickable job rows */ /* Clickable job rows */
@@ -2145,7 +2181,7 @@ body {
} }
.action-error { .action-error {
background: rgba(230, 76, 76, 0.1); background: var(--danger-error-bg);
padding: 8px 12px; padding: 8px 12px;
border-radius: var(--radius); border-radius: var(--radius);
font-size: 12px; font-size: 12px;
@@ -2187,8 +2223,8 @@ body {
.conv-system .conv-body { color: var(--text-secondary); font-size: 13px; } .conv-system .conv-body { color: var(--text-secondary); font-size: 13px; }
.conv-user { .conv-user {
background: rgba(52, 211, 153, 0.08); background: var(--user-msg-bg);
border: 1px solid rgba(52, 211, 153, 0.2); border: 1px solid var(--user-msg-border);
} }
.conv-user .conv-role { color: var(--accent); } .conv-user .conv-role { color: var(--accent); }
@@ -2335,7 +2371,7 @@ body {
} }
.routines-table tr:hover td { .routines-table tr:hover td {
background: rgba(255, 255, 255, 0.03); background: var(--hover-surface);
} }
.routine-row { .routine-row {
@@ -2346,9 +2382,9 @@ body {
padding: 16px 0; padding: 16px 0;
} }
.badge.enabled { background: rgba(52, 211, 153, 0.15); color: var(--success); } .badge.enabled { background: var(--accent-subtle); color: var(--success); }
.badge.disabled { background: var(--bg-tertiary); color: var(--text-secondary); } .badge.disabled { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge.failing { background: rgba(230, 76, 76, 0.15); color: var(--danger); } .badge.failing { background: var(--danger-subtle); color: var(--danger); }
.btn-trigger { .btn-trigger {
padding: 4px 10px; padding: 4px 10px;
@@ -2361,7 +2397,7 @@ body {
} }
.btn-trigger:hover { .btn-trigger:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
.btn-toggle { .btn-toggle {
@@ -2375,7 +2411,7 @@ body {
} }
.btn-toggle:hover { .btn-toggle:hover {
background: rgba(245, 166, 35, 0.15); background: var(--warning-subtle);
} }
/* Logs Tab */ /* Logs Tab */
@@ -2419,7 +2455,7 @@ body {
.logs-toolbar input:focus { .logs-toolbar input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.logs-checkbox { .logs-checkbox {
@@ -2580,7 +2616,7 @@ body {
} }
.ext-card:hover { .ext-card:hover {
border-color: rgba(255, 255, 255, 0.15); border-color: var(--border-hover);
} }
.ext-header { .ext-header {
@@ -2605,17 +2641,17 @@ body {
} }
.ext-kind.kind-mcp_server { .ext-kind.kind-mcp_server {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
color: var(--accent); color: var(--accent);
} }
.ext-kind.kind-wasm_tool { .ext-kind.kind-wasm_tool {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
color: var(--success); color: var(--success);
} }
.ext-kind.kind-wasm_channel { .ext-kind.kind-wasm_channel {
background: rgba(245, 166, 35, 0.15); background: var(--warning-subtle);
color: var(--warning); color: var(--warning);
} }
@@ -2720,7 +2756,7 @@ body {
.stepper-step.failed .stepper-circle { .stepper-step.failed .stepper-circle {
background: var(--danger); background: var(--danger);
color: #fff; color: var(--text-on-danger);
} }
.stepper-step.failed .stepper-label { .stepper-step.failed .stepper-label {
@@ -2773,8 +2809,8 @@ body {
.ext-error { .ext-error {
font-size: 11px; font-size: 11px;
color: var(--danger); color: var(--danger);
background: rgba(230, 76, 76, 0.1); background: var(--danger-error-bg);
border: 1px solid rgba(230, 76, 76, 0.2); border: 1px solid var(--danger-error-border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 6px 8px; padding: 6px 8px;
margin-top: 6px; margin-top: 6px;
@@ -2783,7 +2819,7 @@ body {
.ext-note { .ext-note {
font-size: 11px; font-size: 11px;
color: var(--text-secondary); color: var(--text-secondary);
background: rgba(255, 255, 255, 0.04); background: var(--note-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 6px 8px; padding: 6px 8px;
@@ -2821,7 +2857,7 @@ body {
} }
.btn-ext.activate:hover { .btn-ext.activate:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
.btn-ext.remove { .btn-ext.remove {
@@ -2830,7 +2866,7 @@ body {
} }
.btn-ext.remove:hover { .btn-ext.remove:hover {
background: rgba(230, 76, 76, 0.15); background: var(--danger-subtle);
} }
.btn-ext.install { .btn-ext.install {
@@ -2839,7 +2875,7 @@ body {
} }
.btn-ext.install:hover { .btn-ext.install:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
.btn-ext.install:disabled { .btn-ext.install:disabled {
@@ -2863,7 +2899,7 @@ body {
} }
.btn-ext.configure:hover { .btn-ext.configure:hover {
background: rgba(136, 132, 216, 0.15); background: var(--badge-sandbox-bg);
} }
/* Pairing requests */ /* Pairing requests */
@@ -2911,7 +2947,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6); background: var(--overlay-heavy);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: 1000; z-index: 1000;
display: flex; display: flex;
@@ -3076,6 +3112,32 @@ body {
justify-content: flex-end; justify-content: flex-end;
} }
.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);
}
/* --- Activity tab (unified sandbox job events) --- */ /* --- Activity tab (unified sandbox job events) --- */
.activity-terminal { .activity-terminal {
@@ -3094,7 +3156,7 @@ body {
.activity-event { .activity-event {
padding: 4px 0; padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--note-bg);
} }
.activity-event-message .activity-role { .activity-event-message .activity-role {
@@ -3197,13 +3259,13 @@ body {
.activity-input-bar input:focus { .activity-input-bar input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.activity-input-bar button { .activity-input-bar button {
padding: 8px 16px; padding: 8px 16px;
background: var(--accent); background: var(--accent);
color: #09090b; color: var(--text-on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
@@ -3280,13 +3342,13 @@ body {
padding: 10px 16px; padding: 10px 16px;
border-radius: var(--radius); border-radius: var(--radius);
font-size: 13px; font-size: 13px;
color: #fff; color: var(--text-on-danger);
pointer-events: auto; pointer-events: auto;
transform: translateX(120%); transform: translateX(120%);
transition: transform 0.25s ease; transition: transform 0.25s ease;
max-width: 360px; max-width: 360px;
word-break: break-word; word-break: break-word;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-toast);
} }
.toast.visible { .toast.visible {
@@ -3308,7 +3370,7 @@ body {
/* --- Memory search highlighting --- */ /* --- Memory search highlighting --- */
mark { mark {
background: rgba(52, 211, 153, 0.3); background: var(--highlight-bg);
color: inherit; color: inherit;
border-radius: 2px; border-radius: 2px;
padding: 0 1px; padding: 0 1px;
@@ -3361,7 +3423,7 @@ mark {
} }
.thread-new-btn:hover { .thread-new-btn:hover {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
} }
.assistant-item { .assistant-item {
@@ -3379,11 +3441,11 @@ mark {
} }
.assistant-item:hover { .assistant-item:hover {
background: rgba(255, 255, 255, 0.06); background: var(--hover-subtle);
} }
.assistant-item.active { .assistant-item.active {
background: rgba(52, 211, 153, 0.1); background: var(--accent-tee-bg);
color: var(--accent); color: var(--accent);
border-left: 2px solid var(--accent); border-left: 2px solid var(--accent);
} }
@@ -3471,14 +3533,14 @@ mark {
letter-spacing: 0.5px; letter-spacing: 0.5px;
padding: 1px 5px; padding: 1px 5px;
border-radius: 3px; border-radius: 3px;
background: rgba(255, 255, 255, 0.08); background: var(--border);
color: var(--text-secondary); color: var(--text-secondary);
margin-right: 6px; margin-right: 6px;
flex-shrink: 0; flex-shrink: 0;
} }
.thread-badge-routine { background: rgba(52, 211, 153, 0.15); color: var(--accent); } .thread-badge-routine { background: var(--accent-subtle); color: var(--accent); }
.thread-badge-heartbeat { background: rgba(245, 166, 35, 0.15); color: var(--warning); } .thread-badge-heartbeat { background: var(--warning-subtle); color: var(--warning); }
.thread-badge-telegram { background: rgba(0, 136, 204, 0.15); color: #0088cc; } .thread-badge-telegram { background: rgba(0, 136, 204, 0.15); color: #0088cc; }
.thread-badge-signal { background: rgba(59, 118, 240, 0.15); color: #3b76f0; } .thread-badge-signal { background: rgba(59, 118, 240, 0.15); color: #3b76f0; }
.thread-badge-slack { background: rgba(74, 21, 75, 0.15); color: #e01e5a; } .thread-badge-slack { background: rgba(74, 21, 75, 0.15); color: #e01e5a; }
@@ -3546,7 +3608,7 @@ mark {
.memory-editor textarea:focus { .memory-editor textarea:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.memory-editor-actions { .memory-editor-actions {
@@ -3557,7 +3619,7 @@ mark {
.btn-save { .btn-save {
padding: 6px 16px; padding: 6px 16px;
background: var(--accent); background: var(--accent);
color: #09090b; color: var(--text-on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
@@ -3638,7 +3700,7 @@ mark {
top: 100%; top: 100%;
right: 0; right: 0;
margin-top: 8px; margin-top: 8px;
background: rgba(15, 15, 17, 0.9); background: var(--popover-bg);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -3736,13 +3798,13 @@ mark {
.ext-install-form input:focus { .ext-install-form input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.ext-install-form button { .ext-install-form button {
padding: 6px 16px; padding: 6px 16px;
background: var(--accent); background: var(--accent);
color: #09090b; color: var(--text-on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
@@ -3786,13 +3848,13 @@ mark {
.skill-search-box input:focus { .skill-search-box input:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.skill-search-box button { .skill-search-box button {
padding: 8px 20px; padding: 8px 20px;
background: var(--accent); background: var(--accent);
color: #09090b; color: var(--text-on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
@@ -3816,7 +3878,7 @@ mark {
} }
.skill-trust.trust-trusted { .skill-trust.trust-trusted {
background: rgba(52, 211, 153, 0.15); background: var(--accent-subtle);
color: var(--success); color: var(--success);
} }
@@ -3861,7 +3923,7 @@ mark {
.activity-toolbar select:focus { .activity-toolbar select:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
/* --- Mobile responsive --- */ /* --- Mobile responsive --- */
@@ -4103,7 +4165,7 @@ mark {
} }
.settings-row:hover { .settings-row:hover {
background: var(--bg-hover); background: var(--hover-surface);
} }
.settings-row.hidden { .settings-row.hidden {
@@ -4170,8 +4232,8 @@ mark {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 10px 14px; padding: 10px 14px;
background: var(--warning-soft); background: var(--warning-subtle);
border: 1px solid rgba(245, 166, 35, 0.25); border: 1px solid var(--warning-border);
border-radius: var(--radius); border-radius: var(--radius);
color: var(--text); color: var(--text);
font-size: 12px; font-size: 12px;
@@ -4331,7 +4393,7 @@ input[type="checkbox"]:focus-visible {
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: var(--danger); background: var(--danger);
color: #fff; color: var(--text-on-danger);
border: none; border: none;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
@@ -4341,7 +4403,7 @@ input[type="checkbox"]:focus-visible {
} }
.image-preview-remove:hover { .image-preview-remove:hover {
background: #c33; filter: brightness(1.2);
} }
/* Generated Image */ /* Generated Image */
@@ -4627,3 +4689,115 @@ input[type="checkbox"]:focus-visible {
color: var(--text-muted); color: var(--text-muted);
font-size: 13px; font-size: 13px;
} }
/* Screen-reader only utility */
.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;
}
/* ============================================================
Light Theme
============================================================ */
[data-theme="light"] {
--bg: #ffffff;
--bg-secondary: #f5f5f7;
--bg-tertiary: #ebebed;
--border: rgba(0, 0, 0, 0.1);
--text: #1a1a2e;
--text-secondary: #555555;
--accent: #059669;
--accent-hover: #047857;
--success: #059669;
--warning: #d97706;
--danger: #dc2626;
--code-bg: #f0f0f2;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--bg-overlay: rgba(0, 0, 0, 0.3);
--bg-modal: #ffffff;
--border-modal: #e0e0e0;
--border-soft: #e5e5e5;
--text-tertiary: #333333;
--text-muted: #777777;
--text-dimmed: #999999;
--text-on-accent: #ffffff;
--accent-brand: #059669;
--accent-brand-hover: #047857;
--warning-bg: #fffbeb;
--warning-border: #fde68a;
--warning-text: #92400e;
--tab-bg: rgba(255, 255, 255, 0.9);
--popover-bg: rgba(255, 255, 255, 0.95);
--badge-sandbox-bg: rgba(136, 132, 216, 0.1);
--badge-sandbox-text: #6b67b0;
--hover-surface: rgba(0, 0, 0, 0.03);
--focus-ring: rgba(5, 150, 105, 0.15);
--accent-subtle: rgba(5, 150, 105, 0.1);
--accent-border-subtle: rgba(5, 150, 105, 0.3);
--danger-subtle: rgba(220, 38, 38, 0.1);
--danger-border-subtle: rgba(220, 38, 38, 0.2);
--warning-subtle: rgba(217, 119, 6, 0.1);
--border-hover: rgba(0, 0, 0, 0.15);
--user-msg-bg: rgba(5, 150, 105, 0.08);
--user-msg-border: rgba(5, 150, 105, 0.2);
--danger-error-bg: rgba(220, 38, 38, 0.06);
--accent-tee-bg: rgba(5, 150, 105, 0.08);
--accent-tee-border: rgba(5, 150, 105, 0.2);
--accent-tee-hover: rgba(5, 150, 105, 0.15);
--text-on-danger: #fff;
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
--shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
--danger-error-border: rgba(220, 38, 38, 0.15);
--note-bg: rgba(0, 0, 0, 0.02);
--overlay-heavy: rgba(0, 0, 0, 0.4);
--highlight-bg: rgba(5, 150, 105, 0.2);
--hover-subtle: rgba(0, 0, 0, 0.04);
}
/* ============================================================
Theme transition (delayed via JS to avoid FOUC)
============================================================ */
body.theme-transition,
body.theme-transition *:not(svg):not(path):not(line):not(circle):not(rect) {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* ============================================================
Theme toggle button
============================================================ */
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-secondary);
cursor: pointer;
align-self: center;
margin-right: 8px;
transition: color 0.2s, border-color 0.2s;
}
.theme-toggle-btn:hover {
color: var(--text);
border-color: var(--text-secondary);
}
/* CSS-only icon switching via data-theme-mode on <html> */
.theme-icon { display: none; }
[data-theme-mode="dark"] .icon-dark { display: block; }
[data-theme-mode="light"] .icon-light { display: block; }
[data-theme-mode="system"] .icon-system { display: block; }
src/channels/web/static/theme-init.js
+12
View File
@@ -0,0 +1,12 @@
// Prevent FOUC: apply saved theme before first paint.
// This script must be loaded synchronously in <head> (no defer/async).
(function() {
const stored = localStorage.getItem('ironclaw-theme');
const mode = (stored === 'dark' || stored === 'light' || stored === 'system') ? stored : '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);
})();