Jak přidat temná témata do aplikací Vue s proměnnými CSS

Zavedení tmavých režimů do webových aplikací se z doplňkové funkce stalo standardem. Uživatelé zařízení nyní preferují možnost přepínání mezi světlými a tmavými variantami z vizuálních i praktických důvodů.

Tmavé režimy nabízejí tmavší barevné schéma uživatelského rozhraní, čímž se stává šetrnější k očím v prostředích s nízkou úrovní osvětlení. Navíc, tmavé režimy napomáhají snižovat spotřebu energie u zařízení s OLED nebo AMOLED displeji.

Vzhledem k těmto a dalším benefitům je rozumné dát uživatelům kontrolu nad nastavením barevného schématu.

Příprava testovací aplikace

Pro lepší pochopení implementace tmavých režimů ve Vue je vhodné vytvořit jednoduchou testovací aplikaci.

Pro inicializaci nové Vue aplikace, použijte v terminálu následující příkaz:

 npm init vue@latest

Tento příkaz nainstaluje nejnovější verzi balíčku create-vue, který slouží k vytváření nových Vue aplikací. Budete vyzváni k výběru z několika funkcí. Pro účely tohoto návodu není potřeba vybírat žádnou z nich.

Vložte následující šablonu do souboru App.vue, který se nachází ve složce src vaší aplikace:

 
<template>
  <div>
    <h1 class="header">Vítejte v mé Vue aplikaci</h1>
    <p>Toto je jednoduchá Vue aplikace s textem a styly.</p>
    
    <div class="styled-box">
      <p class="styled-text">Stylizovaný text</p>
    </div>
    <button class="toggle-button">Přepnout tmavý režim</button>
  </div>
</template>
 

Uvedený blok kódu definuje základní strukturu aplikace pomocí standardního HTML, bez skriptů či stylů. Pro stylování využijeme třídy uvedené v šabloně. Struktura aplikace se při implementaci tmavého režimu nemění.

Stylování testovací aplikace pomocí CSS proměnných

CSS proměnné, také známé jako uživatelské vlastnosti, jsou dynamické hodnoty, které lze definovat ve stylech. Poskytují výborné nástroje pro správu témat, protože umožňují centrálně definovat a měnit hodnoty, jako jsou barvy a velikosti písma.

Pro přidání světlého a tmavého režimu pro vaši Vue aplikaci budeme využívat CSS proměnné a CSS pseudotřídy. Ve složce src/assets vytvořte soubor styles.css.

Do souboru styles.css přidejte následující styly:

 
:root {
  --background-color: #ffffff; 
  --text-color: #333333; 
  --box-background: #007bff; 
  --box-text-color: #ffffff; 
  --toggle-button: #007bff; 
}
  
[data-theme="true"] {
  --background-color: #333333; 
  --text-color: #ffffff; 
  --box-background: #000000; 
  --box-text-color: #ffffff; 
  --toggle-button: #000000; 
}

Tyto deklarace používají speciální pseudotřídu (:root) a selektor atributů ([data-theme=’true‘]). Styly uvnitř selektoru :root se aplikují na nejvyšší nadřazený element, tedy na celou webovou stránku. Slouží jako výchozí styly.

Selektor datového motivu cílí na HTML elementy s nastaveným atributem data-theme na hodnotu true. V tomto selektoru můžete definovat styly pro tmavý režim a přepsat tak výchozí světlý režim.

Obě deklarace definují CSS proměnné pomocí prefixu –. Tyto proměnné ukládají barvy, které později použijeme pro stylování aplikace v obou režimech.

Nyní upravte soubor src/main.js a importujte soubor styles.css:

 
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
 

Přidejte další styly do souboru styles.css pod selektor datového motivu. Některé z těchto definic budou odkazovat na barevné proměnné pomocí klíčového slova var. To nám umožňuje měnit použité barvy jednoduchou změnou hodnoty proměnné, jak jsme ukázali v úvodních stylech.

 * {
    background-color: var(--background-color);
    text-align: center;
    color: var(--text-color);
    padding: 20px;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}
  
.header {
    font-size: 24px;
    margin-bottom: 20px;
}
  
.styled-box {
    background-color: var(--box-background);
    color: var(--box-text-color);
    padding: 10px;
    border-radius: 5px;
    margin: 20px 0;
}
  
.styled-text {
    font-size: 18px;
    font-weight: bold;
}
  
.toggle-button {
    background-color: var(--toggle-button);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 10px;
}

Vlastnost transition (přechod) nastavíme u všech elementů pomocí univerzálního selektoru CSS

 * {
  
  transition: background-color 0.3s, color 0.3s;
}

Tím zajistíme plynulou animaci při změně režimu:

Tyto přechody zaručí postupnou změnu barev pozadí a textu při přepínání mezi režimy, čímž se dosáhne příjemného uživatelského dojmu.

Implementace logiky tmavého režimu

 
<script setup>
import { ref } from 'vue';
// Funkce pro získání preference tmavého režimu z Local Storage
const getInitialDarkMode = () => {
  const userPreference = localStorage.getItem('darkMode');
  return userPreference === 'true' ? true : false;
};
// Definice ref pro darkMode a jeho inicializace uživatelskými preferencemi
// nebo hodnotou false
const darkMode = ref(getInitialDarkMode());
// Funkce pro uložení preference tmavého režimu do Local Storage
const saveDarkModePreference = (isDarkMode) => {
  localStorage.setItem('darkMode', isDarkMode);
};
// Funkce pro přepnutí tmavého režimu a aktualizaci Local Storage
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  saveDarkModePreference(darkMode.value);
};
</script>
 

Pro implementaci logiky přepínání tmavého režimu budeme potřebovat JavaScriptový kód. V souboru App.vue umístěte následující blok skriptu pod blok šablony, který využívá Vue Composition API:

Výše uvedený skript obsahuje veškerou logiku pro přepínání mezi režimy. Na začátku importujeme funkci ref, která slouží pro správu reaktivních (dynamických) dat ve Vue.

Dále definujeme funkci getInitialDarkMode, která získá uživatelskou preferenci tmavého režimu z LocalStorage prohlížeče. Vytvoříme referenci darkMode a inicializujeme ji preferencí uživatele získanou pomocí funkce getInitialDarkMode.

Funkce saveDarkModePreference aktualizuje uživatelskou preferenci v LocalStorage za použití metody setItem. A konečně funkce toggleDarkMode umožňuje uživateli přepínat tmavý režim a aktualizovat uloženou hodnotu v LocalStorage.

Použití tmavého režimu a testování aplikace

 
<template>
  
       podmíněně -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Vítejte v mé Vue aplikaci</h1>
    <p>Toto je jednoduchá Vue aplikace s textem a styly.</p>
    
    <div class="styled-box">
      <p class="styled-text">Stylizovaný text</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Přepnout tmavý režim
    </button> 
  </div>
</template>
 

V bloku šablony souboru App.vue přidejte selektor atributu data-theme k hlavnímu prvku, abychom mohli podmíněně aplikovat tmavý režim podle naší logiky:

Zde je selektor data-theme svázán s referencí darkMode. Tím zajistíme, že pokud je hodnota darkMode true, aktivuje se tmavý režim. Posluchač události kliknutí u tlačítka zajistí přepínání mezi režimy.

 npm run dev

Pro zobrazení aplikace spusťte v terminálu následující příkaz:

Měli byste vidět zobrazenou obrazovku podobnou následující:

Po kliknutí na tlačítko by aplikace měla přepínat mezi světlým a tmavým režimem:

Naučte se integrovat další balíčky do aplikací Vue

Díky CSS proměnným a LocalStorage API je přidání tmavého režimu do Vue aplikace velmi jednoduché.