Probieren Sie den Schalter oben auf dieser Seite aus. Zehn Paletten, hell und dunkel, und jede Marke, jeder Chip und jeder Artikelkopf auf der Website färbt sich um, dieselben Plätze, in denen auch das Pixelsystem gezeichnet ist. Am Umfärben ist überhaupt kein JavaScript beteiligt. Die Arbeit steckt darin, nie eine Komponente eine Farbe nennen zu lassen.
Alles ist ein Platz#
Eine Regel, im Review durchgesetzt: Eine Komponente darf var(--accent) oder var(--c1)…var(--c6) verwenden, und sie darf mit color-mix() daraus ableiten. Sie darf keinen Hex-Wert enthalten. Eine Palette ist dann nur noch acht Deklarationen.
:root{
--accent-raw:#1F35E6;
--accent:var(--accent-raw);
--accent-deep:color-mix(in srgb,var(--accent) 74%,#000);
--accent-soft:color-mix(in srgb,var(--accent) 46%,var(--bg));
}
[data-palette="ember"]{
--accent-raw:#D8502E;
--c1:#D8502E; --c2:#E8912A; --c3:#B5372E;
--c4:#EFB13C; --c5:#8C4A3E; --c6:#3E2A28;
}color-mix() ist das, was die neunzigzeilige Palettendatei überflüssig macht. Jede Aufhellung, jede Abdunklung und jede Haarlinie leitet sich aus dem einen Farbton ab, den die Palette deklariert, und damit kann eine neue Palette auch keine davon vergessen.
Das Aufblitzen, und wie man es wirklich behebt#
Die Einstellung liegt im localStorage. React liest sie nach der Hydration, und das ist rund 150 ms zu spät: lange genug, dass eine helle Seite malt und dann auf Dunkel umspringt. Jeder Trick, der das mit einem Übergang kaschieren will, behandelt das Symptom.
Die Behebung ist ein kleines blockierendes Skript im <head>, das die Einstellung liest und die Attribute auf <html> stempelt, bevor das erste Bild gemalt wird.
<script>
try {
const s = localStorage;
const t = s.getItem("theme");
const p = s.getItem("palette");
if (t) document.documentElement.dataset.theme = t;
if (p) document.documentElement.dataset.palette = p;
} catch {}
</script>Dunkel ist nicht dieselbe Palette, nur gedimmt#
Jede mehrfarbige Palette bekommt eine zweite Definition für Dunkel, mit angehobenen Mitteltönen. Ein Farbton, der auf #EFEDE4 selbstbewusst wirkt, verschwindet in #0B0C0F; automatisches Dimmen erzeugt in der einen Richtung Matsch und in der anderen Neon.
Der Test, der es ehrlich hält#
Jede neue Komponente wird vor dem Ausliefern in drei Kombinationen angesehen: die Standardpalette in Hell, eine monochrome Palette, und eine mehrfarbige Palette in Dunkel. Monochrom ist der schärfste der drei Tests: Wird eine Komponente unlesbar, sobald jeder Platz ein Ton desselben Farbtons ist, hat sie Farbe benutzt, um etwas zu tragen, das der Helligkeitswert hätte tragen sollen.