From fc03fa62163c29f7ea6c8ec247f3a99157c32c85 Mon Sep 17 00:00:00 2001 From: Jokin Date: Fri, 14 Aug 2026 14:00:01 +0200 Subject: [PATCH] Make the darker tone true-black AMOLED MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- docs/architecture.md | 5 ++++- ui/src/index.html | 4 ++-- ui/src/styles.css | 21 +++++++++++++-------- 3 files changed, 19 insertions(+), 11 deletions(-) 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%); } }