From 3477070ec3b862d15c50185121460c253334d683 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Sun, 23 Aug 2026 22:20:25 +0200
Subject: [PATCH] style(theme): refresh dark theme palette and control contrast

Update the dark theme tokens and UI surfaces to improve legibility
and clarify interactive boundaries across the app. Controls such as
buttons, inputs, and focus outlines were standardized and simplified
to reduce visual noise while preserving hierarchy.

- Overhaul color tokens and surface backgrounds for consistent tones
- Simplify primary button treatment and adjust focus/outline behavior
- Add targeted dark-mode rules to separate chrome (tabs, toolbars)
---
 src/app.css | 235 ++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 173 insertions(+), 62 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4ef92c9..c470f9a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,57 +1,57 @@
 @import "tailwindcss";
 
 @theme {
-  --color-ink: #edf3ff;
-  --color-ink-muted: #b1bad0;
-  --color-ink-faint: #6f7c96;
-  --color-ink-dim: #8895ad;
-  --color-ink-quiet: #98a4bb;
+  --color-ink: #f0f1f2;
+  --color-ink-muted: #c1c3c6;
+  --color-ink-faint: #7f8389;
+  --color-ink-dim: #9da1a6;
+  --color-ink-quiet: #aeb1b5;
 
-  --color-surface: rgba(18, 23, 34, 0.88);
-  --color-surface-alt: #090d14;
-  --color-surface-dim: rgba(15, 20, 30, 0.94);
-  --color-surface-hover: rgba(36, 45, 64, 0.78);
-  --color-surface-raised: rgba(23, 29, 43, 0.92);
-  --color-surface-solid: #171d2b;
+  --color-surface: #2b2e34;
+  --color-surface-alt: #1b1c1e;
+  --color-surface-dim: #2e3137;
+  --color-surface-hover: #363a41;
+  --color-surface-raised: #32363d;
+  --color-surface-solid: #222328;
 
-  --color-border: rgba(90, 111, 154, 0.3);
-  --color-border-subtle: rgba(226, 232, 240, 0.08);
-  --color-border-input: rgba(77, 182, 214, 0.26);
+  --color-border: #3a3e45;
+  --color-border-subtle: #34383e;
+  --color-border-input: #465159;
 
-  --color-primary: #6f8cff;
-  --color-primary-dark: #5d74e8;
-  --color-accent: #4db6d6;
+  --color-primary: #25a7c7;
+  --color-primary-dark: #188ca9;
+  --color-accent: #2eb5d1;
 
-  --color-bar: rgba(7, 10, 16, 0.94);
-  --color-bar-text: #f1f5ff;
-  --color-bar-muted: #7f8ba3;
+  --color-bar: #292c30;
+  --color-bar-text: #f0f1f2;
+  --color-bar-muted: #8b8f94;
 
   --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
 }
 
 :root {
   --app-color-scheme: dark;
-  --app-bg: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%);
-  --app-button-bg: linear-gradient(180deg, rgba(36, 45, 64, 0.92), rgba(22, 28, 42, 0.94));
-  --app-input-bg: rgba(10, 14, 22, 0.82);
-  --app-select-option-bg: #171d2b;
+  --app-bg: #222328;
+  --app-button-bg: #32363d;
+  --app-input-bg: #22252a;
+  --app-select-option-bg: #32363d;
   --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%);
   --app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
-  --app-dialog-backdrop: rgba(4, 7, 12, 0.58);
-  --app-dialog-bg: #101622;
-  --app-dialog-chrome: #141b29;
+  --app-dialog-backdrop: rgba(12, 13, 15, 0.7);
+  --app-dialog-bg: #22252a;
+  --app-dialog-chrome: #2b2e34;
   --app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32);
-  --app-settings-row-bg: #141b29;
-  --app-scrollbar-thumb: #303a4f;
-  --app-scrollbar-thumb-hover: #44506a;
+  --app-settings-row-bg: #2b2e34;
+  --app-scrollbar-thumb: #4a4e55;
+  --app-scrollbar-thumb-hover: #60656d;
 
-  --code-surface: #111321;
-  --code-surface-raised: #171a2b;
-  --code-surface-subtle: #0d101a;
-  --code-surface-muted: #10131e;
-  --code-surface-meta: #0c0e18;
-  --code-input-bg: #0b0e18;
-  --code-hover-bg: #151a2b;
+  --code-surface: #222328;
+  --code-surface-raised: #2b2e34;
+  --code-surface-subtle: #1f2024;
+  --code-surface-muted: #26282d;
+  --code-surface-meta: #1d1e22;
+  --code-input-bg: #22252a;
+  --code-hover-bg: #30343a;
   --code-add-text: #5dd88a;
   --code-add-strong: #4eca76;
   --code-add-bg: rgba(78, 202, 118, 0.09);
@@ -190,7 +190,7 @@
   }
   input:focus, textarea:focus, select:focus {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.22), 0 0 32px rgba(65, 209, 255, 0.08);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 7%, transparent);
   }
   input { height: 34px; padding: 0 11px; }
   textarea { resize: vertical; min-height: 132px; padding: 10px 11px; line-height: 1.45; }
@@ -334,15 +334,15 @@
   }
 
   .btn-primary {
-    border-color: rgba(111, 140, 255, 0.72);
+    border-color: color-mix(in srgb, var(--color-primary) 82%, white);
     color: #ffffff;
-    background: linear-gradient(135deg, #5f7df2 0%, #238eb4 100%);
-    box-shadow: 0 10px 24px rgba(77, 182, 214, 0.16);
+    background: var(--color-primary);
+    box-shadow: none;
     font-weight: 600;
   }
   .btn-primary:hover:not(:disabled) {
-    border-color: rgba(77, 182, 214, 0.78);
-    background: linear-gradient(135deg, #6f8cff 0%, #2da0c7 100%);
+    border-color: color-mix(in srgb, var(--color-accent) 78%, white);
+    background: var(--color-accent);
     color: #ffffff;
   }
 
@@ -6227,22 +6227,23 @@
   --ui-radius-sm: 5px;
   --ui-control-height: 32px;
   --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
-  --app-bg: #0d1118;
-  --app-button-bg: #171d27;
-  --app-input-bg: #101620;
+  --app-bg: #222328;
+  --app-button-bg: #32363d;
+  --app-input-bg: #22252a;
   --app-panel-highlight: none;
   --app-panel-shadow: none;
-  --color-surface: #111720;
-  --color-surface-alt: #0d121a;
-  --color-surface-dim: #141b25;
-  --color-surface-hover: #1b2431;
-  --color-surface-raised: #151c27;
-  --color-surface-solid: #111720;
-  --color-border: #2a3546;
-  --color-border-subtle: #222c3a;
-  --color-primary: #4d8dff;
-  --color-primary-dark: #3477ed;
-  --color-accent: #65a2ff;
+  --color-surface: #2b2e34;
+  --color-surface-alt: #1b1c1e;
+  --color-surface-dim: #2e3137;
+  --color-surface-hover: #363a41;
+  --color-surface-raised: #32363d;
+  --color-surface-solid: #222328;
+  --color-border: #3a3e45;
+  --color-border-subtle: #34383e;
+  --color-border-input: #465159;
+  --color-primary: #25a7c7;
+  --color-primary-dark: #188ca9;
+  --color-accent: #2eb5d1;
 }
 
 :root[data-theme="light"] {
@@ -6279,8 +6280,8 @@ button:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
-  outline-offset: 1px;
+  outline: 2px solid color-mix(in srgb, var(--color-accent) 88%, transparent);
+  outline-offset: 2px;
 }
 input, textarea, select { border-radius: var(--ui-radius-sm); }
 input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
@@ -6289,7 +6290,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .shell-body { gap: 0; padding: 0; }
 .titlebar {
   border-bottom: 1px solid var(--color-border-subtle);
-  background: var(--color-surface-solid);
+  background: var(--color-bar);
 }
 .titlebar-brand { min-width: 140px; padding-left: 14px; border-right: 0; font-size: 14px; }
 .titlebar-brand-icon,
@@ -6332,7 +6333,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   border: 0;
   border-bottom: 1px solid var(--color-border);
   border-radius: 0;
-  background: var(--color-surface-solid);
+  background: var(--color-surface-raised);
 }
 .repo-toolbar-sync { grid-template-rows: 10px 36px; }
 .repo-toolbar-group-label { padding-left: 1px; font-size: 8.5px; letter-spacing: .13em; }
@@ -6348,7 +6349,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   background: var(--color-border-subtle);
   row-gap: 0;
 }
-.left-sidebar { background: var(--color-surface-solid); }
+.left-sidebar { background: var(--color-surface); }
 .main-panel { border: 0; border-radius: 0; background: var(--color-surface-solid); }
 .history-aside { background: var(--color-border-subtle); row-gap: 0; }
 
@@ -6360,6 +6361,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   backdrop-filter: none;
 }
 .left-sidebar .panel + .panel { border-top: 1px solid var(--color-border); }
+.left-sidebar .panel { background: var(--color-surface); }
 .section-head {
   min-height: 50px;
   padding: 8px 12px;
@@ -6720,6 +6722,115 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .repo-section > header { background: var(--color-surface-dim); }
 .repo-row-main:hover:not(:disabled) { background: var(--color-surface-hover); }
 
+/* Dark control contrast --------------------------------------------------
+   Keep GitKraken's restrained graphite palette while making interactive
+   boundaries and text states unambiguous on every dark surface. */
+:root:not([data-theme="light"]) .btn-primary {
+  border-color: #2eb5d1;
+  color: #ffffff;
+  background: #126f84;
+}
+:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) {
+  border-color: #55c5dc;
+  color: #ffffff;
+  background: #147c94;
+}
+:root:not([data-theme="light"]) .btn-secondary {
+  border-color: #596169;
+  color: #d7dadc;
+  background: #32363d;
+}
+:root:not([data-theme="light"]) .btn-secondary:hover:not(:disabled) {
+  border-color: #707982;
+  color: #ffffff;
+  background: #41464d;
+}
+:root:not([data-theme="light"]) input,
+:root:not([data-theme="light"]) textarea,
+:root:not([data-theme="light"]) select,
+:root:not([data-theme="light"]) .select-menu-trigger {
+  border-color: #596169;
+}
+:root:not([data-theme="light"]) input:hover:not(:disabled),
+:root:not([data-theme="light"]) textarea:hover:not(:disabled),
+:root:not([data-theme="light"]) select:hover:not(:disabled),
+:root:not([data-theme="light"]) .select-menu-trigger:hover:not(:disabled) {
+  border-color: #707982;
+}
+:root:not([data-theme="light"]) input:focus,
+:root:not([data-theme="light"]) textarea:focus,
+:root:not([data-theme="light"]) select:focus,
+:root:not([data-theme="light"]) .select-menu.open .select-menu-trigger {
+  border-color: var(--color-accent);
+}
+:root:not([data-theme="light"]) .repo-action-group,
+:root:not([data-theme="light"]) .dialog-icon-button {
+  border-color: #535a62;
+}
+:root:not([data-theme="light"]) .repo-action:hover:not(:disabled),
+:root:not([data-theme="light"]) .repo-action.active,
+:root:not([data-theme="light"]) .dialog-icon-button:hover:not(:disabled) {
+  border-color: #707982;
+  background: #3b4047;
+}
+
+/* Dark app chrome separation -------------------------------------------
+   Tabs, command toolbar and workspace should read as three adjacent
+   layers instead of one uninterrupted gray strip. */
+:root:not([data-theme="light"]) .repo-tabbar {
+  border-bottom-color: #505760;
+  background: #26292f;
+  box-shadow:
+    inset 0 -1px 0 #191b1f,
+    0 1px 0 rgba(255, 255, 255, 0.035);
+}
+:root:not([data-theme="light"]) .repo-tabs-scroll {
+  border-left-color: #454b53;
+}
+:root:not([data-theme="light"]) .repo-tab-wrap {
+  border-right-color: #454b53;
+  background: #292c32;
+}
+:root:not([data-theme="light"]) .repo-tab-wrap:hover {
+  background: #30343a;
+}
+:root:not([data-theme="light"]) .repo-tab-wrap.active,
+:root:not([data-theme="light"]) .repo-tab.management.active {
+  background: #343941;
+  box-shadow:
+    inset 0 -3px 0 var(--color-accent),
+    inset 1px 0 0 #4c535b,
+    inset -1px 0 0 #4c535b,
+    inset 0 1px 0 rgba(255, 255, 255, 0.045);
+}
+:root:not([data-theme="light"]) .repo-tab-add {
+  border-left-color: #454b53;
+  background: #292c32;
+}
+:root:not([data-theme="light"]) .repo-toolbar {
+  border-top: 1px solid #424850;
+  border-bottom-color: #505760;
+  background: #30343a;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 2px 0 #191b1f;
+}
+:root:not([data-theme="light"]) .repo-action-group {
+  border-color: #596169;
+  background: #292d32;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+:root:not([data-theme="light"]) .repo-action-group > .repo-action,
+:root:not([data-theme="light"]) .repo-action-group > .repo-history-wrap > .repo-action {
+  border-right-color: #484e55;
+}
+:root:not([data-theme="light"]) .repo-toolbar-divider {
+  background: #555c64;
+}
+:root:not([data-theme="light"]) .workspace {
+  box-shadow: inset 0 1px 0 #17191c;
+}
+
 @media (max-width: 1180px) {
   .repo-action { padding-inline: 10px; }
   .repo-toolbar-divider { margin-inline: 2px; }