From 7f15b65eb12f257f62da0b78c32e41a93d29a073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=20=D0=93=D0=BB=D0=B0=D0=B7=D1=83?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= <i.glazunov@sapiens.solutions>
Date: Mon, 16 Feb 2026 22:29:30 +0300
Subject: [PATCH] feat: add light theme support and update theme detection in
 renderer

---
 src/components/views/AssistantView.js | 95 ++++++++++++++++++++++++++-
 src/utils/renderer.js                 |  5 ++
 2 files changed, 99 insertions(+), 1 deletion(-)

diff --git a/src/components/views/AssistantView.js b/src/components/views/AssistantView.js
index 5554710..3770192 100644
--- a/src/components/views/AssistantView.js
+++ b/src/components/views/AssistantView.js
@@ -140,7 +140,8 @@ export class AssistantView extends LitElement {
       color: var(--text-primary);
     }
 
-    /* ── Syntax highlighting for code blocks (GitHub Dark theme) ── */
+    /* ── Syntax highlighting for code blocks ── */
+    /* Default (Dark theme) */
     .response-container .hljs {
       color: #c9d1d9;
       background: transparent;
@@ -233,6 +234,98 @@ export class AssistantView extends LitElement {
       background-color: #67060c;
     }
 
+    /* Light theme syntax highlighting */
+    :host-context(body[data-theme-type="light"]) .response-container .hljs {
+      color: #24292f;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-doctag,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-keyword,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-meta .hljs-keyword,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-template-tag,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-template-variable,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-type,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-variable.language_ {
+      color: #cf222e;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-title,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-title.class_,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-title.class_.inherited__,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-title.function_ {
+      color: #8250df;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-attr,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-attribute,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-literal,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-meta,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-number,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-operator,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-selector-attr,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-selector-class,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-selector-id,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-variable {
+      color: #0550ae;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-meta .hljs-string,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-regexp,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-string {
+      color: #0a3069;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-built_in,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-symbol {
+      color: #953800;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-code,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-comment,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-formula {
+      color: #6e7781;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-name,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-quote,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-selector-pseudo,
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-selector-tag {
+      color: #116329;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-subst {
+      color: #24292f;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-section {
+      color: #0969da;
+      font-weight: 700;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-bullet {
+      color: #953800;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-emphasis {
+      color: #24292f;
+      font-style: italic;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-strong {
+      color: #24292f;
+      font-weight: 700;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-addition {
+      color: #116329;
+      background-color: #dafbe1;
+    }
+
+    :host-context(body[data-theme-type="light"]) .response-container .hljs-deletion {
+      color: #82071e;
+      background-color: #ffebe9;
+    }
+
     .response-container a {
       color: var(--accent);
       text-decoration: underline;
diff --git a/src/utils/renderer.js b/src/utils/renderer.js
index 4041a88..8336c24 100644
--- a/src/utils/renderer.js
+++ b/src/utils/renderer.js
@@ -1087,6 +1087,11 @@ const theme = {
     this.current = themeName;
     const root = document.documentElement;
 
+    // Determine if theme is light or dark
+    const lightThemes = ["light", "sepia"];
+    const isLightTheme = lightThemes.includes(themeName);
+    document.body.setAttribute("data-theme-type", isLightTheme ? "light" : "dark");
+
     // New design tokens (used by components)
     root.style.setProperty("--text-primary", colors.text);
     root.style.setProperty("--text-secondary", colors.textSecondary);