Generator motywów shadcn/ui: zmienne CSS w OKLCH | We.Inc
Wybierz odcień marki, nasycenie i zaokrąglenie, a dostaniesz wszystkie zmienne CSS shadcn/ui dla trybu jasnego i ciemnego w OKLCH, z podglądem na żywo i kontrolą kontrastu.
Komponenty shadcn/ui pobierają kolory ze zmiennych CSS, takich jak --primary, --muted i --border, zapisanych w OKLCH. Wybierz tutaj odcień, nasycenie, jasność, zabarwienie szarości i promień narożników, sprawdź podgląd jasny i ciemny na żywo wraz ze współczynnikami kontrastu, a potem wklej wygenerowane bloki :root i .dark do globalnego arkusza stylów.
Pary zmiennych definiowane w każdym motywie shadcn/ui
Powierzchnia
Tekst na niej
Używane przez
--background
--foreground
Treść strony
--card / --popover
--card-foreground / --popover-foreground
Karty, menu, okna dialogowe
--primary
--primary-foreground
Domyślne przyciski, stany aktywne
--secondary / --muted
--secondary-foreground / --muted-foreground
Stonowane przyciski, podpowiedzi, podpisy
--accent
--accent-foreground
Pozycje menu po najechaniu
Dokumentacja motywów definiuje około trzydziestu zmiennych, a ręczna edycja jest powolna, bo zmiana koloru głównego zmienia też to, który kolor tekstu pozostaje na nim czytelny. Ten generator wyprowadza cały zestaw z kilku wyborów, dobiera czytelny kolor pierwszego planu dla każdej powierzchni i oznacza każdą parę, która spada poniżej typowych progów kontrastu.
Zacznij od gotowego zestawu albo ustaw suwakami odcień, nasycenie i jasność koloru głównego. Próbka pokazuje kolor i ostrzega, jeśli wychodzi poza zakres sRGB.
Zwiększ zabarwienie szarości, aby tła, obramowania i stonowany tekst miały nutę odcienia marki. Zero zostawia je czysto neutralne.
Przełączaj podgląd między trybem jasnym i ciemnym i sprawdzaj tabelę kontrastu dla tekstu na każdej powierzchni.
Skopiuj CSS i zastąp nim odpowiednie bloki :root i .dark w swoim globals.css. Zostaw istniejący blok @theme inline, który mapuje te zmienne na klasy narzędziowe Tailwind.
Utrzymuj umiarkowane nasycenie koloru głównego, około 0.12 do 0.2, w interfejsach używanych przez cały dzień. Bardzo wysokie nasycenie wygląda krzykliwie na dużych przyciskach.
Ciemny motyw nieco podnosi jasność koloru głównego, bo ten sam kolor wygląda na ciemnym tle na przygaszony.
Celuj w co najmniej 4.5:1 między tekstem a jego tłem i sprawdzaj stonowany tekst osobno, bo z założenia jest jaśniejszy.
Jeśli dodajesz własny kolor, na przykład ostrzegawczy, zdefiniuj go w obu blokach i dodaj wpis --color-warning do @theme inline, tak jak pokazuje dokumentacja motywów.
Najczęściej zadawane pytania
Dlaczego OKLCH zamiast HSL?
Jasność w OKLCH odpowiada temu, jak jasny kolor wydaje się oku, więc dwa kolory o równym L wyglądają na równie jasne, nawet gdy różnią się odcieniem. Dzięki temu łatwiej zbudować pasujące do siebie zestawy jasny i ciemny. Aktualna dokumentacja motywów shadcn/ui używa OKLCH dla każdego koloru.
Co oznacza każda liczba w OKLCH?
L to jasność od 0 (czarny) do 1 (biały), C to nasycenie, czyli jak żywy jest kolor, zaczynając od 0 dla szarości, a H to kąt odcienia w stopniach. Opcjonalna wartość alfa występuje po ukośniku, jak w oklch(1 0 0 / 10%).
Co zmienia --radius?
Komponenty zaokrąglają narożniki na podstawie tej jednej wartości. Dokumentacja motywów ustawia ją domyślnie na 0.625rem, a blok @theme inline wyprowadza z niej mniejsze i większe stopnie zaokrąglenia.
Czy to zadziała ze starszymi projektami?
Projekty oparte na starszych szablonach mogą przechowywać kolory w innym formacie i mapować je inaczej w konfiguracji Tailwind. Porównaj swój globals.css ze zmiennymi tutaj, zanim cokolwiek zastąpisz.
Czy współczynniki kontrastu są dokładne?
Korzystają ze wzoru WCAG 2 po przekonwertowaniu każdego koloru OKLCH na sRGB, z przycięciem wartości spoza zakresu. Kolory spoza sRGB będą wyglądać nieco inaczej na ekranach o szerokiej gamie barw.
Jak powstaje paleta
Twój kolor główny zasila zmienne primary, ring i sidebar-primary. Szarości dla teł, obramowań i stonowanego tekstu dzielą jeden odcień z niewielkim nasyceniem ustawianym suwakiem zabarwienia, więc interfejs wydaje się powiązany z marką, nie wyglądając na kolorowy.
Każdy kolor pierwszego planu jest wybierany przez pomiar kontrastu z jego powierzchnią i pozostawienie tego z prawie białego lub prawie czarnego, który jest czytelniejszy. Kolory wykresów przesuwają się po kole barw od Twojego odcienia głównego, aby serie dało się od siebie odróżnić.
Szczegóły trybu ciemnego
W ciemnym bloku obramowania i pola formularzy używają bieli o niskiej wartości alfa zamiast jednolitej szarości, dzięki czemu dopasowują się do każdej powierzchni, na której leżą. Karty są lekko uniesione ponad tło strony, aby warstwy pozostały widoczne.
Szczególnie w trybie ciemnym testuj obwódki fokusu. Obwódka wyraźna na bieli może zniknąć na stronie w głębokim granacie.
Przykładowy wynik: zestaw Niebieski
Dokładnie to generator zapisuje dla zestawu Niebieski. Wklej to w miejsce bloków kolorów w globals.css.
Bloki kolorów w globals.css
Wartości jasne są w :root, a ciemne w .dark, wszystkie w OKLCH.
Dodawanie własnego tokenu koloru
Kolor ostrzegawczy dostępny jako bg-warning
Zdefiniuj parę w obu trybach, a potem udostępnij ją Tailwind przez @theme inline.
Neutralny
Niebieski
Fioletowy
Zielony
Pomarańczowy
Różowy
Gotowe zestawy: Neutralny, Niebieski, Fioletowy, Zielony, Pomarańczowy, Różowy. Dostosuj odcień, nasycenie, jasność, zabarwienie szarości i promień, sprawdź podgląd jasny i ciemny, a potem skopiuj CSS.