diff --git a/public/index.html b/public/index.html
index 4535335..38cd044 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,6 +25,7 @@
         <button id="btnRecord">🎙 Записать</button>
         <button id="btnPlay" disabled>▶ Прослушать</button>
         <button id="btnReset">🗑 Сброс</button>
+        <button id="btnTheme" title="День/Ночь">🌙</button>
       </div>
 
       <div id="status"></div>
@@ -228,6 +229,16 @@
     document.getElementById('btnReset').onclick = () => {
       chatHistory = []; chat.innerHTML = ''; setStatus('🧹 Очищено');
     };
+
+    // Тема
+    const btnTheme = document.getElementById('btnTheme');
+    let dark = localStorage.getItem('say_dark') !== '0';
+    function applyTheme() {
+      document.body.className = dark ? 'dark' : 'light';
+      btnTheme.textContent = dark ? '🌙' : '☀️';
+    }
+    applyTheme();
+    btnTheme.onclick = () => { dark = !dark; localStorage.setItem('say_dark', dark ? '1' : '0'); applyTheme(); };
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 31bbfe4..ee07e02 100644
--- a/public/style.css
+++ b/public/style.css
@@ -39,4 +39,21 @@ h1 { color: #7c6ff7; margin: 0 0 4px; font-size: 20px; }
 #history-title { color: #7c6ff7; font-weight: bold; margin-bottom: 10px; font-size: 15px; }
 .hitem { padding: 6px 8px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; font-size: 13px; color: #bbb; }
 .hitem:hover { background: #1a1a3e; }
-.hq { display: block; }
\ No newline at end of file
+.hq { display: block; }
+
+/* Светлая тема */
+body.light { background: #f5f5f5; color: #222; }
+body.light #main h1 { color: #5b4ae0; }
+body.light #chat { background: #fff; border-color: #ddd; }
+body.light .user { background: #e0f7f7; border-left-color: #009688; color: #00695c; }
+body.light .bot { background: #ede7f6; border-left-color: #7c6ff7; color: #333; }
+body.light .bot b { color: #000; }
+body.light .bot code { background: #e0e0e0; color: #c62828; }
+body.light #status { color: #666; }
+body.light #sidebar { background: #e8e8e8; border-color: #ddd; }
+body.light #history-title { color: #5b4ae0; }
+body.light .hitem { color: #555; }
+body.light .hitem:hover { background: #dcdcdc; }
+body.light .model-tag { background: #e0e0e0; border-color: #ccc; color: #555; }
+body.light #meter { background: #e0e0e0; }
+body.light #btnReset { background: #999; }
\ No newline at end of file