M

MLOG

Polski

Wdrażaj tryb ciemny na swojej stronie internetowej dzięki temu kompleksowemu przewodnikowi. Dowiedz się o zapytaniach CSS media, przełącznikach JavaScript, kwestiach dostępności i najlepszych praktykach.

Implementacja trybu ciemnego: Kompleksowy przewodnik z CSS i JavaScript

Tryb ciemny staje się coraz bardziej popularny, oferując bardziej komfortowe wrażenia wizualne, szczególnie w słabo oświetlonych środowiskach. Ten przewodnik zawiera kompleksowy przegląd tego, jak wdrożyć tryb ciemny na swojej stronie internetowej za pomocą CSS i JavaScript, zapewniając bezproblemowe i dostępne doświadczenie użytkownika dla globalnej publiczności.

Dlaczego warto wdrożyć tryb ciemny?

Istnieje kilka przekonujących powodów, dla których warto rozważyć wdrożenie trybu ciemnego:

Metody wdrażania trybu ciemnego

Istnieje kilka podejść do wdrażania trybu ciemnego, z których każde ma swoje zalety i wady. Przyjrzymy się najpopularniejszym metodom:

1. Wdrażanie trybu ciemnego za pomocą zapytań CSS media

Zapytanie CSS media prefers-color-scheme umożliwia wykrycie preferowanego schematu kolorów użytkownika i odpowiednie zastosowanie różnych stylów. Jest to najprostszy i najwydajniejszy sposób wdrożenia trybu ciemnego dla użytkowników, którzy już ustawili swoje preferencje systemowe.

Przykład kodu

Dodaj następujący kod CSS do swojego arkusza stylów:

/* Domyślny (Jasny) motyw */
body {
  background-color: #fff;
  color: #000;
}

/* Ciemny motyw */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Dostosuj inne elementy w razie potrzeby */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Wyjaśnienie:

Zalety

Wady

2. Wdrażanie trybu ciemnego za pomocą przełącznika JavaScript

Użycie przełącznika JavaScript zapewnia użytkownikom ręczny przełącznik do kontrolowania motywu witryny. Daje to użytkownikom większą kontrolę i pozwala im zastąpić preferencje systemowe. To podejście ma kluczowe znaczenie dla obsługi użytkowników na różnych urządzeniach i platformach, które mogą nie obsługiwać spójnie ani nie ujawniać ustawień trybu ciemnego w całym systemie.

Struktura HTML

Najpierw dodaj element przełącznika do swojego kodu HTML:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Powoduje to utworzenie prostego przełącznika za pomocą pola wyboru i niestandardowego stylu CSS.

Stylizacja CSS (opcjonalna)

Możesz wystylizować przełącznik za pomocą CSS. Oto przykład:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Zaokrąglone suwaki */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Kod JavaScript

Teraz dodaj następujący kod JavaScript, aby obsłużyć funkcjonalność przełączania:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funkcja przełączania trybu ciemnego
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Zapisz preferencje użytkownika w localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Sprawdź localStorage pod kątem zapamiętanych preferencji
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Dodaj detektor zdarzeń do przełącznika
darkModeToggle.addEventListener('change', toggleDarkMode);

Wyjaśnienie:

Stylizacja CSS dla trybu ciemnego (z użyciem klasy)

Zaktualizuj swój kod CSS, aby użyć klasy dark-mode do zastosowania stylów motywu ciemnego:

/* Domyślny (Jasny) motyw */
body {
  background-color: #fff;
  color: #000;
}

/* Ciemny motyw */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Zalety

Wady

3. Połączenie zapytań media i JavaScript

Najlepszym podejściem jest często połączenie zapytań CSS media i przełącznika JavaScript. Zapewnia to to, co najlepsze z obu światów: automatyczne wykrywanie preferowanego schematu kolorów użytkownika, a jednocześnie umożliwia użytkownikom ręczne zastępowanie preferencji systemowych. Jest to skierowane do szerszej grupy odbiorców, w tym osób, które mogą nie być świadome lub nie być w stanie zmienić ustawień motywu w całym systemie.

Przykład kodu

Użyj tego samego kodu HTML i CSS z przykładu przełącznika JavaScript. Zmodyfikuj kod JavaScript, aby sprawdzić preferencje systemu:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funkcja przełączania trybu ciemnego
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Zapisz preferencje użytkownika w localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Sprawdź localStorage pod kątem zapamiętanych preferencji, a następnie preferencji systemowych
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Dodaj detektor zdarzeń do przełącznika
darkModeToggle.addEventListener('change', toggleDarkMode);

Wyjaśnienie:

Zalety

Wady

Kwestie dostępności

Podczas wdrażania trybu ciemnego kluczowe jest uwzględnienie kwestii dostępności, aby zapewnić, że Twoja witryna pozostanie użyteczna dla wszystkich użytkowników. Pamiętaj, że samo odwrócenie kolorów nie gwarantuje automatycznie dostępności. Oto kilka kluczowych kwestii:

Najlepsze praktyki wdrażania trybu ciemnego

Oto kilka najlepszych praktyk, których należy przestrzegać podczas wdrażania trybu ciemnego na swojej stronie internetowej:

Przykład: zmienne CSS do motywów

Zmienne CSS ułatwiają przełączanie między motywami jasnymi i ciemnymi. Zdefiniuj zmienne w pseudoklasie :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

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

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Teraz, po dodaniu klasy dark-mode do elementu body, zmienne CSS są aktualizowane, a style są automatycznie stosowane.

Wnioski

Wdrożenie trybu ciemnego może znacznie poprawić wrażenia użytkownika ze swojej strony internetowej, poprawić dostępność, a nawet zaoszczędzić żywotność baterii. Postępując zgodnie z technikami i najlepszymi praktykami opisanymi w tym przewodniku, możesz stworzyć bezproblemową i przyjemną obsługę trybu ciemnego dla swoich użytkowników na całym świecie.

Pamiętaj, aby dać pierwszeństwo dostępności i dokładnie przetestować implementację, aby zapewnić, że Twoja strona internetowa pozostanie użyteczna dla wszystkich użytkowników, niezależnie od ich preferencji lub zdolności wizualnych.

Dzięki przemyślanemu wdrożeniu trybu ciemnego nie tylko podążasz za trendem, ale także tworzysz bardziej inkluzywne i przyjazne dla użytkownika wrażenia w sieci dla globalnej publiczności. To poświęcenie dla doświadczenia użytkownika może przynieść korzyści ogólnej wydajności i atrakcyjności Twojej strony internetowej.