liquiddesign

Wzorzec 25

Motyw bez błysku

Motyw dokładany po hydratacji błyska domyślnymi kolorami przy każdym wejściu, a dwa równoległe zestawy klas rozjeżdżają się przy pierwszym nowym komponencie. Deklaracja color-scheme mówi przeglądarce, które schematy strona wspiera, funkcja light-dark() trzyma obie wartości w jednym tokenie, a zapisany wybór użytkownika wchodzi do html, zanim cokolwiek się wyrenderuje.

Trzy motywy, zero JavaScript

Przełącz motyw karty. Wyboru pilnuje color-scheme z :has, kolory niesie light-dark(), a natywne pole i pasek przewijania przestawiają się razem z resztą. Opcja System podąża za ustawieniem urządzenia.

Motyw interfejsu

Powiadomienia projektu

Jeden zestaw tokenów opisuje oba motywy, więc karta nie zna pojęcia trybu ciemnego. Zna tylko swoje kolory.

Przełączenie zmienia wyłącznie kolory: układ, odstępy i łamanie linii nie drgną. W aplikacji zapisany wybór trafia do html przed pierwszym renderem, więc kolejne wejścia nie błyskają domyślnym motywem.

Reguły

  • Kolory deklaruje light-dark() przy color-scheme: light dark, jeden token niesie oba motywy.
  • color-scheme przestawia też natywne kontrolki, scrollbary i tło canvas, nie tylko własne tokeny.
  • Zapisany wybór użytkownika trafia do html przed pierwszym renderem, nie w useEffect po hydratacji.
  • Przełączenie motywu zmienia wyłącznie kolory: geometria, odstępy i łamanie linii stoją w miejscu.

Wzorzec w kodzie

Jeden token, oba motywy
:root {
  color-scheme: light dark;
  --surface: light-dark(#f5f5fa, #0d0d15);
  --text: light-dark(#1e1e2d, #f3f3f8);
}

:root[data-motyw="jasny"] { color-scheme: light; }
:root[data-motyw="ciemny"] { color-scheme: dark; }
Wybór użytkownika wchodzi przed pierwszym renderem, inline w head
<script>
  const saved = localStorage.getItem("motyw");
  if (saved) {
    document.documentElement.dataset.motyw = saved;
  }
</script>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zaimplementuj w moim projekcie wzorzec „Motyw bez błysku" z metodologii Liquid Design.

color-scheme i light-dark() oddają motyw przeglądarce, a wybór użytkownika trafia do dokumentu przed pierwszym renderem, więc nic nie mruga bielą.

Wymagania:
- Kolory deklaruje light-dark() przy color-scheme: light dark, jeden token niesie oba motywy.
- color-scheme przestawia też natywne kontrolki, scrollbary i tło canvas, nie tylko własne tokeny.
- Zapisany wybór użytkownika trafia do html przed pierwszym renderem, nie w useEffect po hydratacji.
- Przełączenie motywu zmienia wyłącznie kolory: geometria, odstępy i łamanie linii stoją w miejscu.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy — zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/motyw-bez-blysku