mirror of
https://github.com/Sea-Haven-Industries/open-swe.git
synced 2026-10-07 16:19:09 +00:00
30d5d55f0f
* feat: add dark mode support to web UI Add a persisted, system-aware theme with a Light/Dark/System toggle in the sidebar user menu. An inline head script applies the stored theme before paint to avoid a flash, and the agents-ui surface gets dark overrides for its --ui-* variables. Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com> * fix: use static theme init script to satisfy CodeQL Build the no-FOUC theme script from a fully static string literal instead of interpolating THEME_STORAGE_KEY, so no value flows into code construction (CodeQL "Improper code sanitization"). Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com> * fix: avoid theme flip on hydration for persisted preferences Only apply a theme after the stored preference is read, instead of eagerly applying the default "system" theme on first effect. This prevented a brief flip to the OS theme (then back) on load for users with a saved preference that differs from their OS setting. Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com> --------- Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
70 lines
2 KiB
CSS
70 lines
2 KiB
CSS
.agents-ui {
|
|
--ui-bg: oklch(0.99 0.002 197.1);
|
|
--ui-surface: oklch(1 0 0);
|
|
--ui-panel: oklch(0.985 0.002 197.1);
|
|
--ui-panel-2: oklch(0.967 0.001 286.375);
|
|
--ui-border: oklch(0.925 0.005 214.3);
|
|
--ui-border-subtle: oklch(0.945 0.004 214.3);
|
|
--ui-text: oklch(0.148 0.004 228.8);
|
|
--ui-text-muted: oklch(0.45 0.017 213.2);
|
|
--ui-text-dim: oklch(0.56 0.021 213.5);
|
|
--ui-accent: oklch(0.52 0.105 223.128);
|
|
--ui-accent-bubble: oklch(0.955 0.015 223);
|
|
--ui-sidebar: oklch(0.987 0.002 197.1);
|
|
--ui-sidebar-hover: oklch(0.963 0.002 197.1);
|
|
--ui-success: oklch(0.62 0.17 145);
|
|
--ui-danger: oklch(0.577 0.245 27.325);
|
|
}
|
|
|
|
.dark .agents-ui,
|
|
.dark.agents-ui {
|
|
--ui-bg: oklch(0.148 0.004 228.8);
|
|
--ui-surface: oklch(0.218 0.008 223.9);
|
|
--ui-panel: oklch(0.218 0.008 223.9);
|
|
--ui-panel-2: oklch(0.274 0.006 286.033);
|
|
--ui-border: oklch(1 0 0 / 10%);
|
|
--ui-border-subtle: oklch(1 0 0 / 6%);
|
|
--ui-text: oklch(0.987 0.002 197.1);
|
|
--ui-text-muted: oklch(0.723 0.014 214.4);
|
|
--ui-text-dim: oklch(0.56 0.021 213.5);
|
|
--ui-accent: oklch(0.715 0.143 215.221);
|
|
--ui-accent-bubble: oklch(0.274 0.04 223);
|
|
--ui-sidebar: oklch(0.218 0.008 223.9);
|
|
--ui-sidebar-hover: oklch(0.275 0.011 216.9);
|
|
--ui-success: oklch(0.62 0.17 145);
|
|
--ui-danger: oklch(0.704 0.191 22.216);
|
|
}
|
|
|
|
.agents-ui {
|
|
color: var(--ui-text);
|
|
background: var(--ui-bg);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.agents-ui * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(0.85 0.01 214) transparent;
|
|
}
|
|
|
|
.dark .agents-ui * {
|
|
scrollbar-color: oklch(0.4 0.01 214) transparent;
|
|
}
|
|
|
|
.agents-ui .shimmer-text {
|
|
background: linear-gradient(90deg, var(--ui-text-dim) 40%, var(--ui-accent) 50%, var(--ui-text-dim) 60%);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: agents-shimmer 4s linear infinite;
|
|
}
|
|
|
|
@keyframes agents-shimmer {
|
|
0% {
|
|
background-position: 200% center;
|
|
}
|
|
100% {
|
|
background-position: -200% center;
|
|
}
|
|
}
|