Ciemny motyw w Tailwind — jeden akcent zamiast tęczy

Domyślny „AI look” strony to tęczowe gradienty (fiolet → róż → pomarańcz), glassmorfizm na wszystkim i pulsujące bloby. Chciałem czegoś odwrotnego: ciemne, ciepłe tło i jeden spokojny akcent.

Motyw w zmiennych CSS

Kolory trzymam w :root jako zmienne — tło, tekst, akcent, linie. Komponenty używają var(...), więc zmiana całego motywu to kilka linii, a nie polowanie po klasach w każdym pliku.

:root {
  --paper: #14120f;  /* tło */
  --ink: #f3f0e9;    /* tekst */
  --accent: #e0a96d; /* jeden ciepły amber */
  --line: rgba(243, 240, 233, 0.1);
}

/* w komponencie */
className="bg-[var(--paper)] text-[var(--ink)]"

Jeden akcent, nie tęcza

Zamiast trzech kolorów w gradiencie — jeden ciepły amber, używany oszczędnie. Nagłówki zostają w bieli, akcent ląduje tylko na detalach: aktywnych linkach, obrysie kart na hover, jednej miękkiej poświacie za hero.

Powściągliwe animacje

Subtelne wejścia treści, miękkie przełączanie zakładek, żadnych pulsujących gadżetów. I zawsze respekt dla osób, które animacji nie chcą:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Efekt

Mniej „szablonowo i generycznie”, bardziej jak coś zrobionego przez człowieka. Czasem jeden dobrze dobrany kolor robi więcej niż dziesięć.