Tamsusis režimas tapo populiariu pasirinkimu, todėl turėtumėte pasirūpinti, kad jis būtų palaikomas savo svetainėse ir žiniatinklio programose.
Pastaraisiais metais tamsusis režimas įgijo didelį populiarumą kaip vartotojo sąsajos parinktis. Jis siūlo tamsesnį foną ir šviesesnį tekstą, kuris ne tik sumažina akių įtampą, bet ir taupo baterijos veikimo laiką, ypač OLED ekranuose.
Sužinokite, kaip galite pridėti tamsaus režimo parinktį į savo svetaines ir žiniatinklio programas naudodami CSS ir JavaScript derinį.
Tamsaus režimo supratimas
Tamsus režimas yra alternatyvi spalvų schema jūsų svetainei, kuri pakeičia tradicinį šviesų foną į tamsų. Tai palengvina jūsų puslapius akims, ypač esant prastam apšvietimui. Tamsusis režimas tapo standartine daugelio svetainių ir programų funkcija dėl savo patogumo.
Projekto nustatymas
Prieš tai įgyvendindami įsitikinkite, kad turite parengtą projektą ir pasiruošę dirbti. HTML, CSS ir JavaScript failai turėtų būti sutvarkyti struktūriškai.
HTML kodas
Pradėkite nuo šio puslapio turinio žymėjimo. Lankytojas galės naudotis
temos__jungiklis elementą, kad perjungtumėte tarp tamsaus ir šviesaus režimo.<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>
CSS kodas
Pridėkite šį CSS, kad sukurtumėte pavyzdžio stilių. Tai veiks kaip numatytasis šviesos režimas, kurį vėliau papildysite naujais tamsiojo režimo rodinio stiliais.
@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);
}
Šiuo metu jūsų sąsaja turėtų atrodyti taip:
Tamsiojo režimo įgyvendinimas naudojant CSS ir JavaScript
Norėdami įdiegti tamsųjį režimą, nustatysite jo išvaizdą naudodami CSS. Tada naudosite „JavaScript“, kad perjungtumėte iš tamsaus ir šviesaus režimo.
Temų klasių kūrimas
Kiekvienai temai naudokite vieną klasę, kad galėtumėte lengvai perjungti abu režimus. Norėdami sukurti išsamesnį projektą, turėtumėte apsvarstyti, kaip tai padaryti tamsusis režimas gali turėti įtakos kiekvienam jūsų dizaino aspektui.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Interaktyvių elementų pasirinkimas
Pridėkite šį „JavaScript“ prie savo script.js failą. Pirmasis kodo bitas tiesiog pasirenka elementus, kuriuos naudosite perjungimui valdyti.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Perjungimo funkcijos pridėjimas
Tada naudokite šį „JavaScript“, kad perjungtumėte šviesos režimą (šviesa) ir tamsus režimas (tamsus) klases. Atminkite, kad taip pat naudinga pakeisti perjungimo jungiklį, kad būtų rodomas dabartinis režimas. Šis kodas tai daro su CSS filtras.
// 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);
Tai privers jūsų puslapį pakeisti temas spustelėjus perjungimo sudėtinį rodinį.
Tamsaus režimo tobulinimas naudojant „JavaScript“.
Apsvarstykite šiuos du patobulinimus, kurie gali padaryti jūsų tamsiojo režimo svetaines malonesnę lankytojams.
Vartotojo nuostatų aptikimas
Tai apima vartotojo sistemos temos patikrinimą prieš įkeliant svetainę ir jos pritaikymą, kad ji atitiktų. Štai kaip galite tai padaryti naudodami matchMedia funkcija:
// 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();
Dabar bet kuris jūsų svetainėje apsilankęs naudotojas matys dizainą, atitinkantį jo įrenginio dabartinę temą.
Nuolatinė vartotojo nuostata su vietine saugykla
Norėdami dar labiau pagerinti vartotojo patirtį, naudoti vietinę saugyklą kad prisimintų vartotojo pasirinktą režimą per seansus. Taip užtikrinama, kad jiems nereikės pakartotinai rinktis pageidaujamo režimo.
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");
}
Į vartotoją orientuotas dizainas
Tamsus režimas neapsiriboja išvaizda; svarbiausia, kad vartotojo patogumas ir pageidavimai. Laikydamiesi šio metodo galite sukurti patogias sąsajas ir paskatinti pakartotinius apsilankymus. Koduodami ir kurdami pirmenybę teikite naudotojų gerovei ir teikite savo skaitytojams geresnę skaitmeninę patirtį.
