Make the darker tone true-black AMOLED
The darker tone sat at #090908 for --background while --chrome was already pure black, which both inverted the elevation ramp (frame strips darker than the content beside them) and missed the point of an AMOLED tone — only a true #000000 pixel is actually off on OLED. --background now collapses into --chrome at pure black, so the main window, connection manager and editor all render black end to end: panes, bars, sidebar, gutter and textarea. Elevation is kept where it earns its place — dialogs, popovers and toasts stay #181817, hover and selection #272726 — and --border/--input go from 12%/15% to 16%/18% white, since on pure black those lines are the only thing left defining panes, bars and rows. No plumbing needed: buildPreload already bakes data-dark-tone onto every window pre-paint, and tone changes broadcast live to open windows. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
|
||||
+2
-2
@@ -15,10 +15,10 @@
|
||||
<style>
|
||||
html { background: oklch(1 0 0); }
|
||||
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); }
|
||||
html[data-theme='dark'][data-dark-tone='darker'] { background: oklch(0 0 0); }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
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); }
|
||||
html:not([data-theme='light'])[data-dark-tone='darker'] { background: oklch(0 0 0); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
+13
-8
@@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user