From 905ceebc06661d9321c075858e837a2cf3a974f2 Mon Sep 17 00:00:00 2001 From: kristianwind Date: Thu, 3 Sep 2026 17:42:55 +0200 Subject: [PATCH] fix(theme): match Charcoal to Apple Notes' sampled colours MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Kristian sent the exact values; the first Charcoal was a neutral grey guess and missed them. Now: three panel greys, lightest sidebar (#2d3133) to darkest editor (#1e1e1e) with the list (#242b2e) between — the reverse of the usual sunken-is-darkest order, so the editor takes its own --editor-bg rather than sharing the list's surface. The accent is amber: the selected menu item is solid #ffce35 with dark text, a selected note is gold #a78c26 with dark text, and the section headings drop to a quiet grey (#8a8e90). Each per-element colour is a fallback token only Charcoal sets, so every other theme reads through to the shared token unchanged. Verified the computed values land on Kristian's samples exactly. Co-Authored-By: Claude Opus 4.8 --- web/src/app.css | 47 +++++++++++++++++---------- web/src/lib/components/Sidebar.svelte | 9 +++-- web/src/routes/noter/+page.svelte | 22 ++++++++++--- 3 files changed, 54 insertions(+), 24 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index 7a3e702..51b7d69 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -210,27 +210,38 @@ --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.4); } -/* Kul — a neutral dark grey, the greys of Apple Notes rather than the default's - faint green cast. The same green accent, so it still reads as verdande; only the - grounds, surfaces and inks turn to plain grey. */ +/* Kul — the greys of Apple Notes' dark mode, to Kristian's own sampled values. + Three panel greys, lightest sidebar to darkest editor — the reverse of the usual + sunken-is-darkest order, which is why the editor gets its own --editor-bg rather + than sharing --surface-raised with the list. The accent turns amber, and the + selected menu item, selected note and section headings each get a fallback token + so this theme can hit its colours without touching any other. */ [data-theme='charcoal'] { - --ground: #1c1c1c; - --surface: #232323; - --surface-raised: #2b2b2b; - --surface-sunken: #171717; - --line: #363636; - --line-strong: #474747; + --ground: #1e1e1e; + --surface: #2a3033; + --surface-raised: #242b2e; /* the note list */ + --surface-sunken: #2d3133; /* the menu / sidebar — lightest here */ + --line: #34393b; + --line-strong: #414749; - --ink: #ededed; - --ink-muted: #a4a4a4; - /* Light enough to clear 4.5:1 against the ground — the quiet tier of dates and - counts is the first to disappear if it is too dim. */ - --ink-faint: #8e8e8e; + --ink: #ffffff; + --ink-muted: #dcdcdc; + --ink-faint: #9ba0a2; - --accent: #5fbf8f; - --accent-hover: #6fcf9f; - --accent-sunken: #23332b80; - --accent-ink: #0d1411; + /* Amber, Apple's Notes accent. The bright value is the selected menu item; the + dark text rides on top of it. */ + --accent: #ffce35; + --accent-hover: #ffd75a; + --accent-sunken: #ffce35; + --accent-ink: #1e1e1e; + + /* Per-element, and only here — every other theme falls back to the shared token + in the var() calls that read these. */ + --editor-bg: #1e1e1e; /* the text field, a shade below the list */ + --note-on-bg: #a78c26; /* a selected note in the list — gold */ + --note-on-ink: #1e1e1e; /* dark text on the gold */ + --nav-active-ink: #1e1e1e; /* dark text on the amber menu item */ + --heading-ink: #8a8e90; /* PROJEKTER and the group names — quiet grey */ --p1: #cf6b6b; --p2: #d69f5c; diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte index 4b27051..fd0cccf 100644 --- a/web/src/lib/components/Sidebar.svelte +++ b/web/src/lib/components/Sidebar.svelte @@ -1336,7 +1336,9 @@ h2 { font-size: var(--menu-size); font-weight: 600; - color: var(--ink); + /* Kul sets these headings to a quiet grey (--heading-ink); every other theme + falls back to the reading ink and keeps them bold and bright. */ + color: var(--heading-ink, var(--ink)); } /* The heading's mark, in the muted ink so the bold name still leads. Sized and @@ -1591,7 +1593,10 @@ in both themes. */ a.active { background: var(--accent-sunken); - color: var(--ink); + /* On a solid accent (Kul's amber menu item) the label goes dark via + --nav-active-ink; on the tinted accent-sunken every other theme uses, it + falls back to the reading ink. */ + color: var(--nav-active-ink, var(--ink)); font-weight: 600; } diff --git a/web/src/routes/noter/+page.svelte b/web/src/routes/noter/+page.svelte index 1a15b9b..45d89b4 100644 --- a/web/src/routes/noter/+page.svelte +++ b/web/src/routes/noter/+page.svelte @@ -1480,8 +1480,20 @@ } .row.on { - background: var(--surface-raised); - color: var(--ink); + background: var(--note-on-bg, var(--surface-raised)); + color: var(--note-on-ink, var(--ink)); + } + + /* On a themed selection colour (Kul's gold), the row's own quieter tiers go dark + too, or the date and the filed line vanish into it. Other themes have no + --note-on-ink, so these fall back to their normal muted inks. */ + .row.on .when, + .row.on .filed { + color: var(--note-on-ink, var(--ink-muted)); + } + + .row.on .filed-icon { + color: var(--note-on-ink, var(--ink-faint)); } /* Samme størrelse som en opgavetitel. En note og en opgave er to ting af samme @@ -1577,8 +1589,10 @@ min-height: 0; min-width: 0; /* A nuance lighter than the ground in dark, still white in light — matches - the note list beside it so the two read as one writing surface. */ - background: var(--surface-raised); + the note list beside it so the two read as one writing surface. Kul gives + the text field its own darker grey via --editor-bg; other themes fall back + to the shared surface so the list and the editor stay the same colour. */ + background: var(--editor-bg, var(--surface-raised)); border: 1px solid var(--line); border-radius: var(--radius); /* Luft nok til at teksten ikke rører kanten.