From a9fc999b535f8ed9b6fae77c527b577e88b1e577 Mon Sep 17 00:00:00 2001
From: Gamosoft <gamosoft@users.noreply.github.com>
Date: Thu, 7 May 2026 11:15:36 +0200
Subject: [PATCH] fixed themes

---
 frontend/index.html          | 29 ++---------------------------
 themes/cobalt2.css           |  7 +++++--
 themes/dark.css              |  4 ++++
 themes/dracula.css           |  4 ++++
 themes/gruvbox-dark.css      |  4 ++++
 themes/hacker.css            |  4 ++++
 themes/light.css             |  4 ++--
 themes/matcha-light.css      |  6 +++---
 themes/monokai.css           |  5 +++--
 themes/nord.css              |  4 ++++
 themes/ubuntu.css            |  4 ++++
 themes/vs-blue.css           |  5 ++---
 themes/vue-high-contrast.css |  4 ++++
 13 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index fe47d13..86c66de 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -703,35 +703,10 @@
             to { opacity: 1; }
         }
         
-        /*
-         * Syntax highlight colors — COLOR-ONLY (issue #212).
-         *
-         * Why no font-weight or font-style?
-         *   The overlay sits on top of a transparent <textarea>. Macs render
-         *   bold/italic monospace glyphs (Monaco, Menlo) with slightly
-         *   different advance widths than regular glyphs, which shifts the
-         *   overlay characters out of alignment with the textarea caret.
-         *   Color-only highlighting (Cursor / One Dark Pro / Monokai style)
-         *   keeps every glyph at the same width and the caret perfectly
-         *   aligned on every platform.
-         *
-         * Token → variable mapping:
-         *   Almost every token uses a semantic theme variable directly
-         *   (--accent-primary, --text-tertiary, --border-primary), so
-         *   adding a new theme requires zero syntax-highlight work — the
-         *   theme's own brand colour automatically propagates.
-         *
-         *   The two exceptions are bold and italic, which have no natural
-         *   semantic home (the originals relied on font-weight/style which
-         *   we can no longer use). They have universal warm/cool defaults
-         *   (yellow/cyan) and themes only override --syntax-bold or
-         *   --syntax-italic when the default would collide with their
-         *   accent (e.g. Cobalt2 yellow accent) or needs a deeper variant
-         *   for a light background.
-         */
+        /* Syntax highlight colors (color-only — see issue #212) */
         .syntax-overlay .md-heading   { color: var(--accent-primary); }
         .syntax-overlay .md-bold      { color: var(--syntax-bold, #fbbf24); }
-        .syntax-overlay .md-italic    { color: var(--syntax-italic, #22d3ee); }
+        .syntax-overlay .md-italic    { color: var(--syntax-italic, #a78bfa); }
         .syntax-overlay .md-code      { color: var(--accent-secondary, var(--accent-primary)); background: var(--bg-tertiary); border-radius: 2px; }
         .syntax-overlay .md-link      { color: var(--link-color, var(--accent-primary)); }
         .syntax-overlay .md-link-url  { color: var(--text-tertiary); }
diff --git a/themes/cobalt2.css b/themes/cobalt2.css
index 55cf289..cf9b2e6 100644
--- a/themes/cobalt2.css
+++ b/themes/cobalt2.css
@@ -29,8 +29,11 @@
     --error: #ff0088;
     --warning: #ffc600;
 
-    /* Bold override: accent is yellow, so default yellow bold would collide. */
-    --syntax-bold: #ff9d00; /* cobalt2 orange */
+    /* Bold + italic — Cobalt2 native orange + cyan.
+       Heading is yellow (warm), so italic uses Cobalt2's signature cyan
+       instead of "lighter primary" to preserve warm/cool hierarchy. */
+    --syntax-bold:   #ff9d00; /* cobalt2 orange */
+    --syntax-italic: #9effff; /* cobalt2 cyan */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
diff --git a/themes/dark.css b/themes/dark.css
index 428de2e..7b39b3b 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -27,6 +27,10 @@
   --error: #f87171;
   --warning: #fbbf24;
 
+  /* Bold + italic — warm emphasis + lighter primary for italic (cohesive with heading) */
+  --syntax-bold:   #fbbf24; /* amber/yellow */
+  --syntax-italic: #93c5fd; /* lighter blue — same family as heading, distinct by luminance */
+
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
diff --git a/themes/dracula.css b/themes/dracula.css
index fa21e92..0e41bb7 100644
--- a/themes/dracula.css
+++ b/themes/dracula.css
@@ -29,6 +29,10 @@
     --error: #ff5555;
     --warning: #f1fa8c;
 
+    /* Bold + italic — Dracula yellow + lighter purple (cohesive with purple heading) */
+    --syntax-bold:   #f1fa8c; /* Dracula yellow */
+    --syntax-italic: #d8b4fe; /* lighter purple — same family as heading */
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
diff --git a/themes/gruvbox-dark.css b/themes/gruvbox-dark.css
index 5294a0f..2603f80 100644
--- a/themes/gruvbox-dark.css
+++ b/themes/gruvbox-dark.css
@@ -29,6 +29,10 @@
     --error: #fb4934;   /* Red */
     --warning: #fabd2f; /* Yellow */
 
+    /* Bold + italic — Gruvbox yellow + lighter peach (cohesive with orange heading) */
+    --syntax-bold:   #fabd2f; /* gruvbox yellow */
+    --syntax-italic: #fdba74; /* lighter peach — same family as orange heading */
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
diff --git a/themes/hacker.css b/themes/hacker.css
index 67af953..dc869c1 100644
--- a/themes/hacker.css
+++ b/themes/hacker.css
@@ -28,6 +28,10 @@
   --error: #ff6b8a;
   --warning: #ffd447;
 
+  /* Bold + italic — amber CRT alert + lighter matrix green (same green family) */
+  --syntax-bold:   #ffd447; /* amber CRT alert (historically authentic — amber CRTs existed) */
+  --syntax-italic: #86efac; /* lighter green — same family as matrix-green heading */
+
   /* Shadows — heavy, like a dim room */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.55);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.65);
diff --git a/themes/light.css b/themes/light.css
index 63908e7..4233a07 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -27,9 +27,9 @@
   --error: #ef4444;
   --warning: #f59e0b;
 
-  /* Bold/italic overrides: deeper variants for readability on light background. */
+  /* Bold + italic — warm emphasis + deeper primary for italic (cohesive on white) */
   --syntax-bold:   #b45309; /* deep amber */
-  --syntax-italic: #0891b2; /* deep cyan */
+  --syntax-italic: #1d4ed8; /* deeper blue — same family as heading, distinct by depth */
 
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
diff --git a/themes/matcha-light.css b/themes/matcha-light.css
index f1471bd..6f5bdee 100644
--- a/themes/matcha-light.css
+++ b/themes/matcha-light.css
@@ -29,9 +29,9 @@
     --error: #d9534f;
     --warning: #f0ad4e;
 
-    /* Bold/italic overrides: deeper variants for readability on lime background. */
-    --syntax-bold:   #a16207; /* deep amber */
-    --syntax-italic: #0e7490; /* deep cyan */
+    /* Bold + italic — deep amber + deeper matcha green (cohesive with green heading on lime) */
+    --syntax-bold:   #a16207; /* deep amber — warm contrast on lime */
+    --syntax-italic: #365314; /* deeper green — same family as matcha heading */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(58, 77, 34, 0.1);
diff --git a/themes/monokai.css b/themes/monokai.css
index 9f09f3a..124a1ab 100644
--- a/themes/monokai.css
+++ b/themes/monokai.css
@@ -29,8 +29,9 @@
     --error: #f92672;
     --warning: #e6db74;
 
-    /* Italic override: accent is cyan, so default cyan italic would collide. */
-    --syntax-italic: #ae81ff; /* Monokai purple — cool but distinct */
+    /* Bold + italic — Monokai yellow + lighter cyan (cohesive with cyan heading) */
+    --syntax-bold:   #e6db74; /* Monokai yellow (strings) */
+    --syntax-italic: #a5f3fc; /* lighter cyan — same family as heading */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
diff --git a/themes/nord.css b/themes/nord.css
index 951d634..3fc9a4a 100644
--- a/themes/nord.css
+++ b/themes/nord.css
@@ -29,6 +29,10 @@
     --error: #bf616a;
     --warning: #ebcb8b;
 
+    /* Bold + italic — aurora yellow + lighter frost (cohesive with frost-cyan heading) */
+    --syntax-bold:   #ebcb8b; /* nord13 — aurora yellow */
+    --syntax-italic: #bae6fd; /* lighter frost — same family as heading, distinct by luminance */
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
diff --git a/themes/ubuntu.css b/themes/ubuntu.css
index b7c627f..cad9622 100644
--- a/themes/ubuntu.css
+++ b/themes/ubuntu.css
@@ -28,6 +28,10 @@
   --error: #f07171;
   --warning: #ef7c2a;
 
+  /* Bold + italic — Ubuntu gold + lighter peach (cohesive with orange heading) */
+  --syntax-bold:   #ffce6b; /* warm gold */
+  --syntax-italic: #fdba74; /* lighter peach — same family as orange heading */
+
   /* Shadows — widget.shadow */
   --shadow-sm: 0 1px 2px 0 rgba(6, 1, 4, 0.55);
   --shadow-md: 0 4px 6px -1px rgba(6, 1, 4, 0.6);
diff --git a/themes/vs-blue.css b/themes/vs-blue.css
index 0b1431b..8e584c9 100644
--- a/themes/vs-blue.css
+++ b/themes/vs-blue.css
@@ -29,10 +29,9 @@
     --error: #e51400;
     --warning: #f6a623;
 
-    /* Bold/italic overrides: deeper variants for readability on light background,
-       picked to match VS Code Light+ token colours. */
+    /* Bold + italic — VS brown-amber + deeper VS blue (cohesive with blue heading on white) */
     --syntax-bold:   #795e26; /* VS function brown-amber */
-    --syntax-italic: #267f99; /* VS type teal */
+    --syntax-italic: #1e40af; /* deeper blue — same family as heading, distinct by depth */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
diff --git a/themes/vue-high-contrast.css b/themes/vue-high-contrast.css
index 696e9e2..cb39a66 100644
--- a/themes/vue-high-contrast.css
+++ b/themes/vue-high-contrast.css
@@ -29,6 +29,10 @@
     --error: #ff5252;
     --warning: #ffb74d;
 
+    /* Bold + italic — warm amber + lighter Vue green (cohesive with green heading) */
+    --syntax-bold:   #ffb74d; /* warm amber */
+    --syntax-italic: #86efac; /* lighter green — same family as heading, distinct by luminance */
+
     /* Shadows - deeper for high contrast */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.7);