Co to jest Dark Mode w CSS?

Co to jest Dark Mode w CSS?

Dark mode, czyli ciemny motyw, to sposób na wyświetlanie treści na ciemnym tle zamiast jasnego. Jest to rozwiązanie, które zyskało popularność dzięki aplikacjom mobilnym, ale szybko przeniknęło również do świata stron internetowych. Dzięki dark mode użytkownik może dostosować interfejs strony do swoich preferencji, co znacznie podnosi komfort korzystania z witryny.

Wprowadzenie dark mode to także odpowiedź na współczesne trendy w projektowaniu UX. Ciemny motyw nie tylko poprawia estetykę strony, ale również wspiera osoby wrażliwe na jasne światło. Warto podkreślić, że za pomocą CSS można zaimplementować dark mode w prosty sposób, bez konieczności używania zaawansowanych frameworków.

Dlaczego warto wdrożyć Dark Mode?

Ciemny motyw to coś więcej niż tylko trend. Badania pokazują, że dark mode zmniejsza zmęczenie oczu, szczególnie w warunkach słabego oświetlenia. Ponadto użytkownicy doceniają możliwość personalizacji – oferując ciemny motyw, wyjdziesz naprzeciw ich oczekiwaniom.

Z technicznego punktu widzenia dark mode w CSS działa na niemal każdej nowoczesnej przeglądarce. To oznacza, że możesz wdrożyć go w swojej witrynie, nie martwiąc się o kompatybilność.

Jak działa Dark Mode w CSS?

Dark mode w CSS opiera się głównie na media queries, a dokładniej na właściwości prefers-color-scheme. Ta funkcja pozwala wykryć preferencje kolorystyczne użytkownika ustawione w systemie operacyjnym lub przeglądarce.

Kiedy użytkownik ma włączony dark mode na swoim urządzeniu, przeglądarka automatycznie informuje o tym stronę internetową. Dzięki temu można dynamicznie dostosować wygląd witryny, nie obciążając użytkownika koniecznością przełączania motywów ręcznie.

Co to jest prefers-color-scheme?

prefers-color-scheme to specjalna media query w CSS, która rozpoznaje ustawienia kolorów systemowych. Może przyjąć jedną z dwóch wartości:

• light – dla jasnego motywu,
• dark – dla ciemnego motywu.

Poniżej znajduje się przykład kodu CSS z wykorzystaniem tej właściwości:

/* Styl domyślny – jasny motyw */
body {
  background-color: white;
  color: black;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Dzięki tej prostej technice można szybko dodać dark mode do swojej strony.

Krok po kroku – implementacja Dark Mode w CSS

Implementacja dark mode nie jest trudna, zwłaszcza gdy korzystasz z prefers-color-scheme. Poniżej znajdziesz szczegółowy opis dwóch popularnych metod wdrożenia.

Zmienna CSS to wygodne rozwiązanie, które ułatwia zarządzanie kolorami w motywach. W tym podejściu definiujesz kolory jako zmienne, a następnie modyfikujesz je w zależności od preferencji użytkownika.

Przykład:

:root {
  --background-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

W tym przypadku wystarczy zmienić wartości zmiennych, aby dostosować całą stronę do wybranego motywu.

Chociaż prefers-color-scheme to świetne rozwiązanie, możesz także dodać przełącznik, który pozwoli użytkownikowi ręcznie zmieniać motyw. Wymaga to połączenia CSS i JavaScript.

Przykład:

<button id="toggle-theme">Zmień motyw</button>

body.light {
  background-color: white;
  color: black;
}

body.dark {
  background-color: black;
  color: white;
}

const button = document.getElementById('toggle-theme');
button.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
});

Optymalizacja Dark Mode w CSS

Dark mode to nie tylko odpowiedni wybór kolorów, ale także optymalizacja kodu i UX. Warto zadbać o to, aby ciemny motyw nie obciążał strony ani nie powodował problemów z czytelnością.

Korzystanie z prefers-color-scheme sprawia, że dark mode nie wpływa negatywnie na czas ładowania strony. Ważne jest jednak, aby unikać nadmiernej złożoności reguł CSS i korzystać z prostych zmiennych.

Dark mode sam w sobie nie wpływa bezpośrednio na pozycjonowanie strony. Jednak poprawa UX dzięki ciemnemu motywowi może obniżyć współczynnik odrzuceń i poprawić czas spędzany na stronie – a to już ma znaczenie dla SEO.

Przykład zastosowania Dark Mode dla obrazka

Dark mode można wzbogacić o dodatkowe elementy, takie jak animacje czy dostosowanie grafik. Na przykład obrazy można zamieniać na wersje o odpowiednich kolorach, aby lepiej pasowały do ciemnego tła.

Przykład zmiany obrazka:

.content {
  background-image: url('light-image.png');
}

@media (prefers-color-scheme: dark) {
  .content {
    background-image: url('dark-image.png');
  }
}

Ciekawostka – Automatyczna zmiana trybu na podstawie pory dnia

Ciekawym podejściem do wdrożenia dark mode jest automatyczna zmiana motywu na podstawie godziny wschodu i zachodu słońca w lokalizacji użytkownika. Możemy to osiągnąć dzięki funkcji PHP date_sun_info, która pozwala obliczyć godziny wschodu i zachodu słońca. Na tej podstawie strona automatycznie przełączy się w dark mode, gdy zrobi się ciemno.

Poniżej znajdziesz szczegółowy przykład implementacji:

// Współrzędne lokalizacji (przykład dla Warszawy)
$latitude = 52.2297;
$longitude = 21.0122;

// Aktualny czas
$current_time = time();

// Pobranie informacji o wschodzie i zachodzie słońca
$sun_info = date_sun_info($current_time, $latitude, $longitude);

// Godziny wschodu i zachodu słońca
$sunrise = $sun_info['sunrise']; // Czas wschodu
$sunset = $sun_info['sunset'];   // Czas zachodu

// Sprawdzenie, czy obecnie jest noc
$is_night = ($current_time >= $sunset || $current_time <= $sunrise);

// Ustawienie klasy body w zależności od pory dnia
$theme_class = $is_night ? 'dark' : 'light';

W powyższym kodzie $theme_class przechowuje nazwę klasy CSS (dark lub light), która zostanie dodana do elementu <body>. Dzięki temu motyw będzie się automatycznie zmieniać w zależności od pory dnia.

Przykład kodu:

<body class="<?php echo $theme_class; ?>">

FAQ – Najczęściej zadawane pytania

Podsumowanie

Dark mode w CSS to prosty i skuteczny sposób na poprawę doświadczeń użytkowników oraz dostosowanie strony do nowoczesnych standardów. Dzięki prefers-color-scheme możesz łatwo wdrożyć ciemny motyw, a zmienne CSS i dynamiczne przełączniki pozwolą na większą elastyczność. Wdrażając dark mode, nie tylko poprawisz wygląd swojej witryny, ale także pokażesz, że dbasz o potrzeby użytkowników. Zacznij już dziś i wprowadź ciemny motyw na swojej stronie!