Motywy
Zmień odcień marki, zabarwienie szarości, zaokrąglenie albo tryb — globalnie lub dla jednego poddrzewa — bez dotykania komponentów.
Każdy komponent prfct odczytuje kolory, zaokrąglenia i cienie ze zmiennych CSS. Dostosowanie motywu sprowadza się do zmiany tych wartości — komponentów nigdy nie trzeba edytować. Wypróbuj to na żywo w kreatorze motywów.
Te same komponenty, te same klasy — o trybie decyduje poddrzewo.
Te same komponenty, te same klasy — o trybie decyduje poddrzewo.
Tryb jasny i ciemny
prfct ma oba tryby. Domyślna konfiguracja używa next-themes, żeby podążać za ustawieniem systemu operacyjnego, zapamiętywać wybór i nie dopuścić do mignięcia niewłaściwego motywu:
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}Motywy lokalne
Tryby są zdefiniowane na klasach, a nie tylko na elemencie głównym, więc przełączyć się może dowolne poddrzewo:
<aside className="dark">…</aside> {/* a dark panel on a light page */}
<figure className="light">…</figure> {/* a light preview on a dark page */}Tak dokumentacja prfct pokazuje jasne i ciemne próbki obok siebie. Działa to, bo komponenty wyrażają każdą różnicę między trybami przez zmienne — żaden z nich nie używa klas dark:.
Kolor marki
Skala marki powstaje z trzech liczb: odcienia, nasycenia i jasności stopnia pełnego wypełnienia. Po ich zmianie wszystkie 12 stopni generuje się na nowo dla obu trybów, a kontrast stopni tekstu jest wyliczany ponownie.
export const themeConfig = {
gray: neutralPresets.graphite,
brand: huePresets.ultramarine, // or { hue: 150, chroma: 0.15, lightness: 0.55 }
}Uruchom pnpm tokens, żeby przebudować styles/tokens.css. Kreator motywów robi to samo w przeglądarce i daje ci gotowy CSS do wklejenia.
Monochromatyczna marka
Ustaw brand: "mono", a skala marki podąży za skalą neutralną: stany zaznaczenia, postęp i fokus staną się czarne (albo białe w trybie ciemnym). To najbardziej powściągliwa odsłona prfct — i nadal dostępna.
Zabarwienie szarości
Skala szarości może mieć subtelny odcień. prfct ma siedem gotowych palet:
Zaokrąglenie
:root {
--radius: 0.5rem;
}Każdy stopień zaokrąglenia jest wielokrotnością --radius, więc 0 daje ostry, techniczny interfejs, a 0.75rem — miękki i przyjazny. Zobacz Kształt.
Nadpisywanie tokenów semantycznych
Przy jednorazowych wymaganiach marki nadpisz tokeny semantyczne po tokens.css. Zamiast surowego koloru wskaż stopień skali, żeby tryb ciemny nadal działał:
:root,
.light {
--primary: var(--brand-9); /* colored primary buttons */
--primary-foreground: var(--brand-contrast);
}
.dark {
--primary: var(--brand-9);
}