Tumšais režīms ir kļuvis par populāru izvēli, tāpēc jums vajadzētu mēģināt to atbalstīt savās vietnēs un tīmekļa lietotnēs.

Pēdējos gados tumšais režīms ir ieguvis ievērojamu popularitāti kā lietotāja interfeisa opcija. Tas piedāvā tumšāku fonu, ko papildina gaišāks teksts, kas ne tikai samazina acu nogurumu, bet arī ietaupa akumulatora darbības laiku, īpaši OLED ekrānos.

Atklājiet, kā varat pievienot tumšā režīma opciju savām vietnēm un tīmekļa lietotnēm, izmantojot CSS un JavaScript kombināciju.

Tumšā režīma izpratne

Tumšais režīms ir alternatīva krāsu shēma jūsu vietnei, kas maina tradicionālo gaišo fonu pret tumšo. Tas atvieglo jūsu lapas acīm, īpaši vājā apgaismojumā. Tumšais režīms ir kļuvis par standarta funkciju daudzās vietnēs un lietojumprogrammās, jo tas ir ērti lietojams.

Jūsu projekta iestatīšana

Pirms to īstenojat, pārliecinieties, vai projekts ir izveidots un gatavs darbam. HTML, CSS un JavaScript faili ir jāsakārto strukturētā veidā.

HTML kods

Sāciet ar tālāk norādīto savas lapas satura marķējumu. Apmeklētājs varēs izmantot

instagram viewer
theme__switcher elements, lai pārslēgtos starp tumšo un gaišo režīmu.

<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 kods

Pievienojiet šādu CSS, lai veidotu piemēru. Tas darbosies kā noklusējuma gaismas režīms, ko vēlāk papildināsiet ar jauniem stiliem tumšā režīma skatam.

@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);
}

Pašlaik jūsu saskarnei vajadzētu izskatīties šādi:

Tumšā režīma ieviešana, izmantojot CSS un JavaScript

Lai ieviestu tumšo režīmu, tā izskats ir jānosaka, izmantojot CSS. Pēc tam izmantosit JavaScript, lai pārslēgtos starp tumšo un gaišo režīmu.

Tēmu nodarbību izveide

Katrai tēmai izmantojiet vienu nodarbību, lai varētu viegli pārslēgties starp diviem režīmiem. Lai iegūtu pilnīgāku projektu, jums vajadzētu apsvērt, kā to izdarīt tumšais režīms var ietekmēt visus jūsu dizaina aspektus.

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Interaktīvo elementu izvēle

Pievienojiet savai valodai šādu JavaScript script.js failu. Pirmais koda bits vienkārši atlasa elementus, ko izmantosit, lai apstrādātu pārslēgšanu.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Pārslēgšanas funkcionalitātes pievienošana

Pēc tam izmantojiet šo JavaScript, lai pārslēgtos starp gaismas režīmu (gaisma) un tumšais režīms (tumšs) klases. Ņemiet vērā, ka ir arī ieteicams mainīt pārslēgšanas slēdzi, lai norādītu pašreizējo režīmu. Šis kods to dara ar CSS filtrs.

// Function to set the theme
functionsetTheme(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);

Tas liek jūsu lapai mainīt motīvus, noklikšķinot uz pārslēgšanas konteinera.

Tumšā režīma uzlabošana ar JavaScript

Apsveriet šādus divus uzlabojumus, kas var padarīt jūsu tumšā režīma vietnes apmeklētājiem patīkamāku.

Lietotāja preferenču noteikšana

Tas ietver lietotāja sistēmas motīva pārbaudi pirms vietnes ielādes un vietnes pielāgošanu. Lūk, kā to var izdarīt, izmantojot matchMedia funkcija:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// 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();

Tagad ikviens lietotājs, kas apmeklēs jūsu vietni, redzēs dizainu, kas atbilst viņa ierīces pašreizējai tēmai.

Pastāvīga lietotāja izvēle ar vietējo krātuvi

Lai vēl vairāk uzlabotu lietotāja pieredzi, izmantojiet vietējo krātuvi lai atcerētos lietotāja izvēlēto režīmu sesijās. Tas nodrošina, ka viņiem nav atkārtoti jāizvēlas vēlamais režīms.

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");
}

Uz lietotāju orientēts dizains

Tumšais režīms pārsniedz izskatu; tas ir par lietotāja komforta un preferenču izvirzīšanu pirmajā vietā. Ievērojot šo pieeju, varat izveidot lietotājam draudzīgas saskarnes un veicināt atkārtotus apmeklējumus. Kodējot un izstrādājot, piešķiriet prioritāti lietotāju labklājībai un sniedziet labāku digitālo pieredzi saviem lasītājiem.