Tworzenie tematów i motywów za pomocą CSS

Współczesne strony internetowe coraz częściej oferują różne motywy kolorystyczne, takie jak jasny i ciemny. Dzięki CSS można łatwo przygotować wiele wariantów stylu, które w zależności od preferencji użytkownika zostaną zastosowane w projekcie. Istnieje kilka podejść do realizacji tej funkcjonalności – od prostego przełączania klas po wykorzystanie zmiennych CSS (custom properties).

Motywy oparte na klasach

Najprostszą metodą tworzenia tematów jest przełączanie jednej klas(y) w elemencie nadrzędnym (np. body). W każdej klasie definiujesz inne zestawy kolorów, tła i elementów interfejsu.

/* Styl bazowy (domyślny) */
body {
  background-color: #ffffff;
  color: #333333;
}

/* Motyw ciemny */
body.dark-theme {
  background-color: #333333;
  color: #ffffff;
}

Preferencje użytkownika (prefers-color-scheme)

Współczesne przeglądarki umożliwiają odczyt preferowanego motywu systemowego użytkownika (np. jasny lub ciemny). Za pomocą media query prefers-color-scheme: dark możesz dostosować styl automatycznie

Dzięki temu, gdy system użytkownika jest ustawiony na tryb ciemny, Twoja strona automatycznie załaduje odpowiednie kolory.

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333333;
    --text-color: #ffffff;
  }
}

Inne podejścia do motywów

• Pliki CSS - Możesz załączać różne arkusze (light.css, dark.css) i zmieniać je dynamicznie w JavaScript, usuwając i dodając link do head.
• Frameworki CSS - Takie jak Bootstrap czy Tailwind umożliwiają tworzenie motywów poprzez zmienne SASS/LESS lub pluginy do trybu ciemnego.
• Preprocesory - SASS/LESS pozwalają na tworzenie zmiennych i funkcji, które generują różne warianty stylów.

Przykładowy kod przełączania motywów

HTML + CSS + JS (skrótowy przykład)

Po kliknięciu przycisku przełączasz klasę .dark-theme na body, co zmienia wartości zmiennych i wywołuje natychmiastową zmianę stylu.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Tworzenie tematów i motywów za pomocą CSS może polegać na:

• dodawaniu specjalnych klas (np. .dark-theme),
• wykorzystaniu zmiennych CSS (custom properties),
• automatycznym dostosowywaniu do preferencji użytkownika (media query prefers-color-scheme).

Każda z tych technik umożliwia przygotowanie elastycznego i atrakcyjnego interfejsu, który użytkownik może dopasować do swoich preferencji.