Teraz z AI - twórz strony przez serwer MCP
Documentation

Motywy

Dostosuj wygląd swojej witryny używając zmiennych CSS i Tailwind CSS v4.

Last updated: January 20, 2026

System kolorów

Cmssy używa wartości kolorów OKLCH zdefiniowanych jako zmienne CSS. Motyw jest podzielony na semantyczne tokeny dostosowujące się do trybu jasnego i ciemnego:

  • --background / --foreground — tło strony i tekst
  • --primary / --primary-foreground — główne przyciski akcji
  • --muted / --muted-foreground — subtelne tła i tekst pomocniczy
  • --card / --card-foreground — powierzchnie kart
  • --border — domyślny kolor obramowania
  • --destructive — stany błędu i niebezpieczeństwa

Dostosowywanie kolorów

Edytuj blok :root w pliku styles/main.css aby zmienić paletę kolorów. Używaj wartości OKLCH dla jednolitej percepcji:

Tryb ciemny

Tryb ciemny kontrolowany jest przez klasę .dark na elemencie root. Nadpisz te same zmienne w selektorze .dark:

Tailwind CSS v4

Projekt używa Tailwind CSS v4 z konfiguracją CSS-first. Kluczowe różnice względem v3:

  • Brak tailwind.config.js — wszystko żyje w CSS
  • @theme inline mapuje zmienne CSS na utility klasy Tailwind
  • Dyrektywy @source mówią Tailwindowi które pliki skanować pod kątem klas
  • Klasy gradientów używają bg-linear-to-r zamiast bg-gradient-to-r
  • Skala cieni przesunięta: shadow-sm w v4 = stare zwykłe shadow

Zaokrąglenia

Zaokrąglenia używają bazowej zmiennej --radius. Wszystkie tokeny zaokrągleń są od niej wyliczane:

  • rounded-sm = calc(var(--radius) - 4px)
  • rounded-md = calc(var(--radius) - 2px)
  • rounded-lg = var(--radius) (10px domyślnie)
  • rounded-xl = calc(var(--radius) + 4px)
Edit this page on GitHub
styles/main.css
1:root {
2  --radius: 0.625rem;
3  --background: oklch(1 0 0);
4  --foreground: oklch(0.145 0 0);
5  --primary: oklch(0.6 0.25 292);
6  --primary-foreground: oklch(0.985 0 0);
7  --muted: oklch(0.97 0 0);
8  --muted-foreground: oklch(0.556 0 0);
9  --border: oklch(0.922 0 0);
10}
Kolory OKLCH

OKLCH zapewnia jednolicie postrzegane kolory — dwa kolory o tej samej wartości jasności faktycznie wyglądają równie jasne. Użyj narzędzia OKLCH color picker aby znaleźć wartości. Format: oklch(jasność nasycenie odcień).

Zmiany klas w Tailwind v4

Jeśli przechodzisz z Tailwind v3, uważaj na zmienione nazwy utility klas: shadow-sm → shadow-xs, rounded-sm → rounded-xs, outline-none → outline-hidden, bg-gradient-* → bg-linear-*. Skala przesunęła się o jeden krok w dół.