diff --git a/docs/architecture.md b/docs/architecture.md index 06ef2ca..518c827 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -245,7 +245,10 @@ dark neutrals are a **warm gray family (hue 107)** anchored on `#1a1a19` 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. +`#20201f` → `#2e2e2d`. The "darker" tone is true-black AMOLED: `--chrome` AND +`--background` are both `#000` (the frame/content step collapses on purpose), +elevation survives only via `--card`/`--accent`, and `--border`/`--input` go to +16%/18% white because those lines then carry the whole layout. `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 diff --git a/ui/src/index.html b/ui/src/index.html index ae1571a..d1b26f0 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -15,10 +15,10 @@ diff --git a/ui/src/styles.css b/ui/src/styles.css index ca7077f..11fba54 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -105,30 +105,35 @@ } /* Dark tone "darker" (data-dark-tone set by SettingsService; absent = grey "dark"). - Near-black AMOLED palette. Duplicated for forced-dark and system-dark like the - token blocks above — the extra attribute outranks them. */ + True-black AMOLED palette: --chrome collapses into --background on purpose, so + the frame/content step of the default tone disappears and every large surface is + #000 (OLED pixels actually off). Elevation survives only through --card and + --accent; --border/--input are raised to 16%/18% because on pure black those + lines are the only thing defining panes, bars and rows. 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.002 107); + --background: oklch(0 0 0); --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%); + --border: oklch(1 0 0 / 16%); + --input: oklch(1 0 0 / 18%); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light'])[data-dark-tone='darker'] { - --background: oklch(0.141 0.002 107); + --background: oklch(0 0 0); --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%); + --border: oklch(1 0 0 / 16%); + --input: oklch(1 0 0 / 18%); } }