From 67cca58a9e9af9b6814d1c43f02eb173bc94a232 Mon Sep 17 00:00:00 2001
From: Grigorii Dimitriev <g.dimitriev@rtc.ru>
Date: Mon, 29 Sep 2025 12:54:38 +0300
Subject: [PATCH] Add dark theme variants for css variables

---
 src/css/styles.css | 83 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 59 insertions(+), 24 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index e0632f6..b213235 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -2,6 +2,37 @@
 
 /* CSS переменные, чтобы создать атмосферу Шира из "Властелина колец" */
 :root {
+	/* Общие стили узлов графа */
+	--node-padding: 10px;
+	--node-border-radius: 5px;
+	--node-font-size: 14px;
+	--node-font-weight: bold;
+	--node-text-align: center;
+
+	/* Переменные для текста */
+	--font-text-size: 14px;
+	--font-monospace: 'Roboto Mono', monospace;
+
+	--border-color-light: #d3cbbd; /* Светлая граница, землистая */
+	--border-color-dark: #a99b87; /* Темная граница, землистая */
+	--background-modifier-form-field: #f5efe1; /* Светлый земляной фон для полей */
+	--background-modifier-form-field-highlighted: #e4dccf; /* Немного темнее для выделенных полей */
+
+	--node-text-color: var(
+		--text-normal
+	); /* Используем общую переменную для текста узлов */
+}
+
+/* Определение для светлой темы */
+.theme-light {
+	/* Цвета для кнопок и интерактивных элементов (светлая тема) */
+	--button-primary-background: #5a8f6a; /* Насыщенный ширский зеленый для кнопок */
+	--button-primary-hover-background: #4a7a5c; /* Темнее для наведения */
+	--button-primary-text-color: #ffffff; /* Белый текст */
+	--button-secondary-background: #d9d1bf; /* Светлый землистый для второстепенных кнопок */
+	--button-secondary-hover-background: #c4bda9; /* Темнее для наведения */
+	--button-secondary-text-color: #333333; /* Темный текст для второстепенных */
+
 	/* Цвета сообщений чата */
 	--llm-user-border-color: #79a07e; /* Ширский зеленый */
 	--llm-user-background-color: #e6f2e6; /* Очень светлый ширский зеленый */
@@ -14,36 +45,40 @@
 	--llm-assistant-border-color: #9c9c8f; /* Серый камень */
 	--llm-assistant-background-color: #ecece4; /* Светло-серый, землистый */
 
-	/* Общие стили узлов графа */
-	--node-padding: 10px;
-	--node-border-radius: 5px;
-	--node-font-size: 14px;
-	--node-font-weight: bold;
-	--node-text-align: center;
-
-	/* Переменные для текста */
-	--font-text-size: 14px;
+	/* Переменные для текста (светлая тема) */
 	--text-normal: #333;
 	--text-muted: #666;
 	--background-secondary-alt: #f0f0f0;
-	--font-monospace: 'Roboto Mono', monospace;
 	--text-accent: #007bff;
+}
 
-	/* Цвета для кнопок и интерактивных элементов */
-	--button-primary-background: #5a8f6a; /* Насыщенный ширский зеленый для кнопок */
-	--button-primary-hover-background: #4a7a5c; /* Темнее для наведения */
-	--button-primary-text-color: #ffffff; /* Белый текст */
-	--button-secondary-background: #d9d1bf; /* Светлый землистый для второстепенных кнопок */
-	--button-secondary-hover-background: #c4bda9; /* Темнее для наведения */
-	--button-secondary-text-color: #333333; /* Темный текст для второстепенных */
-	--border-color-light: #d3cbbd; /* Светлая граница, землистая */
-	--border-color-dark: #a99b87; /* Темная граница, землистая */
-	--background-modifier-form-field: #f5efe1; /* Светлый земляной фон для полей */
-	--background-modifier-form-field-highlighted: #e4dccf; /* Немного темнее для выделенных полей */
+/* Определение для тёмной темы */
+.theme-dark {
+	/* Цвета для кнопок и интерактивных элементов (темная тема) */
+	--button-primary-background: #4a7a5c; /* Более глубокий зеленый для темной темы */
+	--button-primary-hover-background: #3a6a4c;
+	--button-primary-text-color: #ffffff;
+	--button-secondary-background: #a99d8b; /* Более темный землистый */
+	--button-secondary-hover-background: #948d7b;
+	--button-secondary-text-color: #f0f0f0;
 
-	--node-text-color: var(
-		--text-normal
-	); /* Используем общую переменную для текста узлов */
+	/* Переменные для темной темы, сохраняющие "ширскую" атмосферу */
+	--llm-user-border-color: #5a8f6a; /* Темнее зеленый */
+	--llm-user-background-color: #2b3a2d; /* Глубокий зеленый фон */
+	--llm-llm-border-color: #8c7e60; /* Темный землистый */
+	--llm-llm-background-color: #3a3227; /* Темный кремовый/коричневый */
+	--llm-tool-border-color: #806842; /* Темный древесный коричневый */
+	--llm-tool-background-color: #3b2c1c; /* Глубокий песочный/коричневый */
+	--llm-error-border-color: #9c4b4b; /* Более глубокий красный */
+	--llm-error-background-color: #4a2d2d; /* Темный приглушенный красный */
+	--llm-assistant-border-color: #7c7c70; /* Темный серый камень */
+	--llm-assistant-background-color: #3a3a35; /* Глубокий серо-землистый */
+
+	/* Переменные для текста (темная тема) */
+	--text-normal: #f0f0f0; /* Светлый текст */
+	--text-muted: #b0b0b0; /* Светлый приглушенный текст */
+	--background-secondary-alt: #2a2a2a; /* Темный фон */
+	--text-accent: #6aa84f; /* Более приглушенный зеленый акцент */
 }
 
 .llm-agent-chat-panel .message-type-user {