CSS Gaišās-Tumšās Tēmas Funkcija: Automātiska Tēmas Pielāgošana Globālajam Tīmeklim

Mūsdienu globāli savienotajā pasaulē tīmekļa vietnēm ir jābūt pieejamām un vizuāli pievilcīgām lietotājiem ar dažādu izcelsmi un preferencēm. Viens no efektīvākajiem veidiem, kā to panākt, ir automātiska tēmas pielāgošana, īpaši piedāvājot gan gaišo, gan tumšo tēmu, kas pielāgojas lietotāja sistēmas iestatījumiem. Šis emuāra ieraksts jūs vadīs cauri šīs funkcionalitātes ieviešanai, izmantojot CSS mediju vaicājumus un pielāgotās īpašības, nodrošinot nevainojamu un ērtu pārlūkošanas pieredzi jūsu starptautiskajai auditorijai.

Kāpēc ieviest automātiskās gaišās un tumšās tēmas?

Ir vairāki pārliecinoši iemesli, kāpēc iekļaut automātisko tēmas pielāgošanu savos tīmekļa projektos:

• Uzlabota lietotāja pieredze: Lietotājiem bieži ir izteikta preference par gaišām vai tumšām tēmām. Respektējot viņu sistēmas iestatījumus, jūs ļaujat viņiem pārlūkot jūsu vietni veidā, kas šķiet dabisks un ērts. Tas ir īpaši svarīgi lietotājiem, kuri pavada ilgas stundas pie ekrāniem, jo tumšās tēmas var samazināt acu nogurumu vāja apgaismojuma apstākļos.
• Uzlabota pieejamība: Gaišās un tumšās tēmas var būtiski uzlabot pieejamību lietotājiem ar redzes traucējumiem. Augsta kontrasta režīmi var padarīt tekstu vieglāk lasāmu, savukārt tumšās tēmas var samazināt atspīdumu un uzlabot lasāmību lietotājiem ar gaismas jutību.
• Mūsdienīgs tīmekļa dizains: Gaišo un tumšo tēmu ieviešana demonstrē apņemšanos ievērot mūsdienu tīmekļa dizaina principus un orientāciju uz lietotāju. Tas parāda, ka jums rūp noslīpētas un pielāgojamas pieredzes nodrošināšana.
• Samazināts acu nogurums: Īpaši svarīgi lietotājiem reģionos ar ilgām darba stundām pie datoriem (piemēram, daudzās Āzijas valstīs). Tumšā tēma mazinās slodzi uz viņu acīm.
• Akumulatora darbības laika taupīšana: Ierīcēs ar OLED ekrāniem tumšās tēmas var taupīt akumulatora enerģiju, samazinot izstarotās gaismas daudzumu. Tas ir aktuāli lietotājiem visā pasaulē, īpaši tiem, kas izmanto mobilās ierīces ar ierobežotu akumulatora ietilpību.

Kā ieviest automātisko tēmas pielāgošanu ar CSS

Automātiskās tēmas pielāgošanas pamatā ir prefers-color-scheme medija vaicājums. Šis CSS medija vaicājums ļauj noteikt lietotāja vēlamo krāsu shēmu (gaišu vai tumšu) un piemērot atbilstošus stilus.

1. solis: Definējiet pielāgotās īpašības (CSS mainīgos)

Sāciet, definējot pielāgotās īpašības (CSS mainīgos), lai saglabātu krāsu vērtības jūsu gaišajai un tumšajai tēmai. Tas atvieglo pārslēgšanos starp tēmām, vienkārši atjauninot mainīgo vērtības.

:root {
  --background-color: #ffffff; /* Gaišās tēmas fons */
  --text-color: #000000; /* Gaišās tēmas teksts */
  --link-color: #007bff; /* Gaišās tēmas saite */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Tumšās tēmas fons */
    --text-color: #ffffff; /* Tumšās tēmas teksts */
    --link-color: #66b3ff; /* Tumšās tēmas saite */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Šajā piemērā mēs definējam mainīgos fona krāsai, teksta krāsai, saites krāsai un pogu krāsām. :root selektors piemēro šos mainīgos visam dokumentam. Pēc tam @media (prefers-color-scheme: dark) medija vaicājums pārraksta šos mainīgos ar tumšās tēmas vērtībām, kad lietotājs savā sistēmā ir iestatījis tumšo režīmu.

2. solis: Piemērojiet pielāgotās īpašības saviem stiliem

Tālāk piemērojiet šīs pielāgotās īpašības saviem CSS stiliem, lai kontrolētu jūsu vietnes elementu izskatu.

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Plūstoša pāreja */
}

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

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

Šeit mēs izmantojam var() funkciju, lai piekļūtu mūsu pielāgoto īpašību vērtībām. Mēs esam arī pievienojuši transition īpašību body elementam, lai izveidotu plūstošu pāreju starp tēmām.

3. solis: Testēšana un pilnveidošana

Rūpīgi pārbaudiet savu implementāciju dažādās pārlūkprogrammās un operētājsistēmās. Mūsdienu pārlūkprogrammas, piemēram, Chrome, Firefox, Safari un Edge, pilnībā atbalsta prefers-color-scheme medija vaicājumu. Jūs varat pārslēgties starp gaišo un tumšo režīmu savas operētājsistēmas iestatījumos, lai redzētu izmaiņas savā vietnē.

Papildu tehnikas un apsvērumi

Manuāla tēmas pārslēdzēja nodrošināšana

Lai gan automātiskā tēmas pielāgošana ir lielisks sākumpunkts, daži lietotāji var vēlēties manuāli ignorēt savas sistēmas iestatījumus. Jūs varat nodrošināt manuālu tēmas pārslēdzēju, izmantojot JavaScript un lokālo krātuvi (local storage).

HTML:

<button id="theme-toggle">Pārslēgt tēmu</button>

JavaScript:

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

let currentTheme = localStorage.getItem('theme') || 'auto'; // Noklusējums ir '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;
}

// Piemērot sākotnējo tēmu lapas ielādes laikā
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Ja iestatīts uz 'auto', ļaut izlemt 'prefers-color-scheme'
}


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

CSS: Pievienojiet sekojošo CSS kopā ar iepriekšējo CSS. Ievērojiet manuālo pārrakstīšanu:

body.light-theme {
  --background-color: #ffffff; /* Gaišās tēmas fons */
  --text-color: #000000; /* Gaišās tēmas teksts */
  --link-color: #007bff; /* Gaišās tēmas saite */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Tumšās tēmas fons */
  --text-color: #ffffff; /* Tumšās tēmas teksts */
  --link-color: #66b3ff; /* Tumšās tēmas saite */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Šis koda fragments pievieno pogu, kas ļauj lietotājiem pārslēgties starp gaišo, tumšo un automātisko tēmu. Izvēlētā tēma tiek saglabāta lokālajā krātuvē (local storage), lai tā saglabātos arī pēc lapas pārlādes.

Attēlu un SVG apstrāde

Daži attēli un SVG var neizskatīties labi gan gaišajā, gan tumšajā tēmā. Jūs varat izmantot CSS mediju vaicājumus, lai nosacīti parādītu dažādas šo resursu versijas.

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

Šis koda fragments parāda vienu attēlu (ar klasi light-mode) gaišajā režīmā un citu attēlu (ar klasi dark-mode) tumšajā režīmā.

Krāsu paletes apsvērumi starptautiskai auditorijai

Izvēloties krāsu paletes savām gaišajām un tumšajām tēmām, ņemiet vērā kultūras asociācijas un pieejamības apsvērumus. Šeit ir dažas vispārīgas vadlīnijas:

• Kontrasts: Nodrošiniet pietiekamu kontrastu starp teksta un fona krāsām, lai atbilstu pieejamības standartiem (WCAG). Izmantojiet rīkus, piemēram, WebAIM's Contrast Checker, lai pārbaudītu kontrasta attiecības.
• Krāsu aklums: Apsveriet savu krāsu izvēles ietekmi uz lietotājiem ar krāsu aklumu. Izmantojiet rīkus, piemēram, Color Blindness Simulator, lai priekšskatītu savu vietni, kā to redz cilvēki ar dažādiem krāsu akluma veidiem.
• Kultūras asociācijas: Apzinieties, ka krāsām var būt dažādas kultūras asociācijas dažādās pasaules daļās. Piemēram, baltā krāsa dažās kultūrās bieži tiek saistīta ar tīrību un sērām, savukārt sarkanā citur tiek saistīta ar veiksmi un labklājību. Izpētiet kultūras asociācijas, lai nejauši neaizvainotu vai neradītu neskaidrības.
• Neitrālas paletes: Šaubu gadījumā izvēlieties neitrālas krāsu paletes, kuras, visticamāk, netiks nepareizi interpretētas vai uzskatītas par aizskarošām. Pelēkie, bēšie un pieklusinātie toņi var būt droša un daudzpusīga izvēle.
• Lietotāju testēšana: Veiciet lietotāju testēšanu ar daudzveidīgu dalībnieku grupu, lai savāktu atsauksmes par savu krāsu izvēli un nodrošinātu, ka mērķauditorija tās uztver pozitīvi.
• Lokalizācija: Ja iespējams, apsveriet lokalizētu krāsu palešu izmantošanu, kas ir pielāgotas konkrētu reģionu vai valstu kultūras preferencēm. Tas var ietvert krāsu toņu, piesātinājuma un spilgtuma pielāgošanu, lai tie atbilstu vietējai gaumei.

Veiktspējas apsvērumi

Lai gan automātiskās tēmas pielāgošanas ieviešana ir salīdzinoši vienkārša, ir svarīgi ņemt vērā iespējamo ietekmi uz veiktspēju. Izvairieties no pārāk sarežģītu CSS selektoru vai animāciju izmantošanas, kas var palēnināt renderēšanu. Tāpat pārliecinieties, ka jūsu pielāgotās īpašības ir definētas efektīvi, lai samazinātu mainīgo meklēšanas radīto slodzi.

Šeit ir dažas labākās prakses veiktspējas optimizēšanai:

• Saglabājiet CSS selektorus vienkāršus: Izvairieties no pārāk specifisku vai ligzdotu CSS selektoru izmantošanas, jo tie var palielināt laiku, kas nepieciešams pārlūkprogrammai, lai saskaņotu stilus ar elementiem.
• Izmantojiet CSS pielāgotās īpašības apdomīgi: Lai gan pielāgotās īpašības ir spēcīgas, pārmērīga to lietošana var ietekmēt veiktspēju. Izmantojiet tās stratēģiski bieži mainīgām vērtībām vai vērtībām, kas tiek koplietotas starp vairākiem elementiem.
• Samaziniet nevajadzīgas animācijas: Animācijas var piešķirt jūsu vietnei vizuālu pievilcību, taču tās var arī ietekmēt veiktspēju, ja netiek rūpīgi ieviestas. Izmantojiet CSS pārejas un animācijas taupīgi un optimizējiet tās plūstošai renderēšanai.
• Testējiet uz reālām ierīcēm: Vienmēr pārbaudiet savu vietni uz reālām ierīcēm ar dažādiem tīkla apstākļiem un aparatūras iespējām, lai identificētu iespējamās veiktspējas problēmas. Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai profilētu savas vietnes veiktspēju un identificētu uzlabojumu jomas.

Pieejamības labākās prakses

Pārliecinieties, ka jūsu gaišās un tumšās tēmas atbilst pieejamības vadlīnijām, piemēram, WCAG (Tīmekļa satura pieejamības vadlīnijas). Tas ietver pietiekama krāsu kontrasta nodrošināšanu, semantiskā HTML izmantošanu un nodrošināšanu, ka visi interaktīvie elementi ir pieejami ar tastatūru.

Šeit ir dažas specifiskas pieejamības labākās prakses, kuras jāievēro:

• Pietiekams krāsu kontrasts: Pārliecinieties, ka kontrasta attiecība starp teksta un fona krāsām atbilst WCAG 2.1 AA standartiem (4.5:1 normālam tekstam, 3:1 lielam tekstam). Izmantojiet rīkus, piemēram, WebAIM's Contrast Checker, lai pārbaudītu kontrasta attiecības.
• Semantiskais HTML: Izmantojiet semantiskos HTML elementus (piem., <header>, <nav>, <article>, <aside>, <footer>), lai loģiski strukturētu savu saturu. Tas palīdz ekrāna lasītājiem un citām palīgtehnoloģijām saprast saturu un efektīvi pārvietoties pa lapu.
• Pieejamība ar tastatūru: Pārliecinieties, ka visi interaktīvie elementi (piem., saites, pogas, veidlapu lauki) ir pieejami ar tastatūru. Izmantojiet tabindex atribūtu, lai kontrolētu fokusa secību un nodrošinātu vizuālas norādes, lai parādītu, kurš elements ir fokusā.
• ARIA atribūti: Izmantojiet ARIA (Pieejamas bagātinātas interneta lietojumprogrammas) atribūtus, lai sniegtu papildu informāciju par jūsu tīmekļa lietojumprogrammas struktūru un funkcionalitāti palīgtehnoloģijām. Piemēram, izmantojiet aria-label, lai nodrošinātu aprakstošu etiķeti elementam, vai aria-hidden, lai paslēptu elementu no ekrāna lasītājiem.
• Testēšana ar palīgtehnoloģijām: Pārbaudiet savu vietni ar ekrāna lasītājiem un citām palīgtehnoloģijām, lai identificētu iespējamās pieejamības problēmas. Izmantojiet rīkus, piemēram, NVDA (NonVisual Desktop Access) vai VoiceOver, lai izjustu savu vietni kā lietotājs ar redzes traucējumiem.
• Nodrošiniet alternatīvo tekstu attēliem: Izmantojiet alt atribūtu, lai nodrošinātu aprakstošu alternatīvo tekstu visiem attēliem. Šis teksts tiks parādīts, ja attēlu nevar ielādēt, un to lasīs arī ekrāna lasītāji.

Piemēri dažādos reģionos

Apsveriet šos piemērus, kā gaišās un tumšās tēmas var pielāgot dažādām globālām auditorijām:

• Austrumāzija: Daudzās Austrumāzijas kultūrās baltā krāsa tiek saistīta ar sērām. Izstrādājot tumšo tēmu šiem reģioniem, izvairieties no pārmērīgas balta teksta lietošanas uz melna fona. Tā vietā izvēlieties gandrīz baltu vai gaiši pelēku tekstu.
• Tuvie Austrumi: Dažās Tuvo Austrumu kultūrās bieži dod priekšroku spilgtām krāsām. Izstrādājot gaišo tēmu, apsveriet iespēju izmantot košas akcentu krāsas, lai piešķirtu vizuālu interesi. Tomēr pārliecinieties, ka krāsu izvēle nav pretrunā ar kultūras jūtīgumu.
• Eiropa: Eiropā bieži tiek iecienīti minimālistiski dizaini. Izstrādājot gan gaišās, gan tumšās tēmas, izvēlieties tīrus izkārtojumus, vienkāršu tipogrāfiju un smalkas krāsu paletes.
• Latīņamerika: Latīņamerikā bieži tiek novērtēti drosmīgi un izteiksmīgi dizaini. Izstrādājot gan gaišās, gan tumšās tēmas, apsveriet iespēju izmantot rotaļīgu tipogrāfiju, košas krāsas un dinamiskas animācijas.
• Āfrika: Dažādu interneta ātrumu un ierīču iespēju dēļ par prioritāti izvirziet veiktspēju un pieejamību. Izmantojiet vienkāršākus dizaina elementus un testējiet uz lēnākiem savienojumiem.

Nobeigums

Automātisko gaišo un tumšo tēmu ieviešana ir būtisks solis ceļā uz pieejamākas un lietotājam draudzīgākas tīmekļa pieredzes radīšanu globālai auditorijai. Izmantojot CSS mediju vaicājumus un pielāgotās īpašības, jūs varat viegli pielāgot savas vietnes izskatu atbilstoši lietotāja preferencēm, samazināt acu nogurumu un uzlabot pieejamību lietotājiem ar redzes traucējumiem. Atcerieties ņemt vērā kultūras asociācijas, pieejamības vadlīnijas un veiktspējas apsvērumus, lai nodrošinātu nevainojamu un iekļaujošu pārlūkošanas pieredzi visiem.

Pielietojot šīs tehnikas, jūs demonstrējat apņemšanos ievērot mūsdienu tīmekļa dizaina principus un apmierināt savas starptautiskās auditorijas daudzveidīgās vajadzības, padarot savu vietni par viesmīlīgu un ērtu vietu visiem.