M

MLOG

Polski

Odkryj moc zapytań medialnych CSS i właściwości niestandardowych, aby tworzyć automatyczne jasne i ciemne motywy, które dostosowują się do preferencji użytkownika, poprawiając dostępność i atrakcyjność wizualną dla globalnej publiczności.

Funkcja CSS light-dark(): Automatyczne dostosowywanie motywu dla globalnej sieci

W dzisiejszym globalnie połączonym świecie strony internetowe muszą być dostępne i atrakcyjne wizualnie dla użytkowników o różnym pochodzeniu i preferencjach. Jednym z najskuteczniejszych sposobów na osiągnięcie tego jest automatyczna adaptacja motywu, a w szczególności oferowanie zarówno jasnych, jak i ciemnych motywów, które dostosowują się do ustawień systemowych użytkownika. Ten wpis na blogu poprowadzi Cię przez proces implementacji tej funkcjonalności przy użyciu zapytań medialnych CSS i właściwości niestandardowych, zapewniając płynne i komfortowe przeglądanie dla Twojej międzynarodowej publiczności.

Dlaczego warto wdrażać automatyczne jasne i ciemne motywy?

Istnieje kilka istotnych powodów, dla których warto włączyć automatyczną adaptację motywu do swoich projektów internetowych:

Jak zaimplementować automatyczną adaptację motywu za pomocą CSS

Podstawą automatycznej adaptacji motywu jest zapytanie medialne prefers-color-scheme. To zapytanie medialne CSS pozwala wykryć preferowany przez użytkownika schemat kolorów (jasny lub ciemny) i zastosować odpowiednie style.

Krok 1: Zdefiniuj właściwości niestandardowe (zmienne CSS)

Zacznij od zdefiniowania właściwości niestandardowych (zmiennych CSS) do przechowywania wartości kolorów dla Twoich jasnych i ciemnych motywów. Ułatwia to przełączanie między motywami poprzez prostą aktualizację wartości zmiennych.


:root {
  --background-color: #ffffff; /* Tło jasnego motywu */
  --text-color: #000000; /* Tekst jasnego motywu */
  --link-color: #007bff; /* Link jasnego motywu */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Tło ciemnego motywu */
    --text-color: #ffffff; /* Tekst ciemnego motywu */
    --link-color: #66b3ff; /* Link ciemnego motywu */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

W tym przykładzie definiujemy zmienne dla koloru tła, koloru tekstu, koloru linku i kolorów przycisków. Selektor :root stosuje te zmienne do całego dokumentu. Następnie zapytanie medialne @media (prefers-color-scheme: dark) nadpisuje te zmienne wartościami dla ciemnego motywu, gdy użytkownik ustawił swój system w trybie ciemnym.

Krok 2: Zastosuj właściwości niestandardowe w swoich stylach

Następnie zastosuj te właściwości niestandardowe w swoich stylach CSS, aby kontrolować wygląd elementów Twojej strony internetowej.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Płynne przejście */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Tutaj używamy funkcji var(), aby uzyskać dostęp do wartości naszych właściwości niestandardowych. Dodaliśmy również właściwość transition do elementu body, aby stworzyć płynne przejście między motywami.

Krok 3: Testowanie i dopracowywanie

Dokładnie przetestuj swoją implementację w różnych przeglądarkach i systemach operacyjnych. Nowoczesne przeglądarki, takie jak Chrome, Firefox, Safari i Edge, w pełni obsługują zapytanie medialne prefers-color-scheme. Możesz przełączać się między trybem jasnym i ciemnym w ustawieniach systemu operacyjnego, aby zobaczyć zmiany odzwierciedlone na Twojej stronie internetowej.

Zaawansowane techniki i uwagi

Udostępnienie ręcznego przełącznika motywów

Chociaż automatyczna adaptacja motywu to świetny punkt wyjścia, niektórzy użytkownicy mogą preferować ręczne nadpisanie ustawień systemowych. Możesz udostępnić ręczny przełącznik motywów za pomocą JavaScriptu i local storage.

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Domyślnie auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Zastosuj początkowy motyw przy ładowaniu strony
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Jeśli ustawiono na auto, pozwól, aby zdecydowało prefers-color-scheme
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Dodaj poniższy CSS razem z poprzednim. Zwróć uwagę na ręczne nadpisanie:


body.light-theme {
  --background-color: #ffffff; /* Tło jasnego motywu */
  --text-color: #000000; /* Tekst jasnego motywu */
  --link-color: #007bff; /* Link jasnego motywu */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Tło ciemnego motywu */
  --text-color: #ffffff; /* Tekst ciemnego motywu */
  --link-color: #66b3ff; /* Link ciemnego motywu */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Ten fragment kodu dodaje przycisk, który pozwala użytkownikom przełączać się między motywami jasnym, ciemnym i automatycznym. Wybrany motyw jest przechowywany w local storage, dzięki czemu jest zapamiętywany po ponownym załadowaniu strony.

Obsługa obrazów i plików SVG

Niektóre obrazy i pliki SVG mogą nie wyglądać dobrze zarówno w jasnym, jak i ciemnym motywie. Możesz użyć zapytań medialnych CSS, aby warunkowo wyświetlać różne wersje tych zasobów.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Ten fragment kodu pokazuje jeden obraz (z klasą light-mode) w trybie jasnym i inny obraz (z klasą dark-mode) w trybie ciemnym.

Uwagi dotyczące palety kolorów dla międzynarodowej publiczności

Wybierając palety kolorów dla swoich jasnych i ciemnych motywów, pamiętaj o skojarzeniach kulturowych i kwestiach dostępności. Oto kilka ogólnych wytycznych:

Uwagi dotyczące wydajności

Chociaż implementacja automatycznej adaptacji motywu jest stosunkowo prosta, ważne jest, aby wziąć pod uwagę potencjalny wpływ na wydajność. Unikaj używania zbyt skomplikowanych selektorów CSS lub animacji, które mogą spowolnić renderowanie. Upewnij się również, że Twoje właściwości niestandardowe są zdefiniowane wydajnie, aby zminimalizować narzut związany z wyszukiwaniem zmiennych.

Oto kilka najlepszych praktyk optymalizacji wydajności:

Najlepsze praktyki w zakresie dostępności

Upewnij się, że Twoje jasne i ciemne motywy spełniają wytyczne dotyczące dostępności, takie jak WCAG (Web Content Accessibility Guidelines). Obejmuje to zapewnienie wystarczającego kontrastu kolorów, używanie semantycznego HTML i zapewnienie, że wszystkie interaktywne elementy są dostępne z klawiatury.

Oto kilka szczegółowych najlepszych praktyk w zakresie dostępności, których należy przestrzegać:

Przykłady z różnych regionów

Rozważ te przykłady, jak jasne i ciemne motywy mogą być dostosowane do zróżnicowanej globalnej publiczności:

Podsumowanie

Implementacja automatycznych jasnych i ciemnych motywów to kluczowy krok w kierunku stworzenia bardziej dostępnego i przyjaznego dla użytkownika doświadczenia internetowego dla globalnej publiczności. Wykorzystując zapytania medialne CSS i właściwości niestandardowe, możesz łatwo dostosować wygląd swojej strony do preferencji użytkownika, zmniejszyć zmęczenie oczu i poprawić dostępność dla użytkowników z wadami wzroku. Pamiętaj, aby uwzględnić skojarzenia kulturowe, wytyczne dotyczące dostępności i względy wydajności, aby zapewnić płynne i inkluzywne doświadczenie przeglądania dla wszystkich.

Stosując te techniki, demonstrujesz zaangażowanie w nowoczesne zasady projektowania stron internetowych i zaspokajasz różnorodne potrzeby swojej międzynarodowej publiczności, czyniąc swoją stronę internetową przyjaznym i komfortowym miejscem dla wszystkich.