Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

style(theme): refresh dark theme palette and control contrast

Browse Source 
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)
This commit is contained in:
Christoph
2026-08-23 22:20:25 +02:00
parent 7d3288a7ef
commit 3477070ec3
1 changed files with 173 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+173 -62
View File
@@ -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; }