Tummasta tilasta on tullut suosittu mieltymys, joten sinun kannattaa yrittää tukea sitä sivustoillasi ja verkkosovelluksissasi.
Viime vuosina tumma tila on saavuttanut merkittävän suosion käyttöliittymävaihtoehtona. Se tarjoaa tummemman taustan, jota täydentää vaaleampi teksti, mikä paitsi vähentää silmien rasitusta, myös säästää akun käyttöikää, erityisesti OLED-näytöissä.
Tutustu kuinka voit lisätä pimeän tilan vaihtoehdon verkkosivustoihisi ja verkkosovelluksiisi käyttämällä CSS: n ja JavaScriptin yhdistelmää.
Tumman tilan ymmärtäminen
Tumma tila on vaihtoehtoinen värimaailma verkkosivustollesi, joka vaihtaa perinteisen vaalean taustan tummaan. Se helpottaa sivujasi silmille, etenkin hämärässä. Tummasta tilasta on tullut vakioominaisuus monilla verkkosivustoilla ja sovelluksissa sen käyttäjäystävällisyyden vuoksi.
Projektin määrittäminen
Ennen kuin otat tämän käyttöön, varmista, että sinulla on projekti perustettu ja valmis työskentelemään. Sinun tulee järjestää HTML-, CSS- ja JavaScript-tiedostot jäsennellysti.
HTML-koodi
Aloita seuraavalla sivusi sisällön merkinnällä. Vierailija voi käyttää teema__vaihtaja elementti vaihtaaksesi tumman ja vaalean tilan välillä.
<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-koodi
Lisää seuraava CSS muotoilemaan esimerkkiä. Tämä toimii oletusvalotilana, jota täydennät myöhemmin uusilla tyyleillä pimeän tilan näkymää varten.
@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);
}
Tällä hetkellä käyttöliittymäsi pitäisi näyttää tältä:
Tumman tilan käyttöönotto CSS: n ja JavaScriptin avulla
Tumman tilan toteuttamiseksi määrität sen ulkoasun CSS: n avulla. Käytät sitten JavaScriptiä vaihtamiseen tumman ja vaalean tilan välillä.
Teemakurssien luominen
Käytä yhtä luokkaa kullekin teemalle, jotta voit helposti vaihtaa kahden tilan välillä. Täydellisen projektin saamiseksi sinun tulee harkita, miten tumma tila voi vaikuttaa suunnittelusi kaikkiin puoliin.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Interaktiivisten elementtien valitseminen
Lisää seuraava JavaScript omaan script.js tiedosto. Ensimmäinen koodibitti valitsee vain elementit, joita käytät vaihdon käsittelemiseen.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Toggle-toiminnon lisääminen
Käytä seuraavaksi seuraavaa JavaScriptiä vaihtaaksesi valotilan välillä (valoa) ja tumma tila (tumma) luokat. Huomaa, että on myös hyvä idea muuttaa vaihtokytkintä osoittamaan nykyinen tila. Tämä koodi tekee niin kanssa CSS-suodatin.
// 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);
Tämä saa sivusi vaihtamaan teemoja napsauttamalla vaihtosäilöä.
Tumman tilan parantaminen JavaScriptillä
Harkitse seuraavia kahta parannusta, jotka voivat tehdä pimeän tilan sivustoistasi miellyttävämpiä vierailijoillesi.
Käyttäjäasetusten tunnistaminen
Tämä edellyttää käyttäjän järjestelmäteeman tarkistamista ennen verkkosivuston latautumista ja sivuston säätämistä vastaavaksi. Näin voit tehdä sen käyttämällä matchMedia toiminto:
// 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();
Nyt jokainen sivustollasi vieraileva käyttäjä näkee suunnittelun, joka vastaa heidän laitteensa nykyistä teemaa.
Pysyvä käyttäjäasetus paikallisen tallennustilan kanssa
Parantaaksesi käyttökokemusta entisestään, käytä paikallista tallennustilaa muistaaksesi käyttäjän valitseman tilan istuntojen aikana. Tämä varmistaa, että heidän ei tarvitse toistuvasti valita haluamaansa tilaa.
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");
}
Käyttäjäkeskeinen suunnittelu
Tumma tila ylittää ulkonäön; Kyse on käyttäjän mukavuuden ja mieltymysten asettamisesta etusijalle. Noudattamalla tätä lähestymistapaa voit luoda käyttäjäystävällisiä käyttöliittymiä ja kannustaa toistuviin vierailuihin. Kun koodaat ja suunnittelet, aseta käyttäjien hyvinvointi etusijalle ja tarjoa lukijoillesi parempi digitaalinen käyttökokemus.
