Przejdź do treści PWA

Jak zmienić motyw strony za pomocą SCSS na przykładzie trybu ciemnego?

Używasz ciemnego motywu w swoim edytorze? A może korzystasz z tego trybu na popularnych stronach, takich jak YouTube? Jeśli chciałbyś zbudować taki efekt na stronie, to w tym artykule zostały zawarte wszelkie wskazówki na ten temat.

Baner promujący artykuł

Po co “tryb ciemny”?

Czy czujesz, że Twoje oczy szybciej się męczą, kiedy przeglądają jasne strony internetowe? Jeśli tak, to już wiesz, po co jest taki tryb. Jeśli nie, to pozwól, że udzielę Ci porady. Prędzej czy później zauważysz, że ciemniejsze szata graficzna aplikacji oraz stron internetowych nie spowoduję rozszerzenia się źrenic. Zauważysz to szczególnie podczas przeglądania internetu w tzw. półmroku.

Demo 🎉

Zmiana trybu z jasne na ciemny na stronie z artykułem
Zmiana trybu na tej stronie.
Spróbuj zmienić tryb (przycisk znajduje się w prawym dolnym roku strony).

Gdzie jeszcze możesz wykorzystać zmianę motywu na ciemny:

  • Strony internetowe, np. YouTube, Twitter
  • Edytory kodu, np. Visual Studio Code
  • DevTools, np. narzędzia developerskie w Google Chrome
  • Systemy operacyjne, np. macOS Mojave

Tryb ciemny w polskiej blogosferze frontendowej

Przeglądając serwis polskifrontend.pl nie zauważyłem, aby choć jeden blog miał możliwość zmiany trybu z jasnego na ciemny.

Moim zdaniem udostępnienie takiej możliwości jest wielce korzystne dla użytkownika. Czytelnicy tego bloga często go odwiedzają w godzinach wieczornych. Tym samym, kiedy będą mogli zmienić domyślny wygląd na ciemny, to podniesie się ich komfort korzystania z tej strony, tym samym dodanie trybu ciemnego może wpłynąć na zwiększenie ruchu na stronie.

Jak wykonać z użyciem SCSS?

Istnieje kilka sposobów na wykonanie mechanizmu przełączania wyglądu. Zgodnie z tytułem tego artykułu przedstawię teraz sposób jak zrealizować dane zadanie za pomocą SCSS.

Załączam poniżej kilka listingów kodu, na których widać, że na początku należy stworzyć zestawy zmiennych z kolorami. Następnie w pliku (plikach), należy zbudować wygląd strony wykorzystując zmienne SCSS.

Ostatnim krokiem jest zdefiniowanie — w głównym pliku main.scss — struktury, z wykorzystaniem klasy dodanej do głównego elementu strony (w tym przypadku jest to html, ale może to być też znacznik body).

// _themes/_light-theme.scss
$bg-color: #fff;
// _themes/_dark-theme.scss
$bg-color: #000;
// _page.scss
body {
    background-color: $bg-color;
    // ...
}
// main.scss
html:not(.dark-mode) {
    @import "_themes/_light-theme.scss";
    @import "_page";
}

html.dark-mode {
    @import "_themes/_dark-theme.scss";
    @import "_page";
}

Teraz wystarczy stworzyć przycisk, który po kliknięciu doda klasę CSS do głównego elementu strony, tym samym zostanie stworzony mechanizm zmiany motywu.

Wskazówki

  1. Komponent z przełączaniem trybu nie powinien być “zaznaczalny” — nie przechowuje on treści strony internetowej — jest czymś w roli “opcji”
  2. Warto, aby taki komponent ze zmianą trybu jasny/ciemny był albo w opcjach aplikacji, albo gdzie z boku treści strony. Do tego można wykorzystać znacznik <aside>
  3. Komponent może być ciągle widoczny, aby udostępnić możliwość natychmiastowej zmiany w trakcie czytania artykułu
  4. Ostatni wybór trybu warto zapisać w LocalStorage, aby podczas kolejnych odwiedzin, użytkownik nie musiał dokonywać wyboru ponownie
  5. Warto wykorzystać <input type="checkbox"> jako kontrolka do zmiany trybu

Efekt uboczny Stworzenie nowego motywu pozwoli na uporządkowanie wyglądu aplikacji, poprzez wydzielenie wszelkich kolorów (tekstu i teł) do pliku ze zmiennymi.