M

MLOG

Slovenčina

Objavte silu CSS media queries a vlastných premenných na tvorbu automatických svetlých a tmavých tém, ktoré sa prispôsobujú preferenciám používateľov, čím sa zvyšuje prístupnosť a vizuálna príťažlivosť pre globálne publikum.

Funkcia CSS Light-Dark: Automatická adaptácia témy pre globálny web

V dnešnom globálne prepojenom svete musia byť webové stránky prístupné a vizuálne príťažlivé pre používateľov z rôznych prostredí a s rôznymi preferenciami. Jedným z najefektívnejších spôsobov, ako to dosiahnuť, je automatická adaptácia témy, konkrétne ponuka svetlej aj tmavej témy, ktorá sa prispôsobuje systémovým nastaveniam používateľa. Tento blogový príspevok vás prevedie implementáciou tejto funkcionality pomocou CSS media queries a vlastných premenných, čím zabezpečíte plynulý a pohodlný zážitok z prehliadania pre vaše medzinárodné publikum.

Prečo implementovať automatické svetlé a tmavé témy?

Existuje niekoľko presvedčivých dôvodov, prečo začleniť automatickú adaptáciu témy do vašich webových projektov:

Ako implementovať automatickú adaptáciu témy pomocou CSS

Jadro automatickej adaptácie témy spočíva v media query prefers-color-scheme. Táto CSS media query vám umožňuje zistiť preferovanú farebnú schému používateľa (svetlá alebo tmavá) a aplikovať zodpovedajúce štýly.

Krok 1: Definujte vlastné premenné (CSS Variables)

Začnite definovaním vlastných premenných (CSS variables), do ktorých uložíte hodnoty farieb pre vašu svetlú a tmavú tému. To uľahčuje prepínanie medzi témami jednoduchou aktualizáciou hodnôt premenných.


:root {
  --background-color: #ffffff; /* Pozadie svetlej témy */
  --text-color: #000000; /* Text svetlej témy */
  --link-color: #007bff; /* Odkaz svetlej témy */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Pozadie tmavej témy */
    --text-color: #ffffff; /* Text tmavej témy */
    --link-color: #66b3ff; /* Odkaz tmavej témy */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

V tomto príklade definujeme premenné pre farbu pozadia, farbu textu, farbu odkazu a farby tlačidiel. Selektor :root aplikuje tieto premenné na celý dokument. Media query @media (prefers-color-scheme: dark) potom prepíše tieto premenné hodnotami pre tmavú tému, keď má používateľ nastavený systém na tmavý režim.

Krok 2: Aplikujte vlastné premenné na vaše štýly

Ďalej aplikujte tieto vlastné premenné na vaše CSS štýly, aby ste ovládali vzhľad prvkov vašej webovej stránky.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Plynulý prechod */
}

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

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

Tu používame funkciu var() na prístup k hodnotám našich vlastných premenných. Tiež sme pridali vlastnosť transition k prvku body, aby sme vytvorili plynulý prechod medzi témami.

Krok 3: Testovanie a zdokonaľovanie

Dôkladne otestujte vašu implementáciu v rôznych prehliadačoch a operačných systémoch. Moderné prehliadače ako Chrome, Firefox, Safari a Edge plne podporujú media query prefers-color-scheme. Medzi svetlým a tmavým režimom môžete prepínať v nastaveniach vášho operačného systému, aby ste videli zmeny na vašej webovej stránke.

Pokročilé techniky a úvahy

Poskytnutie manuálneho prepínača tém

Hoci je automatická adaptácia témy skvelým východiskovým bodom, niektorí používatelia môžu uprednostniť manuálne prepísanie systémových nastavení. Môžete poskytnúť manuálny prepínač tém pomocou JavaScriptu a lokálneho úložiska (local storage).

HTML:

JavaScript:


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

let currentTheme = localStorage.getItem('theme') || 'auto'; // Predvolená hodnota je 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;
}

// Aplikovať počiatočnú tému pri načítaní stránky
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Ak je nastavené na auto, nech rozhodne prefers-color-scheme
}


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

CSS: Pridajte nasledujúce CSS k predchádzajúcemu CSS. Všimnite si manuálne prepísanie:


body.light-theme {
  --background-color: #ffffff; /* Pozadie svetlej témy */
  --text-color: #000000; /* Text svetlej témy */
  --link-color: #007bff; /* Odkaz svetlej témy */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Pozadie tmavej témy */
  --text-color: #ffffff; /* Text tmavej témy */
  --link-color: #66b3ff; /* Odkaz tmavej témy */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Tento úryvok kódu pridáva tlačidlo, ktoré umožňuje používateľom prepínať medzi svetlou, tmavou a automatickou témou. Zvolená téma sa ukladá do lokálneho úložiska, takže zostáva zachovaná aj po opätovnom načítaní stránky.

Spracovanie obrázkov a SVG

Niektoré obrázky a SVG súbory nemusia vyzerať dobre v svetlej aj tmavej téme. Môžete použiť CSS media queries na podmienené zobrazenie rôznych verzií týchto aktív.


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

Tento úryvok kódu zobrazuje jeden obrázok (s triedou light-mode) v svetlom režime a iný obrázok (s triedou dark-mode) v tmavom režime.

Úvahy o palete farieb pre medzinárodné publikum

Pri výbere farebných paliet pre vašu svetlú a tmavú tému majte na pamäti kultúrne asociácie a aspekty prístupnosti. Tu sú niektoré všeobecné usmernenia:

Úvahy o výkone

Hoci je implementácia automatickej adaptácie témy relatívne jednoduchá, je dôležité zvážiť potenciálny vplyv na výkon. Vyhnite sa používaniu príliš zložitých CSS selektorov alebo animácií, ktoré môžu spomaliť vykresľovanie. Taktiež sa uistite, že vaše vlastné premenné sú definované efektívne, aby sa minimalizovala réžia spojená s ich vyhľadávaním.

Tu sú niektoré osvedčené postupy na optimalizáciu výkonu:

Osvedčené postupy pre prístupnosť

Uistite sa, že vaše svetlé a tmavé témy spĺňajú smernice pre prístupnosť, ako sú WCAG (Web Content Accessibility Guidelines). To zahŕňa poskytovanie dostatočného farebného kontrastu, používanie sémantického HTML a zabezpečenie, že všetky interaktívne prvky sú prístupné z klávesnice.

Tu sú niektoré konkrétne osvedčené postupy pre prístupnosť, ktoré treba dodržiavať:

Príklady z rôznych regiónov

Zvážte tieto príklady, ako môžu byť svetlé a tmavé témy prispôsobené pre rôznorodé globálne publikum:

Záver

Implementácia automatických svetlých a tmavých tém je kľúčovým krokom k vytvoreniu prístupnejšieho a používateľsky prívetivejšieho webového zážitku pre globálne publikum. Využitím CSS media queries a vlastných premenných môžete ľahko prispôsobiť vzhľad svojej webovej stránky tak, aby zodpovedal preferenciám používateľov, znížil únavu očí a zlepšil prístupnosť pre používateľov so zrakovým postihnutím. Nezabudnite zvážiť kultúrne asociácie, smernice pre prístupnosť a aspekty výkonu, aby ste zabezpečili plynulý a inkluzívny zážitok z prehliadania pre každého.

Prijatím týchto techník demonštrujete záväzok k moderným princípom webdizajnu a vychádzate v ústrety rôznorodým potrebám vášho medzinárodného publika, čím sa vaša webová stránka stáva príjemným a pohodlným priestorom pre všetkých.