M

MLOG

Čeština

Prozkoumejte sílu CSS media queries a vlastních vlastností k vytvoření automatických světlých a tmavých motivů, které se přizpůsobují preferencím uživatelů.

Funkce CSS Light-Dark: Automatické přizpůsobení motivu pro globální web

V dnešním globálně propojeném světě musí být webové stránky přístupné a vizuálně přitažlivé pro uživatele z různých prostředí a s různými preferencemi. Jedním z nejefektivnějších způsobů, jak toho dosáhnout, je automatické přizpůsobení motivu, konkrétně nabízení světlých i tmavých motivů, které se přizpůsobují systémovému nastavení uživatele. Tento blogový příspěvek vás provede implementací této funkcionality pomocí CSS media dotazů a vlastních vlastností, čímž zajistíte bezproblémový a pohodlný zážitek z prohlížení pro vaše mezinárodní publikum.

Proč implementovat automatické světlé a tmavé motivy?

Existuje několik pádných důvodů, proč začlenit automatické přizpůsobení motivu do vašich webových projektů:

Jak implementovat automatické přizpůsobení motivu pomocí CSS

Jádro automatického přizpůsobení motivu spočívá v media dotazu prefers-color-scheme. Tento CSS media dotaz vám umožňuje detekovat preferované barevné schéma uživatele (světlé nebo tmavé) a aplikovat odpovídající styly.

Krok 1: Definujte vlastní vlastnosti (CSS proměnné)

Začněte definováním vlastních vlastností (CSS proměnných) pro uložení hodnot barev pro vaše světlé a tmavé motivy. To usnadňuje přepínání mezi motivy jednoduchou aktualizací hodnot proměnných.


:root {
  --background-color: #ffffff; /* Pozadí světlého motivu */
  --text-color: #000000; /* Text světlého motivu */
  --link-color: #007bff; /* Odkaz světlého motivu */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Pozadí tmavého motivu */
    --text-color: #ffffff; /* Text tmavého motivu */
    --link-color: #66b3ff; /* Odkaz tmavého motivu */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

V tomto příkladu definujeme proměnné pro barvu pozadí, barvu textu, barvu odkazu a barvy tlačítek. Selektor :root aplikuje tyto proměnné na celý dokument. Media dotaz @media (prefers-color-scheme: dark) pak přepíše tyto proměnné hodnotami pro tmavý motiv, když si uživatel nastaví systém do tmavého režimu.

Krok 2: Aplikujte vlastní vlastnosti na vaše styly

Dále aplikujte tyto vlastní vlastnosti na vaše CSS styly, abyste ovládali vzhled prvků vašeho webu.


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

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

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

Zde používáme funkci var() pro přístup k hodnotám našich vlastních vlastností. Přidali jsme také vlastnost transition k prvku body, abychom vytvořili plynulý přechod mezi motivy.

Krok 3: Testování a ladění

Důkladně otestujte svou implementaci v různých prohlížečích a operačních systémech. Moderní prohlížeče jako Chrome, Firefox, Safari a Edge plně podporují media dotaz prefers-color-scheme. Můžete přepínat mezi světlým a tmavým režimem v nastavení vašeho operačního systému a sledovat, jak se změny projeví na vašem webu.

Pokročilé techniky a úvahy

Poskytnutí ručního přepínače motivů

Ačkoliv je automatické přizpůsobení motivu skvělým výchozím bodem, někteří uživatelé mohou preferovat ruční přepsání svého systémového nastavení. Můžete poskytnout ruční přepínač motivů pomocí JavaScriptu a local storage.

HTML:


<button id="theme-toggle">Přepnout motiv</button>

JavaScript:


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

let currentTheme = localStorage.getItem('theme') || 'auto'; // Výchozí 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;
}

// Aplikovat počáteční motiv při načtení stránky
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Pokud je nastaveno na auto, nechat rozhodnout prefers-color-scheme
}


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

CSS: Přidejte následující CSS k předchozímu CSS. Všimněte si ručního přepsání:


body.light-theme {
  --background-color: #ffffff; /* Pozadí světlého motivu */
  --text-color: #000000; /* Text světlého motivu */
  --link-color: #007bff; /* Odkaz světlého motivu */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Pozadí tmavého motivu */
  --text-color: #ffffff; /* Text tmavého motivu */
  --link-color: #66b3ff; /* Odkaz tmavého motivu */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Tento úryvek kódu přidává tlačítko, které uživatelům umožňuje přepínat mezi světlým, tmavým a automatickým motivem. Zvolený motiv se ukládá do local storage, takže přetrvá i po opětovném načtení stránky.

Zpracování obrázků a SVG

Některé obrázky a SVG nemusí vypadat dobře jak ve světlém, tak v tmavém motivu. Můžete použít CSS media dotazy k podmíněnému zobrazení různých verzí těchto prvků.


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 úryvek kódu zobrazuje jeden obrázek (s třídou light-mode) ve světlém režimu a jiný obrázek (s třídou dark-mode) v tmavém režimu.

Úvahy o paletě barev pro mezinárodní publikum

Při výběru barevných palet pro vaše světlé a tmavé motivy mějte na paměti kulturní asociace a aspekty přístupnosti. Zde jsou některé obecné pokyny:

Úvahy o výkonu

Ačkoliv je implementace automatického přizpůsobení motivu relativně jednoduchá, je důležité zvážit potenciální dopad na výkon. Vyhněte se používání příliš složitých CSS selektorů nebo animací, které mohou zpomalit vykreslování. Také zajistěte, aby vaše vlastní vlastnosti byly definovány efektivně, aby se minimalizovala režie vyhledávání proměnných.

Zde jsou některé osvědčené postupy pro optimalizaci výkonu:

Osvědčené postupy pro přístupnost

Zajistěte, aby vaše světlé a tmavé motivy splňovaly pokyny pro přístupnost, jako je WCAG (Web Content Accessibility Guidelines). To zahrnuje poskytnutí dostatečného barevného kontrastu, používání sémantického HTML a zajištění, že všechny interaktivní prvky jsou přístupné z klávesnice.

Zde jsou některé konkrétní osvědčené postupy pro přístupnost, které je třeba dodržovat:

Příklady z různých regionů

Zvažte tyto příklady, jak mohou být světlé a tmavé motivy přizpůsobeny pro různorodé globální publikum:

Závěr

Implementace automatických světlých a tmavých motivů je klíčovým krokem k vytvoření přístupnějšího a uživatelsky přívětivějšího webového zážitku pro globální publikum. Využitím CSS media dotazů a vlastních vlastností můžete snadno přizpůsobit vzhled vašeho webu preferencím uživatelů, snížit únavu očí a zlepšit přístupnost pro uživatele se zrakovým postižením. Nezapomeňte zvážit kulturní asociace, pokyny pro přístupnost a aspekty výkonu, abyste zajistili plynulý a inkluzivní zážitek z prohlížení pro všechny.

Přijetím těchto technik prokazujete závazek k moderním principům webového designu a vycházíte vstříc rozmanitým potřebám vašeho mezinárodního publika, čímž se vaše webové stránky stávají přívětivým a pohodlným prostorem pro všechny.