Shade the window frame, panel headers and file rows apart
Every surface was one flat shade. The window now reads in layers: a darker frame (tab, transfer and status bars), a lighter header strip per file panel (session strip, path bar, column headers), the file list, and popovers above them all. The active panel's header carries a tint of the accent, and odd file rows get a faint zebra stripe (per row, so it stays aligned at any interface scale; the cursor and selection replace it). Hover and selected states become a translucent overlay: an opaque hover vanished on a surface of its own lightness (light's header strip). Dark cards and badges step up so popovers never read darker than the strip they cover. AMOLED is unchanged: every new layer collapses to black there. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
+45
-16
@@ -4,14 +4,24 @@
|
||||
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). */
|
||||
Surface layers, each its own shade so the window reads as parts: --chrome
|
||||
(frame strips: tab/transfer/status bars, window header/footer strips),
|
||||
--toolbar (the file-panel header strip — toolbar, path bar, column header —
|
||||
and secondary toolbars), --background (content: file lists, editor text,
|
||||
forms; --row-alt stripes every other file row) and --card (popovers,
|
||||
dialogs). Dark climbs frame < list < header < card; light steps greys out
|
||||
from white content: frame < header < list = card. --accent is a translucent
|
||||
overlay, not a surface: hover/selected states must read on every layer, and
|
||||
an opaque hover vanishes on a surface of its own lightness. */
|
||||
: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);
|
||||
--chrome: oklch(0.935 0.002 286.375);
|
||||
--toolbar: oklch(0.965 0.001 286.375);
|
||||
/* the active panel's header strip: a whisper of the accent (graphite: neutral) */
|
||||
--toolbar-active: color-mix(in oklab, var(--primary) 8%, var(--toolbar));
|
||||
--row-alt: oklch(0.978 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);
|
||||
@@ -21,7 +31,7 @@
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent: oklch(0.21 0.006 285.885 / 6%);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
@@ -48,17 +58,21 @@
|
||||
:root[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
--background: oklch(0.2178 0.002 107);
|
||||
--chrome: oklch(0.1953 0.002 107);
|
||||
--chrome: oklch(0.165 0.002 107);
|
||||
--toolbar: oklch(0.265 0.002 107);
|
||||
--toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
|
||||
--row-alt: oklch(0.232 0.002 107);
|
||||
--foreground: oklch(0.982 0.003 107);
|
||||
--card: oklch(0.245 0.002 107);
|
||||
/* above --toolbar, so a popover never reads darker than the strip it covers */
|
||||
--card: oklch(0.285 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: oklch(0.335 0.003 107);
|
||||
--muted-foreground: oklch(0.715 0.012 107);
|
||||
--accent: oklch(0.302 0.003 107);
|
||||
--accent: oklch(1 0 0 / 9%);
|
||||
--accent-foreground: oklch(0.982 0.003 107);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive-foreground: oklch(0.982 0.003 107);
|
||||
@@ -77,17 +91,20 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
--background: oklch(0.2178 0.002 107);
|
||||
--chrome: oklch(0.1953 0.002 107);
|
||||
--chrome: oklch(0.165 0.002 107);
|
||||
--toolbar: oklch(0.265 0.002 107);
|
||||
--toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
|
||||
--row-alt: oklch(0.232 0.002 107);
|
||||
--foreground: oklch(0.982 0.003 107);
|
||||
--card: oklch(0.245 0.002 107);
|
||||
--card: oklch(0.285 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: oklch(0.335 0.003 107);
|
||||
--muted-foreground: oklch(0.715 0.012 107);
|
||||
--accent: oklch(0.302 0.003 107);
|
||||
--accent: oklch(1 0 0 / 9%);
|
||||
--accent-foreground: oklch(0.982 0.003 107);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive-foreground: oklch(0.982 0.003 107);
|
||||
@@ -109,12 +126,18 @@
|
||||
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. */
|
||||
lines are the only thing defining panes, bars and rows. The surface layers
|
||||
(--toolbar, its active tint, --row-alt) collapse to black too: AMOLED stays
|
||||
one flat black on purpose, so every NEW surface token needs a line here.
|
||||
Duplicated for forced-dark and system-dark like the token blocks above — the
|
||||
extra attribute outranks them. Never declare a token both here and in the
|
||||
accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
|
||||
:root[data-theme='dark'][data-dark-tone='darker'] {
|
||||
--background: oklch(0 0 0);
|
||||
--chrome: oklch(0 0 0);
|
||||
--toolbar: oklch(0 0 0);
|
||||
--toolbar-active: oklch(0 0 0);
|
||||
--row-alt: 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);
|
||||
@@ -127,6 +150,9 @@
|
||||
:root:not([data-theme='light'])[data-dark-tone='darker'] {
|
||||
--background: oklch(0 0 0);
|
||||
--chrome: oklch(0 0 0);
|
||||
--toolbar: oklch(0 0 0);
|
||||
--toolbar-active: oklch(0 0 0);
|
||||
--row-alt: 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);
|
||||
@@ -140,6 +166,9 @@
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-chrome: var(--chrome);
|
||||
--color-toolbar: var(--toolbar);
|
||||
--color-toolbar-active: var(--toolbar-active);
|
||||
--color-row-alt: var(--row-alt);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
Reference in New Issue
Block a user