M

MLOG

Eesti

Uurige CSS-i meediapäringute ja kohandatud omaduste võimsust, et luua automaatseid heledaid ja tumedaid teemasid, mis kohanduvad kasutajate eelistustega, parandades ligipääsetavust ja visuaalset atraktiivsust globaalsele publikule.

CSS-i Light-Dark Funktsioon: Automaatne Teema Kohandamine Globaalsele Veebile

Tänapäeva globaalselt ühendatud maailmas peavad veebisaidid olema ligipääsetavad ja visuaalselt atraktiivsed erineva tausta ja eelistustega kasutajatele. Üks tõhusamaid viise selle saavutamiseks on automaatne teema kohandamine, pakkudes spetsiifiliselt nii heledat kui ka tumedat teemat, mis kohanduvad kasutaja süsteemiseadetega. See blogipostitus juhendab teid selle funktsionaalsuse rakendamisel, kasutades CSS-i meediapäringuid ja kohandatud omadusi, tagades sujuva ja mugava sirvimiskogemuse teie rahvusvahelisele publikule.

Miks Rakendada Automaatseid Heledaid ja Tumedaid Teemasid?

On mitmeid kaalukaid põhjuseid, miks lisada automaatne teema kohandamine oma veebiprojektidesse:

Kuidas Rakendada Automaatset Teema Kohandamist CSS-iga

Automaatse teema kohandamise tuumaks on prefers-color-scheme meediapäring. See CSS-i meediapäring võimaldab teil tuvastada kasutaja eelistatud värviskeemi (hele või tume) ja rakendada vastavaid stiile.

Samm 1: Määratlege Kohandatud Omadused (CSS Muutujad)

Alustage kohandatud omaduste (CSS muutujate) määratlemisega, et salvestada oma heleda ja tumeda teema värviväärtused. See teeb teemade vahel vahetamise lihtsaks, uuendades lihtsalt muutujate väärtusi.


:root {
  --background-color: #ffffff; /* Heleda teema taust */
  --text-color: #000000; /* Heleda teema tekst */
  --link-color: #007bff; /* Heleda teema link */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Tumeda teema taust */
    --text-color: #ffffff; /* Tumeda teema tekst */
    --link-color: #66b3ff; /* Tumeda teema link */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Selles näites määratleme muutujad taustavärvi, tekstivärvi, lingivärvi ja nupuvärvide jaoks. :root selektor rakendab need muutujad kogu dokumendile. @media (prefers-color-scheme: dark) meediapäring kirjutab need muutujad üle tumeda teema väärtustega, kui kasutaja on oma süsteemi seadistanud tumedasse režiimi.

Samm 2: Rakendage Kohandatud Omadused Oma Stiilidele

Järgmiseks rakendage need kohandatud omadused oma CSS-stiilidele, et kontrollida oma veebisaidi elementide välimust.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Sujuv üleminek */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Siin kasutame var() funktsiooni, et pääseda ligi meie kohandatud omaduste väärtustele. Oleme lisanud ka transition omaduse body elemendile, et luua sujuv üleminek teemade vahel.

Samm 3: Testimine ja Viimistlemine

Testige oma rakendust põhjalikult erinevates brauserites ja operatsioonisüsteemides. Kaasaegsed brauserid nagu Chrome, Firefox, Safari ja Edge toetavad täielikult prefers-color-scheme meediapäringut. Saate oma operatsioonisüsteemi seadetes vahetada heleda ja tumeda režiimi vahel, et näha muudatusi oma veebisaidil.

Täpsemad Tehnikad ja Kaalutlused

Manuaalse Teemavahetuse Pakkumine

Kuigi automaatne teema kohandamine on suurepärane alguspunkt, võivad mõned kasutajad eelistada oma süsteemiseadeid käsitsi üle kirjutada. Saate pakkuda manuaalset teemavahetust, kasutades JavaScripti ja local storage'it.

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Vaikimisi 'auto'

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Rakenda esialgne teema lehe laadimisel
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // Kui on seatud 'auto', laseb prefers-color-scheme otsustada
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Lisage järgmine CSS koos eelmise CSS-iga. Pange tähele manuaalset ülekirjutamist:


body.light-theme {
  --background-color: #ffffff; /* Heleda teema taust */
  --text-color: #000000; /* Heleda teema tekst */
  --link-color: #007bff; /* Heleda teema link */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Tumeda teema taust */
  --text-color: #ffffff; /* Tumeda teema tekst */
  --link-color: #66b3ff; /* Tumeda teema link */
  --button-background-color: #333;
  --button-text-color: #fff;
}

See koodilõik lisab nupu, mis võimaldab kasutajatel lülituda heleda, tumeda ja automaatse teema vahel. Valitud teema salvestatakse local storage'isse, nii et see püsib ka lehe uuesti laadimisel.

Piltide ja SVG-de Käsitlemine

Mõned pildid ja SVG-d ei pruugi nii heledas kui ka tumedas teemas head välja näha. Saate kasutada CSS-i meediapäringuid, et tingimuslikult kuvada nende varade erinevaid versioone.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

See koodilõik näitab ühte pilti (klassiga light-mode) heledas režiimis ja teist pilti (klassiga dark-mode) tumedas režiimis.

Värvipaleti Kaalutlused Rahvusvahelisele Publikule

Heleda ja tumeda teema värvipalettide valimisel arvestage kultuuriliste seoste ja ligipääsetavuse kaalutlustega. Siin on mõned üldised juhised:

Jõudluse Kaalutlused

Kuigi automaatse teema kohandamise rakendamine on suhteliselt lihtne, on oluline arvestada võimalikku mõju jõudlusele. Vältige liiga keeruliste CSS-selektorite või animatsioonide kasutamist, mis võivad renderdamist aeglustada. Samuti veenduge, et teie kohandatud omadused on tõhusalt määratletud, et minimeerida muutujate otsimise lisakulu.

Siin on mõned parimad praktikad jõudluse optimeerimiseks:

Ligipääsetavuse Parimad Praktikad

Veenduge, et teie hele ja tume teema vastavad ligipääsetavuse juhistele, nagu WCAG (Web Content Accessibility Guidelines). See hõlmab piisava värvikontrastsuse tagamist, semantilise HTML-i kasutamist ja selle tagamist, et kõik interaktiivsed elemendid on klaviatuuriga ligipääsetavad.

Siin on mõned spetsiifilised ligipääsetavuse parimad praktikad, mida järgida:

Näited Erinevatest Piirkondadest

Kaaluge neid näiteid, kuidas heledaid ja tumedaid teemasid saab kohandada mitmekesisele globaalsele publikule:

Kokkuvõte

Automaatsete heledate ja tumedate teemade rakendamine on oluline samm ligipääsetavama ja kasutajasõbralikuma veebikogemuse loomisel globaalsele publikule. Kasutades CSS-i meediapäringuid ja kohandatud omadusi, saate hõlpsasti kohandada oma veebisaidi välimust vastavalt kasutaja eelistustele, vähendada silmade pinget ja parandada ligipääsetavust nägemispuudega kasutajatele. Pidage meeles arvestada kultuuriliste seoste, ligipääsetavuse juhiste ja jõudluse kaalutlustega, et tagada sujuv ja kaasav sirvimiskogemus kõigile.

Nende tehnikate kasutuselevõtuga näitate pühendumust kaasaegsetele veebidisaini põhimõtetele ja vastate oma rahvusvahelise publiku mitmekesistele vajadustele, muutes oma veebisaidi kõigile tervitatavaks ja mugavaks kohaks.