Jak dodać tryb ciemny (dark-mode) do strony internetowej?
PATRYK KRUK
18.05.2024
Dodawanie trybu ciemnego do Twojej strony w mniej niż 5 minut
W tym artykule pokażę Ci, jak łatwo i bez frameworków dodać działający tryb ciemny do swojej witryny w mniej niż 5 minut i udostępnię Ci cały kod - łącznie z przyciskiem.
Aby od razu przejść do rzeczy, oto kod umożliwiający dodanie trybu ciemnego do Twojej witryny. Zalecam posiadanie osobnego arkusza stylów dark.scss dla wszystkich stylów trybu ciemnego. Wszystko, co musisz zrobić, to skopiować i wkleić kody HTML, SCSS i JS do swojego projektu i użyć tego selektora w pliku dark.scss, aby wybrać klasę, w której chcesz dodać style trybu ciemnego:
body.dark-mode .targetowanyElement {
background-color: #000000;
}
HTML dla przycisku
<button class="color-scheme-btn" aria-label="zmiana koloru strony na ciemny">
<div class="color-scheme-btn__box">
<div class="color-scheme-btn__pill">
<div class="color-scheme-btn__circle"></div>
</div>
</div>
</button>
SCSS dla przycisku
.color-scheme-btn {
position: absolute;
top: 2rem;
right: 0;
width: 7rem;
height: 7rem;
border: 1px solid transparent;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background: none;
color: #fff;
cursor: pointer;
&__box {
width: 3rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content:
center;
align-items: center;
}
&__pill {
position: relative;
width: 4rem;
height: 1.6rem;
display: flex;
align-items: center;
border-radius: 8px;
background-color:
#e6e6e6;
}
&__circle {
position: absolute;
left: 0;
height: 2.2rem;
width: 2.2rem;
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 0px 3px
0px #000;
transition: left 0.3s;
}
}
SCSS dla przycisku w pliku dark.scss
.color-scheme-btn {
&__pill {
background-color: #43b7ff;
}
&__circle {
left: 2rem;
}
}
Skopiuj i wklej ten kod do własnego pliku "dark.scss". Zapisz tam style dla trybu ciemnego i upewnij się, że linkujesz arkusz dark.css w nagłówku HTML (head) pod linkiem do głównego CSSa po to, żeby po dodaniu klasy "dark-mode" za pomocą przycisku, style głównego CSSa były nadpisane przez "dark.css". W tym kodzie zmieniłem kolor "pill" i pozycje "circle". Dzięki temu na każdej podstronie w witrynie, przycisk pozostanie w pozycji włączonej. To samo tyczy się styli dla każdego elementu, które nadasz w pliku "dark.css".
JAVASCRIPT
Najpierw ściągnijmy nasze body i nasz przycisk:
const body = document.querySelector('body');
const colorSchemeBtn = body.querySelector('.color-scheme-btn');
Następnie pozwólmy przeglądarce użytkownika zapisać ustawienie naszego trybu, żeby tryb ciemny pozostawał uruchomiony na każdej stronie w witrynie:
let darkMode = sessionStorage.getItem('darkMode');
Jeśli chcesz, żeby tryb ciemny pozostał włączony nawet jak użytkownik opuści stronę to zamiast sessionStorage możesz użyć localStorage. W ten sposób zapisujemy ustawienia w witrynie lokalnie w przeglądarce użytkownika i tryb ciemny pozostanie włączony nawet jak użytkownik opuści stronę i wróci do niej po dłuższym czasie.
Teraz napiszmy funkcję, która będzie dodawać i usuwać klasę "dark-mode" z naszego body:
const enableDarkMode = () => {
body.classList.add("dark-mode");
sessionStorage.setItem("darkMode", "enabled")
}
const disableDarkMode = () => {
body.classList.remove("dark-mode");
sessionStorage.setItem("darkMode", null)
}
if (darkMode == "enabled") {
enableDarkMode();
}
Teraz podepnijmy nasłuchiwanie na kliknięcie przycisku, żeby wywołać funkcję:
colorSchemeBtn.addEventListener('click', () => {
darkMode = sessionStorage.getItem('darkMode');
if (darkMode !== 'enabled') {
enableDarkMode();
} else {
disableDarkMode();
}
});
Wszystko, co musisz zrobić, to dodać przycisk HTML tam, gdzie chcesz, żeby dodawał plik "dark.css". Zrób tak na każdej stronie, żeby można było przełączać tryby z każdego miejsca.
Jeśli nie masz doświadczenia z JavaScriptem to polecam tworzyć osobne pliki .js dla każdej strony/podstrony, żeby uniknąć błędów związanych ze ściąganiem plików, które na jednej stronie istnieją, a na drugiej już nie.
Co się teraz dzieje to to, że ustalamy nowe style w zależności od tego, czy body ma w sobie klasę trybu ciemnego, czy też nie. Kod zasadniczo mówi, że jeśli ciało nie ma klasy „trybu ciemnego” to wybierz ten element i dodaj do niego te klasę. Kiedy body nie ma klasy trybu ciemnego, kod ten nie zostanie uruchomiony, więc style nigdy nie zostaną zmienione na ciemne. Ten kod można uruchomić tylko wtedy, gdy klasa trybu ciemnego znajduje się w body. Zatem wszystko, co musimy zrobić dla każdego stylu trybu ciemnego, to poprzedzić selektor słowami „body.dark-mode” i to wszystko - dodałaś/eś style trybu ciemnego! Przycisk przełączania, który podałem w powyższym kodzie, wykonuje całą pracę, więc za każdym razem, gdy jest przełączany, klasa "dark-mode" jest dodawana i usuwana z body, więc tryb ciemny jest włączany i wyłączany. To wszystko, co musisz zrobić. Żadnych zbędnych frameworków. Po prostu dobry, staroświecki Vanilla Code.
Prawdopodobnie spędzisz najwięcej czasu umieszczając przycisk na pasku nawigacyjnym lub gdziekolwiek indziej. Najłatwiejszym rozwiązaniem jest nadanie mu position: absolute.
Pamiętaj, żeby umieścić przycisk na samej górze kodu, żeby był pierwszą rzeczą, na której skupi się czytnik ekranu. Poprawiamy wtedy nasze accessibility, a do tego przyspieszamy ładowanie się FCP, czyli pierwszego co widzi użytkownik po otwarciu naszej strony.
Dlaczego powinniśmy dodawać tryb ciemny do naszych witryn?
Ostatnimi czasy dodanie trybu ciemnego do witryny internetowej zaczyna zyskiwać na popularności zwłaszcza w Ameryce Północnej. Do niedawna dostępność sieci była po prostu przyjemną funkcją, którą można było mieć, jeśli posiadało się pieniądze, ale teraz staje się bardziej koniecznością. Tryb ciemny może pomóc w rozwiązaniu wielu problemów z dostępnością Internetu w witrynie, eliminując problemy z kontrastem, dostosowując się do potrzeb tych, którzy chcą oglądać wszystko przy mniejszej jasności i mniejszej obecności białego światła.
Jeśli nigdy nie słyszałaś/eś o dostępności sieci, witaj w nowym świecie. Dostępność sieci ma związek ze sposobem, w jaki osoby z niepełnosprawnością wzrokową, motoryczną/ruchową, słuchową, z ryzykiem napadów padaczkowych oraz z niepełnosprawnością poznawczą/intelektualną korzystają z sieci. Tryb ciemny umożliwia programistom poprawianie tekstu o niskim współczynniku kontrastu w stosunku do tła, dzięki czemu osoby wrażliwe na światło nie będą miały większych problemów z czytaniem Twojej witryny.
Na przykład, gdy pracujesz z marką firmy, często nie możesz po prostu zmienić koloru marki, aby uczynić ją bardziej dostępną, więc zamiast zmieniać kolor marki w tekście, zmieniamy tło, na którym znajduje się tekst. Oczywiście tryb ciemny nie polega tylko na zmianie tła na czarne, ale na przekształceniu strony internetowej i jej zawartości w użyteczny, piękny układ.
Wyobraź sobie, że elementy witryny są ułożone jeden na drugim. Najniższa warstwa (korpus) będzie najciemniejsza. Jeśli na wierzchu znajduje się element karty, tło tej karty będzie jaśniejsze, a jeśli wewnątrz tej karty będzie inny ciemny element, to będzie jaśniejszy niż karta. To dobra zasada, której należy przestrzegać podczas tworzenia ciemnego motywu. Wygląda to o wiele lepiej, gdy użyjesz hierarchii wizualnej, aby pokazać głębię. Najciemniejsze elementy schodzą na dół, a ich kolor staje się coraz jaśniejszy w miarę układania się jeden na drugim.
Dodanie trybu ciemnego do niestandardowej witryny internetowej jest moim zdaniem jednym z tych nowych trendów w tworzeniu stron internetowych, które warto wypróbować we wszystkich swoich witrynach. Nie tylko poprawia to dostępność Twojej witryny, ale także dodaje jej efektu „wow”. Tryb ciemny z pewnością wyróżni Twojego klienta na tle konkurencji i pokaże firmę bardziej przyszłościowo myślącą, która poważnie podchodzi do każdego aspektu swojej działalności, łącznie ze stroną internetową.