From 908bcce9f38ff0eb241cfe33694fca11ab752cf1 Mon Sep 17 00:00:00 2001
From: Abdussamet Kocak <abdus@abdus.dev>
Date: Tue, 23 Dec 2025 18:47:20 +0100
Subject: [PATCH] feat(chat): Proper light/dark theme

---
 chat.html | 102 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/chat.html b/chat.html
index 2c4e065..bcf458e 100644
--- a/chat.html
+++ b/chat.html
@@ -6,20 +6,30 @@
         <title>Cet ci pi ti</title>
         <style>
             :root {
-                color-scheme: light dark;
-                --bg-primary: Canvas;
-                --bg-secondary: #ccc;
-                --bg-input: #f0f0f0;
-                --bg-user-message: Highlight;
-                --bg-code: Field;
-                --text-primary: CanvasText;
-                --text-user: HighlightText;
-                --border-color: #aaa;
+                /* Light theme */
+                --bg-primary: #ffffff;
+                --bg-secondary: #f3f4f6;
+                --bg-input: #ffffff;
+                --bg-user-message: #3b82f6;
+                --bg-code: #f5f5f5;
+                --text-primary: #1f2937;
+                --text-user: #ffffff;
+                --text-secondary: #6b7280;
+                --border-color: #e5e7eb;
+                --hover-bg: #e5e7eb;
             }
             @media (prefers-color-scheme: dark) {
                 :root {
-                    --bg-secondary: #555;
-                    --bg-input: #444;
+                    --bg-primary: #1f2937;
+                    --bg-secondary: #111827;
+                    --bg-input: #374151;
+                    --bg-user-message: #2563eb;
+                    --bg-code: #0f172a;
+                    --text-primary: #f3f4f6;
+                    --text-user: #ffffff;
+                    --text-secondary: #d1d5db;
+                    --border-color: #4b5563;
+                    --hover-bg: #374151;
                 }
             }
             *,
@@ -33,6 +43,13 @@
                 font-family: "JetBrains Mono", Consolas, Menlo, monospace;
                 line-height: 1.6;
                 font-size: 16px;
+                background: var(--bg-primary);
+                color: var(--text-primary);
+                transition: background-color 0.2s, color 0.2s;
+            }
+            input {
+                line-height: inherit;
+                font-family: inherit;
             }
             .chat-container {
                 height: 100vh;
@@ -42,6 +59,7 @@
                 gap: 1rem;
                 padding: 1rem;
                 grid-template-areas: "messages messages" "prompt submit";
+                background: var(--bg-primary);
             }
             .messages {
                 grid-area: messages;
@@ -53,7 +71,6 @@
                 border-radius: 0.8rem;
                 max-width: 85%;
                 margin-top: 1rem;
-                background: var(--bg-user-message);
                 overflow-x: auto;
             }
 
@@ -63,6 +80,8 @@
 
             .user-message {
                 margin-left: auto;
+                background: var(--bg-user-message);
+                color: var(--text-user);
             }
 
             .user-message > div {
@@ -73,6 +92,7 @@
             .system-message {
                 background: var(--bg-secondary);
                 margin-right: auto;
+                color: var(--text-primary);
             }
             .system-message pre {
                 position: relative;
@@ -80,6 +100,9 @@
                 background: var(--bg-code);
                 border-radius: 0.4rem;
                 white-space: pre;
+                color: var(--text-primary);
+                border: 1px solid var(--border-color);
+                overflow-x: auto;
             }
             .copy-btn {
                 position: absolute;
@@ -87,12 +110,13 @@
                 right: 0.6rem;
                 background: var(--bg-secondary);
                 color: var(--text-primary);
-                border: none;
+                border: 1px solid var(--border-color);
                 border-radius: 0.3rem;
                 padding: 0.2rem 0.6rem;
                 font-size: 0.9em;
                 cursor: pointer;
                 opacity: 0.6;
+                transition: opacity 0.2s;
             }
             .copy-btn:hover {
                 opacity: 1;
@@ -105,6 +129,12 @@
                 border-radius: 0.4rem;
                 resize: vertical;
                 font-size: 1rem;
+                background: var(--bg-input);
+                color: var(--text-primary);
+                transition: background-color 0.2s, color 0.2s;
+            }
+            .prompt::placeholder {
+                color: var(--text-secondary);
             }
             .submit {
                 font-size: 1rem;
@@ -112,12 +142,13 @@
                 cursor: pointer;
                 padding: 0.8rem 2rem;
                 background: var(--bg-secondary);
-                border: none;
+                color: var(--text-primary);
+                border: 1px solid var(--border-color);
                 border-radius: 0.4rem;
-                transition: background-color 0.2s;
+                transition: background-color 0.2s, color 0.2s;
             }
             .submit:hover {
-                background: var(--bg-user-message);
+                background: var(--hover-bg);
             }
             @keyframes pulse {
                 20% {
@@ -139,10 +170,14 @@
                 opacity: 0.3;
                 padding: 0.5rem;
                 cursor: pointer;
-                background-color: color-mix(in srgb, var(--bg-secondary) 30%, transparent);
+                background-color: var(--bg-secondary);
+                color: var(--text-primary);
+                border: 1px solid var(--border-color);
+                transition: opacity 0.2s, background-color 0.2s;
             }
             :is(#model-selector, #history-panel):hover {
-                background-color: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
+                opacity: 0.7;
+                background-color: var(--hover-bg);
             }
             #model-selector {
                 left: 1rem;
@@ -158,6 +193,10 @@
                 min-width: 220px;
                 max-width: 320px;
                 padding-top: 0.5rem;
+                background: var(--bg-primary);
+                border: 1px solid var(--border-color);
+                border-radius: 0.4rem;
+                padding: 0.5rem;
             }
             .history-item {
                 cursor: pointer;
@@ -166,12 +205,14 @@
                 display: flex;
                 gap: 0.5rem;
                 align-items: center;
+                transition: background-color 0.2s;
             }
             .history-item:hover {
-                background: rgba(0, 0, 0, 0.05);
+                background: var(--hover-bg);
             }
             .history-time {
                 font-weight: 700;
+                color: var(--text-secondary);
             }
             .history-time::after {
                 content: " - ";
@@ -181,6 +222,7 @@
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 max-width: 220px;
+                color: var(--text-secondary);
             }
             [x-cloak] {
                 display: none !important;
@@ -253,16 +295,18 @@
         <script type="module">
             import Alpine from "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/module.esm.js";
 
-            const md = markdownit({ html: false });
-
             window.env ??= {};
-            const systemPrompt = `You are a helpful AI assistant.
-                                    Do not preach about implications,
-                                    do not praise excessively.
-                                    Keep a critical mindset,
-                                    do not assume blindly.
-                                    Challenge my views when appropriate.
-                                    Answer in valid markdown only, no exceptions.`;
+            const systemPrompt = `
+                You are a helpful AI assistant.
+                Do not preach about implications,
+                do not praise excessively.
+                Keep a critical mindset,
+                do not assume blindly, and challenge my statements when appropriate.
+                When I ask for code, assume that I am a senior backend developer and do not explain excessively.
+                Answer in valid markdown only, no exceptions.
+            `
+                .replace(/^\s+/gm, "")
+                .trim();
 
             const chatApp = () => ({
                 messages: [{ role: "system", content: systemPrompt }],
@@ -392,6 +436,8 @@
                 },
             });
 
+            const md = markdownit({ html: false });
+
             function renderMarkdown(markdown) {
                 const $container = document.createElement("template");
                 $container.innerHTML = md.render(markdown);