Paano Ipatupad ang Dark Mode Gamit ang CSS at JS

Paano Ipatupad ang Dark Mode Gamit ang CSS at JS
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Sa mga nakalipas na taon, ang dark mode ay nakakuha ng malaking katanyagan bilang isang opsyon sa user interface. Nag-aalok ito ng mas madilim na background na kinumpleto ng mas magaan na text, na hindi lamang nakakabawas sa strain ng mata ngunit nakakatipid din sa buhay ng baterya, lalo na sa mga OLED screen.





Tuklasin kung paano ka makakapagdagdag ng opsyon sa dark mode sa iyong mga website at web app, gamit ang kumbinasyon ng CSS at JavaScript.



kung paano gawing mas mabilis ang iyong ps4

Pag-unawa sa Dark Mode

Ang dark mode ay isang alternatibong scheme ng kulay para sa iyong website na pinapalitan ang tradisyonal na liwanag na background para sa isang madilim. Pinapadali nito ang iyong mga pahina sa paningin, lalo na sa mga kondisyong mababa ang liwanag. Ang dark mode ay naging karaniwang feature sa maraming website at application dahil sa pagiging madaling gamitin nito.





Pag-set Up ng Iyong Proyekto

Bago mo ito ipatupad, tiyaking mayroon kang naka-set up na proyekto at handa nang gawin. Dapat ay nakaayos ang iyong HTML, CSS, at JavaScript na mga file sa isang structured na paraan.

Ang HTML Code

Magsimula sa sumusunod na markup para sa nilalaman ng iyong pahina. Magagamit ng isang bisita ang theme__switcher elemento upang magpalipat-lipat sa pagitan ng dark at light mode.



<body> 
    <navclass="navbar"> 
        <spanclass="logo">Company Logo</span> 
 
        <ulclass="nav__lists"> 
            <li>About</li> 
            <li>Blog</li> 
            <li>Contact</li> 
        </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>

Ang CSS Code

Idagdag ang sumusunod na CSS sa istilo ng halimbawa. Ito ay magsisilbing default na light mode na iyong palalakihin sa ibang pagkakataon gamit ang mga bagong istilo para sa dark mode na view.

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

Sa ngayon, ang iyong interface ay dapat magmukhang ganito:



Paunang UI pagkatapos mailapat ang HTML at CSS

Pagpapatupad ng Dark Mode Gamit ang CSS at JavaScript

Para ipatupad ang dark mode, tutukuyin mo ang hitsura nito gamit ang CSS. Pagkatapos ay gagamitin mo ang JavaScript upang pangasiwaan ang paglipat sa pagitan ng madilim at maliwanag na mode.

Paglikha ng Theme Classes

Gumamit ng isang klase para sa bawat tema upang madali kang lumipat sa pagitan ng dalawang mode. Para sa isang mas kumpletong proyekto, dapat mong isaalang-alang kung paano maaaring makaapekto ang dark mode sa bawat aspeto ng iyong disenyo .



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

Pagpili ng Interactive na Elemento

Idagdag ang sumusunod na JavaScript sa iyong script.js file. Pinipili lang ng unang bit ng code ang mga elementong gagamitin mo para pangasiwaan ang toggle.

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

Pagdaragdag ng Toggle Functionality

Susunod, gamitin ang sumusunod na JavaScript upang magpalipat-lipat sa pagitan ng light mode ( liwanag ) at dark mode ( madilim ) mga klase. Tandaan na magandang ideya din na baguhin ang toggle switch upang isaad ang kasalukuyang mode. Ginagawa ito ng code na ito sa isang CSS filter .

// 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);

Ginagawa nitong baguhin ng iyong page ang mga tema sa isang pag-click ng toggle container.

Na-toggle ang UI pagkatapos ng dark mode

Pagpapahusay ng Dark Mode Gamit ang JavaScript

Isaalang-alang ang sumusunod na dalawang pagpapahusay na maaaring gawing mas kaaya-ayang gamitin ang iyong mga dark mode na site para sa iyong mga bisita.

Pagtukoy sa Mga Kagustuhan ng User

Kabilang dito ang pagsuri sa tema ng system ng user bago mag-load ang website at pagsasaayos ng iyong site upang tumugma. Narito kung paano mo ito magagawa gamit ang matchMedia function:

// 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();

Ngayon, ang sinumang user na bumisita sa iyong site ay makakakita ng disenyo na tumutugma sa kasalukuyang tema ng kanilang device.

Patuloy na Kagustuhan ng User Gamit ang Lokal na Imbakan

Upang higit na mapahusay ang karanasan ng gumagamit, gumamit ng lokal na imbakan para matandaan ang napiling mode ng user sa mga session. Tinitiyak nito na hindi nila kailangang paulit-ulit na piliin ang kanilang ginustong mode.

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

Pagyakap sa User-Centric Design

Ang dark mode ay higit pa sa hitsura; ito ay tungkol sa pag-una sa kaginhawahan at kagustuhan ng user. Sa pamamagitan ng pagsunod sa diskarteng ito, maaari kang lumikha ng mga interface na madaling gamitin at hikayatin ang mga paulit-ulit na pagbisita. Habang nagko-code at nagdidisenyo ka, unahin ang kapakanan ng user, at naghahatid ng mas magandang karanasan sa digital para sa iyong mga mambabasa.