jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Retone dark theme to warm gray #1a1a19 with layered surfaces

Browse Source 
The dark palette was shadcn's cool zinc (#202023, hue ~286). Anchor it on
#1a1a19 instead — cds gray-830, a warm near-neutral (hue 107) — and retone
the whole dark neutral family to match, since a warm background under cool
panels clashes. Lightness ramp is preserved; chromatic tokens (destructive,
success, icon hues, accent formulas) and the light palette are untouched.

Also introduce --chrome so the app isn't one flat tone: frame strips (tab
bar, status bar, transfer bar, editor/manager header+footer, connection
sidebar) now sit one step below the content panes, with popovers and hover
above them — the standard dark-UI elevation order.

Dark ramp: #151514 chrome, #1a1a19 content, #20201f card, #2e2e2d hover;
the "darker" tone drops chrome to true black. Light gains only a zinc-50
chrome step.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-08-14 13:20:47 +02:00
co-authored by Claude
parent 697f7f22c8
commit e4ba846719
8 changed files with 77 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture.md
+10 -1
View File
@@ -239,7 +239,16 @@ would float over editor windows).
`ui/src/styles.css`: shadcn-style OKLCH tokens; dark values are duplicated in
`:root[data-theme='dark']` AND a `prefers-color-scheme` media block (system
mode) — every dark token change goes in BOTH. Accent tones: one
mode) — every dark token change goes in BOTH. Light is the zinc family; the
dark neutrals are a **warm gray family (hue 107)** anchored on `#1a1a19`
(`--background`) — retoning one dark neutral means retoning them all, or warm
and cool surfaces clash. Surface elevation ramp, both themes: `--chrome`
(frame strips) sits *below* `--background` (content panes) < `--card`
(popovers/dialogs) < `--accent` (hover). Dark ramp `#151514` → `#1a1a19` →
`#20201f` → `#2e2e2d`; the "darker" tone drops `--chrome` to true black.
`bg-chrome` is on the tab bar, status bar, transfer bar, the editor/manager
header+footer strips and the manager's connection sidebar; panel-internal
toolbars deliberately stay on `--background`. Accent tones: one
`--tone-h/--tone-c` line per tone + three formula blocks derive `--primary`,
`--ring`, `--cursor-tint`; graphite = attribute removed = pristine zinc.
`@theme inline` maps tokens to Tailwind utilities (`bg-primary`,
ui/src/app/connection-manager/connection-manager.html
+3 -3
View File
@@ -2,7 +2,7 @@
<!-- header: on macOS this row IS the titlebar (hiddenInset + drag region),
elsewhere the native titlebar sits above and this is a compact strip -->
<header
class="flex shrink-0 items-center gap-2 border-b border-border pr-2"
class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome pr-2"
[class.h-10]="isMacChrome"
[class.pl-24]="isMacChrome"
[class.electrobun-webkit-app-region-drag]="isMacChrome"
@@ -29,7 +29,7 @@
<div class="flex min-h-0 flex-1">
<!-- stacks + connections list -->
<div class="flex w-72 shrink-0 flex-col border-r border-border bg-muted/30">
<div class="flex w-72 shrink-0 flex-col border-r border-border bg-chrome">
<div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
<button
(click)="newConnection()"
@@ -327,7 +327,7 @@
}
</div>
<div class="flex items-center gap-2 border-t border-border px-4 py-2.5">
<div class="flex items-center gap-2 border-t border-border bg-chrome px-4 py-2.5">
<button
(click)="deleteCurrent()"
class="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-destructive"
ui/src/app/editor-window/editor-window.html
+3 -3
View File
@@ -13,7 +13,7 @@
<!-- header: on macOS this row IS the titlebar (hiddenInset + drag region),
elsewhere the native titlebar sits above and this is a compact strip -->
<header
class="flex shrink-0 items-center gap-2 border-b border-border pr-2"
class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome pr-2"
[class.h-10]="isMacChrome"
[class.pl-24]="isMacChrome"
[class.electrobun-webkit-app-region-drag]="isMacChrome"
@@ -46,7 +46,7 @@
</header>
@if (findOpen()) {
<div class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
<div class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome px-3 py-1.5">
<ng-icon name="mynaSearch" size="0.85rem" class="shrink-0 text-muted-foreground" />
<input
#findBox
@@ -140,7 +140,7 @@
></textarea>
</div>
<footer class="flex shrink-0 items-center gap-2 border-t border-border px-4 py-2">
<footer class="flex shrink-0 items-center gap-2 border-t border-border bg-chrome px-4 py-2">
<span class="text-[11px] text-muted-foreground">{{ i18n.t('editor.shortcuts', { mod: modLabel }) }}</span>
<span class="text-[11px] text-muted-foreground">·</span>
<span class="text-[11px] tabular-nums text-muted-foreground">
ui/src/app/status-bar/status-bar.ts
+1 -1
View File
@@ -12,7 +12,7 @@ import { TransfersService } from '../transfers.service';
imports: [NgIcon],
template: `
<div
class="flex h-6 items-center justify-between gap-4 border-t border-border px-3 text-[11px] text-muted-foreground select-none"
class="flex h-6 items-center justify-between gap-4 border-t border-border bg-chrome px-3 text-[11px] text-muted-foreground select-none"
>
<!-- transfers summary; click toggles the detailed list -->
<button
ui/src/app/tab-bar/tab-bar.ts
+1 -1
View File
@@ -41,7 +41,7 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
<!-- On macOS this row IS the titlebar (hiddenInset): taller, padded past the
traffic lights, and draggable. Elsewhere it's a normal compact row. -->
<div
class="relative flex items-center gap-0.5 border-b border-border pr-1.5 electrobun-webkit-app-region-drag"
class="relative flex items-center gap-0.5 border-b border-border bg-chrome pr-1.5 electrobun-webkit-app-region-drag"
[class.h-10]="isMacChrome"
[class.pl-24]="isMacChrome"
[class.pl-1.5]="!isMacChrome"
ui/src/app/transfer-bar/transfer-bar.html
+2 -2
View File
@@ -1,5 +1,5 @@
@if (transfers.expanded() && transfers.hasJobs()) {
<div class="flex items-center justify-between border-t border-border px-3 py-1 text-[11px] text-muted-foreground">
<div class="flex items-center justify-between border-t border-border bg-chrome px-3 py-1 text-[11px] text-muted-foreground">
<span>
{{ i18n.t('transfer.summary', { active: transfers.activeJobs().length, finished: transfers.finishedJobs().length }) }}
</span>
@@ -11,7 +11,7 @@
<ng-icon name="mynaTrash" size="0.75rem" /> {{ i18n.t('transfer.clearFinished') }}
</button>
</div>
<div class="max-h-40 overflow-y-auto border-t border-border">
<div class="max-h-40 overflow-y-auto border-t border-border bg-chrome">
@for (job of transfers.jobs(); track job.id) {
<div class="flex items-center gap-2 px-3 py-1.5 text-xs">
<ng-icon [name]="stateIcon(job)" size="0.95rem" [class]="stateClass(job)" />
ui/src/index.html
+4 -4
View File
@@ -14,11 +14,11 @@
src/bun/windows.ts) so forced themes are correct at first paint. -->
<style>
html { background: oklch(1 0 0); }
html[data-theme='dark'] { background: oklch(0.245 0.005 285.9); }
html[data-theme='dark'][data-dark-tone='darker'] { background: oklch(0.141 0.005 285.823); }
html[data-theme='dark'] { background: oklch(0.2178 0.002 107); }
html[data-theme='dark'][data-dark-tone='darker'] { background: oklch(0.141 0.002 107); }
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) { background: oklch(0.245 0.005 285.9); }
html:not([data-theme='light'])[data-dark-tone='darker'] { background: oklch(0.141 0.005 285.823); }
html:not([data-theme='light']) { background: oklch(0.2178 0.002 107); }
html:not([data-theme='light'])[data-dark-tone='darker'] { background: oklch(0.141 0.002 107); }
}
</style>
</head>
ui/src/styles.css
+53 -42
View File
@@ -1,11 +1,17 @@
@import "tailwindcss";
/* shadcn-style theme tokens (zinc placeholder palette — tweak freely).
The app follows the OS light/dark preference automatically. */
/* shadcn-style theme tokens. Light stays the zinc family; the dark neutrals are a
warm gray family (hue ~107) anchored on #1a1a19 — see the dark blocks below.
The app follows the OS light/dark preference automatically.
Surface elevation ramp (both themes): --chrome (frame strips: tab/transfer/status
bars, window toolbars) sits BELOW --background (content panes), which sits below
--card (popovers, dialogs), which sits below --accent (hover). */
:root {
/* Native UI (scrollbars, form controls) follows the OS unless a theme is forced. */
color-scheme: light dark;
--background: oklch(1 0 0);
--chrome: oklch(0.977 0.001 286.375);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
@@ -41,24 +47,25 @@
:root[data-theme='dark'] {
color-scheme: dark;
--background: oklch(0.245 0.005 285.9);
--foreground: oklch(0.985 0 0);
--card: oklch(0.274 0.006 286.033);
--card-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.33 0.01 285.9);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.33 0.01 285.9);
--muted-foreground: oklch(0.72 0.015 286.07);
--accent: oklch(0.33 0.01 285.9);
--accent-foreground: oklch(0.985 0 0);
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.1953 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.245 0.002 107);
--card-foreground: oklch(0.982 0.003 107);
--primary: oklch(0.92 0.004 107);
--primary-foreground: oklch(0.21 0.002 107);
--secondary: oklch(0.302 0.003 107);
--secondary-foreground: oklch(0.982 0.003 107);
--muted: oklch(0.302 0.003 107);
--muted-foreground: oklch(0.715 0.012 107);
--accent: oklch(0.302 0.003 107);
--accent-foreground: oklch(0.982 0.003 107);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--destructive-foreground: oklch(0.982 0.003 107);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.016 285.938);
--ring: oklch(0.552 0.01 107);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
--icon-image: oklch(0.76 0.11 295);
@@ -69,24 +76,25 @@
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--background: oklch(0.245 0.005 285.9);
--foreground: oklch(0.985 0 0);
--card: oklch(0.274 0.006 286.033);
--card-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.33 0.01 285.9);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.33 0.01 285.9);
--muted-foreground: oklch(0.72 0.015 286.07);
--accent: oklch(0.33 0.01 285.9);
--accent-foreground: oklch(0.985 0 0);
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.1953 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.245 0.002 107);
--card-foreground: oklch(0.982 0.003 107);
--primary: oklch(0.92 0.004 107);
--primary-foreground: oklch(0.21 0.002 107);
--secondary: oklch(0.302 0.003 107);
--secondary-foreground: oklch(0.982 0.003 107);
--muted: oklch(0.302 0.003 107);
--muted-foreground: oklch(0.715 0.012 107);
--accent: oklch(0.302 0.003 107);
--accent-foreground: oklch(0.982 0.003 107);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--destructive-foreground: oklch(0.982 0.003 107);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.016 285.938);
--ring: oklch(0.552 0.01 107);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
--icon-image: oklch(0.76 0.11 295);
@@ -100,23 +108,25 @@
Near-black AMOLED palette. Duplicated for forced-dark and system-dark like the
token blocks above — the extra attribute outranks them. */
:root[data-theme='dark'][data-dark-tone='darker'] {
--background: oklch(0.141 0.005 285.823);
--card: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--background: oklch(0.141 0.002 107);
--chrome: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
--muted: oklch(0.274 0.003 107);
--muted-foreground: oklch(0.705 0.012 107);
--accent: oklch(0.274 0.003 107);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light'])[data-dark-tone='darker'] {
--background: oklch(0.141 0.005 285.823);
--card: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--background: oklch(0.141 0.002 107);
--chrome: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
--muted: oklch(0.274 0.003 107);
--muted-foreground: oklch(0.705 0.012 107);
--accent: oklch(0.274 0.003 107);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
}
@@ -124,6 +134,7 @@
@theme inline {
--color-background: var(--background);
--color-chrome: var(--chrome);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);