refactor(ui): route stylesheet colors through the token layer and gate hex literals (#123156)

Add semantic, presentation, brand, and shared highlight tokens in base.css.
Remove dead fallbacks and consolidate dark/light syntax colors behind tokens.
Enforce color-no-hex for CSS while exempting token definitions and sprite artwork.

config/stylelint.config.mjs

@@ -25,6 +25,26 @@ export default {
     "declaration-property-value-keyword-no-deprecated": [true, { ignoreKeywords: ["break-word"] }],
   },
   overrides: [
+    {
+      files: ["**/*.css"],
+      rules: {
+        "color-no-hex": true,
+      },
+    },
+    {
+      // Theme token definitions are the one source of stylesheet hex colors.
+      files: ["../ui/src/styles/base.css"],
+      rules: {
+        "color-no-hex": null,
+      },
+    },
+    {
+      // Lobster sprite artwork owns a fixed illustration palette, not UI theme colors.
+      files: ["../ui/src/styles/lobster-pet.css"],
+      rules: {
+        "color-no-hex": null,
+      },
+    },
     {
       files: ["**/*.ts"],
       customSyntax: "postcss-lit",

ui/src/styles/about.css

@@ -28,7 +28,7 @@
   border-radius: 50%;
   background: radial-gradient(
     closest-side,
-    color-mix(in srgb, var(--lob-shell, #c44536) 22%, transparent),
+    color-mix(in srgb, var(--lob-shell) 22%, transparent),
     transparent 72%
   );
   pointer-events: none;

ui/src/styles/base.css

@@ -70,6 +70,25 @@
   --accent-2-muted: rgba(20, 184, 166, 0.7);
   --accent-2-subtle: rgba(20, 184, 166, 0.1);
 
+  /* Theme-invariant presentation colors. */
+  --button-icon-bg: #ffffff;
+  --brand-logo-chip-bg: #ffffff;
+  --qr-bg: #ffffff;
+  --qr-text: #444444;
+  --media-bg: #000000;
+  --media-foreground: #ffffff;
+  --exec-highlight: #f97316;
+  --moon-highlight: #fef3c7;
+  --moon-base: #fbbf24;
+  --workshop-warm: #ff8a5c;
+  --workshop-teal: #14b8a6;
+  --workshop-cyan: #0891b2;
+
+  /* Provider and product brand colors never follow the active UI theme. */
+  --brand-codex: #10a37f;
+  --brand-claude: #d97757;
+  --brand-google: #4285f4;
+
   /*
    * Semantic status
    *
@@ -103,6 +122,10 @@
   --danger-subtle: rgba(248, 113, 113, 0.08);
   --info: #60a5fa;
   --info-subtle: rgba(96, 165, 250, 0.08);
+  --warn-bright: #f59e0b;
+  --warn-strong: #d97706;
+  --danger-solid-hover: #dc2626;
+  --pr-merged: #a78bfa;
   /* Run state needs its own token: --accent is red in every shipped theme and
      sits on top of --danger, so a spinning ring reads as a failed session.
      Graphical indicator, judged against WCAG 1.4.11 (3:1), not the label audit
@@ -117,6 +140,17 @@
   /* Grid */
   --grid-line: rgba(255, 255, 255, 0.03);
 
+  /* GitHub syntax palette shared by highlighted code and file previews. */
+  --hljs-keyword: #ff8a80;
+  --hljs-number: #79c0ff;
+  --hljs-string: #a5d6ff;
+  --hljs-title: #d2a8ff;
+  --hljs-type: #ffa657;
+  --hljs-attribute: #7ee787;
+  --hljs-meta: #c9d1d9;
+  --hljs-deletion: #ffa198;
+  --hljs-addition: #7ee787;
+
   /* Theme transition */
   --theme-switch-x: 50%;
   --theme-switch-y: 50%;
@@ -294,6 +328,7 @@
   --danger-subtle: rgba(185, 28, 28, 0.08);
   --info: #1d4ed8;
   --info-subtle: rgba(29, 78, 216, 0.08);
+  --pr-merged: #7c3aed;
   /* See the dark-theme note: run state stays off --accent. #0d9488 is 3.6:1 on
      --bg, above the 3:1 WCAG 1.4.11 bar for a non-text indicator. */
   --run: #0d9488;
@@ -304,6 +339,14 @@
 
   --grid-line: rgba(60, 42, 24, 0.05);
 
+  --hljs-keyword: #cf222e;
+  --hljs-number: #0550ae;
+  --hljs-string: #0a3069;
+  --hljs-title: #8250df;
+  --hljs-type: #953800;
+  --hljs-attribute: #116329;
+  --hljs-meta: #57606a;
+
   /* Light shadows - Subtle, warm-tinted */
   --shadow-sm: 0 1px 2px rgba(60, 42, 24, 0.05);
   --shadow-md: 0 4px 12px rgba(60, 42, 24, 0.07);

ui/src/styles/channels.css

@@ -390,7 +390,7 @@ wa-radio-group.channels-wizard__options::part(radios) {
 .channels-wizard__qr img {
   width: min(260px, 70vw);
   border-radius: var(--radius-md);
-  background: #fff;
+  background: var(--brand-logo-chip-bg);
   padding: var(--space-2);
 }
 

ui/src/styles/chat/grouped.css

@@ -928,7 +928,7 @@ details.msg-meta:not([open]) .msg-meta__details {
   border: 1px solid var(--border);
   border-radius: var(--radius-full);
   background: var(--card);
-  box-shadow: 0 8px 24px color-mix(in srgb, #000 30%, transparent);
+  box-shadow: 0 8px 24px color-mix(in srgb, black 30%, transparent);
 }
 
 .chat-group.user .msg-meta__details {
@@ -980,7 +980,7 @@ details.msg-meta:not([open]) .msg-meta__details {
 
 .chat-confirm-popover {
   position: fixed;
-  background: var(--card, #1a1a1a);
+  background: var(--card);
   border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
   border-radius: var(--radius-md, 8px);
   padding: 12px;
@@ -1004,7 +1004,7 @@ details.msg-meta:not([open]) .msg-meta__details {
   align-items: center;
   gap: 6px;
   font-size: 12px; /* was 11px */
-  color: var(--muted, #888);
+  color: var(--muted);
   margin-bottom: 10px;
   user-select: none;
 }
@@ -1033,7 +1033,7 @@ details.msg-meta:not([open]) .msg-meta__details {
 
 .chat-confirm-popover__cancel {
   background: var(--bg-hover, rgba(255, 255, 255, 0.08));
-  color: var(--muted, #888);
+  color: var(--muted);
 }
 
 .chat-confirm-popover__cancel:hover {
@@ -1042,7 +1042,7 @@ details.msg-meta:not([open]) .msg-meta__details {
 
 .chat-confirm-popover__yes {
   background: var(--danger);
-  color: #fff;
+  color: var(--media-foreground);
 }
 
 :root[data-theme="dark"] .chat-confirm-popover__yes {
@@ -1057,7 +1057,7 @@ details.msg-meta:not([open]) .msg-meta__details {
 }
 
 .chat-confirm-popover__yes:hover {
-  background: #dc2626;
+  background: var(--danger-solid-hover);
 }
 
 :root[data-theme="dark"] .chat-confirm-popover__yes:hover {

ui/src/styles/chat/layout.css

@@ -1021,7 +1021,7 @@ openclaw-chat-page {
   padding: 0;
   border: 1px solid rgb(255 255 255 / 22%);
   border-radius: 8px;
-  color: #fff;
+  color: var(--media-foreground);
   background: rgb(12 16 24 / 78%);
   backdrop-filter: blur(8px);
   cursor: var(--cursor-action);
@@ -2054,8 +2054,8 @@ button.chat-reply-preview--message:disabled {
 }
 
 .chat-pr[data-state="merged"] {
-  border-color: color-mix(in srgb, #a78bfa 32%, var(--border));
-  background: color-mix(in srgb, #a78bfa 7%, var(--panel));
+  border-color: color-mix(in srgb, var(--pr-merged) 32%, var(--border));
+  background: color-mix(in srgb, var(--pr-merged) 7%, var(--panel));
 }
 
 .chat-pr__link {
@@ -2088,11 +2088,7 @@ button.chat-reply-preview--message:disabled {
 }
 
 .chat-pr[data-state="merged"] .chat-pr__icon {
-  color: #a78bfa;
-}
-
-:root[data-theme-mode="light"] .chat-pr[data-state="merged"] .chat-pr__icon {
-  color: #7c3aed;
+  color: var(--pr-merged);
 }
 
 .chat-pr[data-state="branch"] .chat-pr__icon {
@@ -2292,11 +2288,7 @@ button.chat-reply-preview--message:disabled {
 }
 
 .chat-pr[data-state="merged"] .chat-pr__state {
-  color: #a78bfa;
-}
-
-:root[data-theme-mode="light"] .chat-pr[data-state="merged"] .chat-pr__state {
-  color: #7c3aed;
+  color: var(--pr-merged);
 }
 
 .chat-pr__warning {
@@ -3443,17 +3435,17 @@ button.chat-reply-preview--message:disabled {
   gap: 8px;
   padding: 0 12px;
   border-radius: var(--radius-full);
-  color: var(--danger, #ef4444);
-  background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--danger, #ef4444) 24%, transparent);
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--danger) 24%, transparent);
   touch-action: none;
   -webkit-touch-callout: none;
   user-select: none;
 }
 
 .chat-send-btn--dictating .agent-chat__voice-activity-bar {
-  background: color-mix(in srgb, var(--danger, #ef4444) 88%, var(--text));
-  box-shadow: 0 0 5px color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
+  background: color-mix(in srgb, var(--danger) 88%, var(--text));
+  box-shadow: 0 0 5px color-mix(in srgb, var(--danger) 30%, transparent);
 }
 
 .chat-send-btn__dictation-time {
@@ -3467,7 +3459,7 @@ button.chat-reply-preview--message:disabled {
   min-width: 0;
   align-items: center;
   gap: 8px;
-  color: var(--danger, #ef4444);
+  color: var(--danger);
   font-size: 12px;
 }
 
@@ -3496,7 +3488,7 @@ button.chat-reply-preview--message:disabled {
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
   border-radius: var(--radius-lg);
-  background: #000;
+  background: var(--media-bg);
   box-shadow: var(--shadow-md);
 }
 
@@ -3524,7 +3516,7 @@ button.chat-reply-preview--message:disabled {
   padding: 7px;
   border: 1px solid color-mix(in srgb, white 28%, transparent);
   border-radius: var(--radius-full);
-  background: color-mix(in srgb, #000 68%, transparent);
+  background: color-mix(in srgb, var(--media-bg) 68%, transparent);
   color: white;
   cursor: var(--cursor-action);
   place-items: center;
@@ -3532,7 +3524,7 @@ button.chat-reply-preview--message:disabled {
 }
 
 .agent-chat__video-preview-switch:hover:not(:disabled) {
-  background: color-mix(in srgb, #000 82%, transparent);
+  background: color-mix(in srgb, var(--media-bg) 82%, transparent);
 }
 
 .agent-chat__video-preview-switch:disabled {
@@ -3645,7 +3637,7 @@ button.chat-reply-preview--message:disabled {
 
 .chat-send-btn--stop:hover:not(:disabled) {
   background: color-mix(in srgb, var(--danger) 18%, transparent);
-  color: color-mix(in srgb, var(--danger) 82%, #fff);
+  color: color-mix(in srgb, var(--danger) 82%, var(--media-foreground));
   box-shadow: none;
 }
 

ui/src/styles/chat/sidebar.css

@@ -1546,37 +1546,35 @@ openclaw-session-discussion {
   background: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 
-/* Code syntax palette (dark below, light overrides further down): deliberate
-   literal hexes tuned for code legibility, not theme tokens — the UI palette
-   has no per-token-kind roles and retinting per theme family is not wanted. */
+/* Code syntax palette is shared with highlighted message code via base tokens. */
 .file-view .tok-comment {
   color: var(--muted);
   font-style: italic;
 }
 
 .file-view .tok-keyword {
-  color: #ff8a80;
+  color: var(--hljs-keyword);
 }
 
 .file-view
   :where(.tok-number, .tok-literal, .tok-atom, .tok-bool, .tok-variableName, .tok-variableName2) {
-  color: #79c0ff;
+  color: var(--hljs-number);
 }
 
 .file-view :where(.tok-string, .tok-string2) {
-  color: #a5d6ff;
+  color: var(--hljs-string);
 }
 
 .file-view :where(.tok-heading, .tok-definition) {
-  color: #d2a8ff;
+  color: var(--hljs-title);
 }
 
 .file-view :where(.tok-typeName, .tok-className, .tok-namespace, .tok-macroName) {
-  color: #ffa657;
+  color: var(--hljs-type);
 }
 
 .file-view :where(.tok-propertyName, .tok-labelName) {
-  color: #7ee787;
+  color: var(--hljs-attribute);
 }
 
 .file-view :where(.tok-link, .tok-url) {
@@ -1584,16 +1582,16 @@ openclaw-session-discussion {
 }
 
 .file-view .tok-meta {
-  color: #c9d1d9;
+  color: var(--hljs-meta);
 }
 
 .file-view .tok-deleted {
-  color: #ffa198;
+  color: var(--hljs-deletion);
   background: rgba(248, 81, 73, 0.12);
 }
 
 .file-view .tok-inserted {
-  color: #7ee787;
+  color: var(--hljs-addition);
   background: rgba(46, 160, 67, 0.12);
 }
 
@@ -1605,38 +1603,6 @@ openclaw-session-discussion {
   font-weight: 600;
 }
 
-:root[data-theme-mode="light"] .file-view .tok-keyword {
-  color: #cf222e;
-}
-
-:root[data-theme-mode="light"]
-  .file-view
-  :where(.tok-number, .tok-literal, .tok-atom, .tok-bool, .tok-variableName, .tok-variableName2) {
-  color: #0550ae;
-}
-
-:root[data-theme-mode="light"] .file-view :where(.tok-string, .tok-string2) {
-  color: #0a3069;
-}
-
-:root[data-theme-mode="light"] .file-view :where(.tok-heading, .tok-definition) {
-  color: #8250df;
-}
-
-:root[data-theme-mode="light"]
-  .file-view
-  :where(.tok-typeName, .tok-className, .tok-namespace, .tok-macroName) {
-  color: #953800;
-}
-
-:root[data-theme-mode="light"] .file-view :where(.tok-propertyName, .tok-labelName) {
-  color: #116329;
-}
-
-:root[data-theme-mode="light"] .file-view .tok-meta {
-  color: #57606a;
-}
-
 .file-view__loading {
   position: absolute;
   inset: 12px;

ui/src/styles/chat/tool-cards.css

@@ -186,7 +186,7 @@
 }
 
 .chat-tool-row--running .chat-tool-msg-summary__icon {
-  color: var(--accent-2, #14b8a6);
+  color: var(--accent-2);
 }
 
 /* Active-task text wave: a subtle left-to-right color sweep across the
@@ -243,7 +243,7 @@
   width: 7px;
   height: 7px;
   border-radius: var(--radius-full, 999px);
-  background: var(--accent-2, #14b8a6);
+  background: var(--accent-2);
   animation: chatToolRowPulse 1.1s ease-in-out infinite;
 }
 
@@ -272,8 +272,8 @@
   margin-left: auto;
   padding: 1px 6px;
   border-radius: var(--radius-full, 999px);
-  background: color-mix(in srgb, var(--destructive, #ef4444) 14%, transparent);
-  color: var(--destructive, #ef4444);
+  background: color-mix(in srgb, var(--destructive) 14%, transparent);
+  color: var(--destructive);
   font-size: 11px;
   font-weight: 600;
   line-height: 1.5;
@@ -291,11 +291,11 @@
 }
 
 .chat-diffstat__add {
-  color: var(--ok, #22c55e);
+  color: var(--ok);
 }
 
 .chat-diffstat__del {
-  color: var(--destructive, #ef4444);
+  color: var(--destructive);
 }
 
 /* ── Inline diff ── */
@@ -319,19 +319,19 @@
 }
 
 .chat-diff__row--add {
-  background: color-mix(in srgb, var(--ok, #22c55e) 13%, transparent);
+  background: color-mix(in srgb, var(--ok) 13%, transparent);
 }
 
 .chat-diff__row--add .chat-diff__sign {
-  color: var(--ok, #22c55e);
+  color: var(--ok);
 }
 
 .chat-diff__row--del {
-  background: color-mix(in srgb, var(--destructive, #ef4444) 12%, transparent);
+  background: color-mix(in srgb, var(--destructive) 12%, transparent);
 }
 
 .chat-diff__row--del .chat-diff__sign {
-  color: var(--destructive, #ef4444);
+  color: var(--destructive);
 }
 
 .chat-diff__row--file {
@@ -432,7 +432,7 @@
 }
 
 .chat-tool-term--error .chat-tool-term__out {
-  color: color-mix(in srgb, var(--destructive, #ef4444) 70%, var(--text) 30%);
+  color: color-mix(in srgb, var(--destructive) 70%, var(--text) 30%);
 }
 
 /* Command/diff text reuses <code> for semantics only; kill the markdown pill. */
@@ -449,16 +449,16 @@
 
 /* ── Command token colors (display-only highlighting) ── */
 .chat-cmd--name {
-  color: var(--accent-2, #14b8a6);
+  color: var(--accent-2);
   font-weight: 600;
 }
 
 .chat-cmd--str {
-  color: color-mix(in srgb, var(--ok, #22c55e) 78%, var(--text) 22%);
+  color: color-mix(in srgb, var(--ok) 78%, var(--text) 22%);
 }
 
 .chat-cmd--num {
-  color: color-mix(in srgb, var(--accent, #ff5c5c) 82%, var(--text) 18%);
+  color: color-mix(in srgb, var(--accent) 82%, var(--text) 18%);
 }
 
 .chat-cmd--flag {
@@ -466,7 +466,7 @@
 }
 
 .chat-cmd--op {
-  color: color-mix(in srgb, var(--accent-2, #14b8a6) 60%, var(--muted) 40%);
+  color: color-mix(in srgb, var(--accent-2) 60%, var(--muted) 40%);
 }
 
 /* ── Key-value args (generic tools) ── */

ui/src/styles/components.css

@@ -788,11 +788,7 @@ openclaw-github-link-hovercard-provider {
 }
 
 .github-link-hovercard__state[data-tone="purple"] {
-  color: #a78bfa;
-}
-
-:root[data-theme-mode="light"] .github-link-hovercard__state[data-tone="purple"] {
-  color: #7c3aed;
+  color: var(--pr-merged);
 }
 
 .github-link-hovercard__state-dot {
@@ -1299,14 +1295,14 @@ openclaw-github-link-hovercard-provider {
 }
 
 :root[data-theme-mode="light"] .btn--icon {
-  background: #ffffff;
+  background: var(--button-icon-bg);
   border-color: var(--border);
   box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
   color: var(--muted);
 }
 
 :root[data-theme-mode="light"] .btn--icon:hover {
-  background: #ffffff;
+  background: var(--button-icon-bg);
   border-color: var(--border-strong);
   color: var(--text);
 }
@@ -1555,7 +1551,7 @@ openclaw-github-link-hovercard-provider {
 }
 
 .compaction-indicator--fallback {
-  color: #d97706;
+  color: var(--warn-strong);
   border-color: rgba(217, 119, 6, 0.35);
 }
 
@@ -2096,7 +2092,7 @@ openclaw-chat-session-rail {
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-keyword,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-selector-tag,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-subst {
-  color: #ff8a80;
+  color: var(--hljs-keyword);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-number,
@@ -2104,26 +2100,26 @@ openclaw-chat-session-rail {
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-variable,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-template-variable,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-tag .hljs-attr {
-  color: #79c0ff;
+  color: var(--hljs-number);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-string,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-doctag {
-  color: #a5d6ff;
+  color: var(--hljs-string);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-title,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-section,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-selector-id,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-function .hljs-title {
-  color: #d2a8ff;
+  color: var(--hljs-title);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-type,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-class .hljs-title,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-built_in,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-builtin-name {
-  color: #ffa657;
+  color: var(--hljs-type);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-attr,
@@ -2132,7 +2128,7 @@ openclaw-chat-session-rail {
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-selector-class,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-selector-attr,
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-selector-pseudo {
-  color: #7ee787;
+  color: var(--hljs-attribute);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-symbol,
@@ -2142,16 +2138,16 @@ openclaw-chat-session-rail {
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-meta {
-  color: #c9d1d9;
+  color: var(--hljs-meta);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-deletion {
-  color: #ffa198;
+  color: var(--hljs-deletion);
   background: rgba(248, 81, 73, 0.12);
 }
 
 :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-addition {
-  color: #7ee787;
+  color: var(--hljs-addition);
   background: rgba(46, 160, 67, 0.12);
 }
 
@@ -2163,79 +2159,6 @@ openclaw-chat-session-rail {
   font-weight: 600;
 }
 
-:root[data-theme-mode="light"] :is(.code-block .hljs, .code-block-wrapper pre code.hljs) {
-  color: var(--text);
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-keyword,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-selector-tag,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-subst {
-  color: #cf222e;
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-number,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-literal,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-variable,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-template-variable,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-tag
-  .hljs-attr {
-  color: #0550ae;
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-string,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-doctag {
-  color: #0a3069;
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-title,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-section,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-selector-id,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-function
-  .hljs-title {
-  color: #8250df;
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-type,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-class
-  .hljs-title,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-built_in,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-builtin-name {
-  color: #953800;
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-attr,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-attribute,
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-name,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-selector-class,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-selector-attr,
-:root[data-theme-mode="light"]
-  :is(.code-block, .code-block-wrapper pre code.hljs)
-  .hljs-selector-pseudo {
-  color: #116329;
-}
-
-:root[data-theme-mode="light"] :is(.code-block, .code-block-wrapper pre code.hljs) .hljs-meta {
-  color: #57606a;
-}
-
 .markdown-plain-text-fallback {
   display: block;
   white-space: pre-wrap;
@@ -3288,7 +3211,7 @@ td.data-table-key-col {
 .exec-approval-command-span {
   border-radius: 3px;
   padding: 0 2px;
-  background: color-mix(in srgb, #f97316 34%, transparent);
+  background: color-mix(in srgb, var(--exec-highlight) 34%, transparent);
   color: var(--text);
 }
 
@@ -5268,7 +5191,7 @@ td.data-table-key-col {
   padding: 18px;
   border: 1px solid var(--border);
   border-radius: 22px;
-  background: #ffffff;
+  background: var(--qr-bg);
   box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
 }
 
@@ -5282,7 +5205,7 @@ td.data-table-key-col {
 
 .device-pair-setup__qr-unavailable {
   max-width: 220px;
-  color: #444444;
+  color: var(--qr-text);
   font-size: 14px;
   line-height: 1.5;
   text-align: center;
@@ -5794,15 +5717,15 @@ td.data-table-key-col {
 }
 
 .provider-brand-icon[data-provider-icon="codex"] {
-  color: #10a37f;
+  color: var(--brand-codex);
 }
 
 .provider-brand-icon[data-provider-icon="claude"] {
-  color: #d97757;
+  color: var(--brand-claude);
 }
 
 .provider-brand-icon[data-provider-icon="gemini"] {
-  color: #4285f4;
+  color: var(--brand-google);
 }
 
 .provider-brand-icon[data-provider-icon="llamacpp"],

ui/src/styles/config.css

@@ -332,6 +332,8 @@
   background: var(--theme-chip-accent-2);
 }
 
+/* Preview swatches are theme-invariant and must not inherit the active theme. */
+/* stylelint-disable color-no-hex */
 .settings-theme-card--claw {
   --theme-chip-bg: #0e1015;
   --theme-chip-accent: #ff5c5c;
@@ -367,6 +369,7 @@
   --theme-chip-accent: #6e4828;
   --theme-chip-accent-2: #6a4e30;
 }
+/* stylelint-enable color-no-hex */
 
 .settings-theme-card--custom {
   --theme-chip-bg: var(--bg);

ui/src/styles/dreams.css

@@ -248,7 +248,7 @@
   width: 64px;
   height: 64px;
   border-radius: 50%;
-  background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
+  background: radial-gradient(circle at 35% 35%, var(--moon-highlight), var(--moon-base));
   box-shadow:
     0 0 40px rgba(251, 191, 36, 0.2),
     0 0 80px rgba(251, 191, 36, 0.08);

ui/src/styles/layout.css

@@ -1129,7 +1129,7 @@ openclaw-settings-save-indicator {
   flex-shrink: 0;
   width: 14px;
   height: 14px;
-  color: var(--warn, #b7791f);
+  color: var(--warn);
 }
 
 .sidebar-attention__item--error .sidebar-attention__icon {
@@ -3978,11 +3978,7 @@ html:not(.openclaw-native-macos):not(.openclaw-native-nav):not(.openclaw-native-
 }
 
 .sidebar-session-pr-indicator--merged {
-  color: #a78bfa;
-}
-
-:root[data-theme-mode="light"] .sidebar-session-pr-indicator--merged {
-  color: #7c3aed;
+  color: var(--pr-merged);
 }
 
 .sidebar-session-pr-indicator svg {

ui/src/styles/layout.mobile.css

@@ -357,8 +357,8 @@ html.openclaw-native-macos body .shell--mobile-nav .topnav-shell__actions {
     left: auto;
     z-index: 100;
     width: min(420px, calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 16px));
-    background: var(--card, #161b22);
-    border: 1px solid var(--border, #30363d);
+    background: var(--card);
+    border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 10px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

ui/src/styles/plugins.css

@@ -226,7 +226,7 @@
   flex: 0 0 40px;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  background: #fff;
+  background: var(--brand-logo-chip-bg);
   object-fit: contain;
 }
 

ui/src/styles/skill-workshop.css

@@ -729,21 +729,21 @@
 
 .sw-evaluation__badge.is-pass,
 .sw-evaluation__badge.is-completed {
-  border-color: color-mix(in srgb, var(--ok, #34d399) 46%, var(--border));
-  color: var(--ok, #34d399);
+  border-color: color-mix(in srgb, var(--ok) 46%, var(--border));
+  color: var(--ok);
 }
 
 .sw-evaluation__badge.is-revise,
 .sw-evaluation__severity.is-warn {
-  border-color: color-mix(in srgb, #f59e0b 46%, var(--border));
-  color: #d97706;
+  border-color: color-mix(in srgb, var(--warn-bright) 46%, var(--border));
+  color: var(--warn-strong);
 }
 
 .sw-evaluation__badge.is-block,
 .sw-evaluation__badge.is-error,
 .sw-evaluation__severity.is-critical {
-  border-color: color-mix(in srgb, var(--danger, #ff6b6b) 46%, var(--border));
-  color: var(--danger, #ff6b6b);
+  border-color: color-mix(in srgb, var(--danger) 46%, var(--border));
+  color: var(--danger);
 }
 
 .sw-evaluation__summary,
@@ -761,7 +761,7 @@
 }
 
 .sw-evaluation__error {
-  color: var(--danger, #ff6b6b);
+  color: var(--danger);
 }
 
 .sw-evaluation__findings,
@@ -1359,7 +1359,7 @@
 }
 
 .sw-history__error {
-  color: var(--danger, #ff6b6b);
+  color: var(--danger);
 }
 .sw-history__empty-window {
   color: var(--muted);
@@ -1471,7 +1471,7 @@
 }
 
 .sw-today__dot.is-done {
-  background: var(--ok, #34d399);
+  background: var(--ok);
 }
 
 .sw-today__dot.is-now {
@@ -1496,7 +1496,7 @@
   left: 0;
   right: 0;
   height: 3px;
-  background: linear-gradient(90deg, var(--accent), #ff8a5c, #14b8a6);
+  background: linear-gradient(90deg, var(--accent), var(--workshop-warm), var(--workshop-teal));
   opacity: 0.7;
 }
 
@@ -1600,7 +1600,7 @@
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #14b8a6, #0891b2);
+  background: linear-gradient(135deg, var(--workshop-teal), var(--workshop-cyan));
   color: white;
   font-size: 12px; /* was 10px */
   font-weight: 700;
@@ -1829,8 +1829,8 @@
   width: 22px;
   height: 22px;
   border-radius: 50%;
-  background: color-mix(in srgb, var(--ok, #34d399) 18%, transparent);
-  color: var(--ok, #34d399);
+  background: color-mix(in srgb, var(--ok) 18%, transparent);
+  color: var(--ok);
   display: inline-flex;
   align-items: center;
   justify-content: center;

ui/src/styles/workboard.css

@@ -609,7 +609,7 @@
   gap: 9px;
   box-shadow:
     0 1px 0 color-mix(in srgb, white 3%, transparent) inset,
-    0 8px 22px color-mix(in srgb, #000 18%, transparent);
+    0 8px 22px color-mix(in srgb, black 18%, transparent);
   transition:
     border-color var(--duration-fast) var(--ease-out),
     background var(--duration-fast) var(--ease-out),
@@ -635,7 +635,7 @@
   background: color-mix(in srgb, var(--bg-elevated) 84%, var(--bg) 16%);
   box-shadow:
     0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
-    0 12px 28px color-mix(in srgb, #000 24%, transparent);
+    0 12px 28px color-mix(in srgb, black 24%, transparent);
   transform: translateY(-1px);
 }
 
@@ -655,7 +655,7 @@
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--workboard-health-highlight-color) 42%, transparent),
     0 0 0 4px color-mix(in srgb, var(--workboard-health-highlight-color) 14%, transparent),
-    0 12px 30px color-mix(in srgb, #000 26%, transparent);
+    0 12px 30px color-mix(in srgb, black 26%, transparent);
 }
 
 .workboard-card--health-highlight-running {
@@ -693,7 +693,7 @@
   border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
   box-shadow:
     0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent),
-    0 8px 22px color-mix(in srgb, #000 18%, transparent);
+    0 8px 22px color-mix(in srgb, black 18%, transparent);
   transform: scale(0.985);
   cursor: grabbing;
 }