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

Make the darker tone true-black AMOLED

Browse Source 
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:
jgamboa
2026-08-14 14:00:01 +02:00
co-authored by Claude
parent e4ba846719
commit fc03fa6216
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/index.html
+2 -2
View File
@@ -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>
ui/src/styles.css
+13 -8
View File
@@ -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%);
}
}