Tryb ciemny stał się popularną preferencją, dlatego warto zadbać o jego obsługę w swoich witrynach i aplikacjach internetowych.
W ostatnich latach tryb ciemny zyskał znaczną popularność jako opcja interfejsu użytkownika. Oferuje ciemniejsze tło uzupełnione jaśniejszym tekstem, co nie tylko zmniejsza zmęczenie oczu, ale także oszczędza żywotność baterii, szczególnie na ekranach OLED.
Dowiedz się, jak dodać opcję trybu ciemnego do swoich witryn i aplikacji internetowych, korzystając z kombinacji CSS i JavaScript.
Zrozumienie trybu ciemnego
Tryb ciemny to alternatywny schemat kolorów dla Twojej witryny internetowej, która zamienia tradycyjne jasne tło na ciemne. Dzięki temu Twoje strony będą mniej męczące dla oczu, szczególnie w warunkach słabego oświetlenia. Tryb ciemny stał się standardową funkcją w wielu witrynach internetowych i aplikacjach ze względu na jego przyjazny dla użytkownika charakter.
Konfigurowanie projektu
Zanim to zaimplementujesz, upewnij się, że masz skonfigurowany projekt i gotowy do pracy. Pliki HTML, CSS i JavaScript należy uporządkować.
Kod HTML
Zacznij od następującego znacznika treści swojej strony. Gość będzie mógł skorzystać z przełącznik motywu__ element umożliwiający przełączanie pomiędzy trybem ciemnym i jasnym.
<body>
<navclass="navbar">
<spanclass="logo">Company Logospan><ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul><divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav><main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.
main>
<scriptsrc="./script.js">script>
body>
Kod CSS
Dodaj następujący CSS, aby nadać styl przykładowi. Będzie to działać jako domyślny tryb jasny, który później rozszerzysz o nowe style dla widoku w trybie ciemnym.
@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}
.navbarspan { margin-right: auto; }
.logo { font-weight: 700; }
.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}
#theme__switcher { cursor: pointer; }
main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}
W tej chwili Twój interfejs powinien wyglądać następująco:
Implementacja trybu ciemnego przy użyciu CSS i JavaScript
Aby zaimplementować tryb ciemny, zdefiniujesz jego wygląd za pomocą CSS. Następnie użyjesz JavaScript do obsługi przełączania między trybem ciemnym i jasnym.
Tworzenie klas tematycznych
Użyj jednej klasy dla każdego motywu, aby móc łatwo przełączać się między dwoma trybami. Aby uzyskać pełniejszy projekt, należy rozważyć, w jaki sposób tryb ciemny może mieć wpływ na każdy aspekt Twojego projektu.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Wybór elementów interaktywnych
Dodaj następujący JavaScript do pliku skrypt.js plik. Pierwszy fragment kodu po prostu wybiera elementy, których będziesz używać do obsługi przełącznika.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Dodanie funkcji przełączania
Następnie użyj następującego kodu JavaScript, aby przełączyć między trybem światła (światło) i tryb ciemny (ciemny) zajęcia. Pamiętaj, że dobrym pomysłem jest również przestawienie przełącznika tak, aby wskazywał bieżący tryb. Ten kod robi to za pomocą filtr CSS.
// Function to set the themefunctionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
bodyEl.classList.toggle("dark", theme "dark");
// If the theme is "light," add the "light" class, remove "dark" class,
bodyEl.classList.toggle("light", theme !== "dark");
// adjust filter of the toggle switch
themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}
// Function to toggle the theme between light and dark
functiontoggleTheme() {
setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}
themeToggle.addEventListener("click", toggleTheme);
Dzięki temu Twoja strona zmienia motywy jednym kliknięciem kontenera przełączającego.
Ulepszanie trybu ciemnego za pomocą JavaScript
Rozważ następujące dwa ulepszenia, które mogą sprawić, że korzystanie z witryn w trybie ciemnym będzie przyjemniejsze dla odwiedzających.
Wykrywanie preferencji użytkownika
Wiąże się to ze sprawdzeniem motywu systemu użytkownika przed załadowaniem witryny i dostosowaniem do niej witryny. Oto jak możesz to zrobić za pomocą meczMedia funkcjonować:
// Function to detect user's preferred themefunctiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
// Run the function to detect the user's preferred theme
detectPreferredTheme();
Teraz każdy użytkownik odwiedzający Twoją witrynę zobaczy projekt pasujący do aktualnego motywu jego urządzenia.
Stałe preferencje użytkownika dzięki pamięci lokalnej
Aby jeszcze bardziej poprawić komfort użytkownika, użyj pamięci lokalnej do zapamiętywania wybranego przez użytkownika trybu podczas sesji. Dzięki temu nie muszą wielokrotnie wybierać preferowanego trybu.
functionsetTheme(theme) {
bodyEl.classList.toggle("dark", theme "dark");
bodyEl.classList.toggle("light", theme !== "dark");themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
// Setting the theme in local storage
localStorage.setItem("theme", theme);
}// Check if the theme is stored in local storage
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}
Obejmując projektowanie zorientowane na użytkownika
Tryb ciemny wykracza poza wygląd; chodzi o to, aby na pierwszym miejscu stawiać komfort i preferencje użytkownika. Stosując to podejście, możesz stworzyć przyjazne dla użytkownika interfejsy i zachęcić do ponownych wizyt. Podczas kodowania i projektowania traktuj priorytetowo dobro użytkowników i zapewniaj swoim czytelnikom lepsze wrażenia cyfrowe.
