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

Implementace tmavých motivů v našich webových aplikacích se změnila z luxusu na nutnost. Uživatelé zařízení nyní chtějí přejít ze světlých motivů na tmavé motivy a naopak z estetických i praktických důvodů.

Tmavé motivy nabízejí tmavší barevnou paletu pro uživatelská rozhraní, díky čemuž je rozhraní nenáročné na oči v prostředí se slabým osvětlením. Tmavé motivy také pomáhají šetřit výdrž baterie na zařízeních s obrazovkami OLED nebo AMOLED.

Díky těmto a dalším výhodám je rozumnější dát uživatelům možnost přejít na temná témata.

Nastavení testovací aplikace

Chcete-li lépe porozumět tomu, jak přidávat temná témata do Vue, budete muset vytvořit jednoduchou aplikaci Vue, abyste mohli svůj vývoj otestovat.

Chcete-li inicializovat novou aplikaci Vue, spusťte z terminálu následující příkaz:

 npm init vue@latest

Tento příkaz nainstaluje nejnovější verzi balíčku create-vue, balíčku pro inicializaci nových aplikací Vue. Také vás požádá, abyste si vybrali z konkrétní sady funkcí. Nemusíte žádné vybírat, protože to není pro rozsah tohoto návodu nutné.

Přidejte následující šablonu do souboru App.vue v adresáři src vaší aplikace:

 
<template>
  <div>
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
    <button class="toggle-button">Toggle Dark Mode</button>
  </div>
</template>
 

Blok kódu výše popisuje celou aplikaci v běžném HTML, bez bloků skriptů nebo stylů. Pro účely stylingu použijete třídy ve výše uvedené šabloně. Při implementaci tmavého motivu se změní struktura aplikace.

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

Proměnné CSS nebo uživatelské vlastnosti CSS jsou dynamické hodnoty, které můžete definovat ve svých šablonách stylů. Proměnné CSS poskytují vynikající nástroje pro tématiku, protože umožňují definovat a spravovat hodnoty, jako jsou barvy a velikosti písma, na jednom místě.

Proměnné CSS a selektory pseudotříd CSS použijete k přidání běžného a tmavého motivu pro vaši aplikaci Vue. V adresáři src/assets vytvořte soubor styles.css.

Přidejte do tohoto souboru styles.css 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 obsahují speciální selektor pseudotřídy (:root) a selektor atributů ([data-theme=’true’]). Styly, které zahrnete do kořenového selektoru, cílí na nejvyšší nadřazený prvek. Funguje jako výchozí styl pro webovou stránku.

Selektor datového motivu cílí na prvky HTML s tímto atributem nastaveným na hodnotu true. V tomto selektoru atributů pak můžete definovat styly pro motiv tmavého režimu a přepsat tak výchozí světlý motiv.

Obě tyto deklarace definují proměnné CSS pomocí předpony —. Ukládají hodnoty barev, které pak můžete použít ke stylizaci aplikace pro světlá a tmavá témata.

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')
 

Nyní přidejte další styly v souboru styles.css pod voličem datového motivu. Některé z těchto definic budou odkazovat na barevné proměnné pomocí klíčového slova var. To vám umožní změnit používané barvy jednoduše přepnutím hodnoty každé proměnné, jako to dělají počáteční styly.

 * {
    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 přechodu můžete nastavit u všech prvků pomocí univerzálního selektoru CSS

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

pro vytvoření hladké animace při přepínání režimů:

Tyto přechody vytvářejí postupnou změnu barvy pozadí a barvy textu při přepnutí tmavého režimu, což poskytuje příjemný efekt.

Implementace logiky temného režimu

 
<script setup>
import { ref } from 'vue';
// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
  const userPreference = localStorage.getItem('darkMode');
  return userPreference === 'true' ? true : false;
};
// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());
// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
  localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  saveDarkModePreference(darkMode.value);
};
</script>
 

K implementaci režimu tmavého motivu budete potřebovat logiku JavaScriptu k přepínání mezi světlými a tmavými motivy. Ve svém souboru App.vue vložte následující blok skriptu pod blok šablony napsaný v Composition API Vue:

Výše uvedený skript obsahuje veškerou logiku JavaScriptu pro přepínání mezi světlým a tmavým režimem ve vaší webové aplikaci. Skript začíná příkazem import pro import funkce ref pro zpracování reaktivních dat (dynamických dat) ve Vue.

Dále definuje funkci getInitialDarkMode, která načte uživatelovu předvolbu tmavého režimu z LocalStorage prohlížeče. Deklaruje referenci darkMode a inicializuje ji s preferencí uživatele získanou funkcí getInitialDarkMode.

Funkce saveDarkModePreference aktualizuje předvolbu tmavého režimu uživatele v LocalStorage prohlížeče pomocí metody setItem. Nakonec funkce toggleDarkMode umožní uživatelům přepínat tmavý režim a aktualizovat hodnotu LocalStorage prohlížeče pro tmavý režim.

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

 
<template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>
 

Nyní v bloku šablony vašeho souboru App.vue přidejte selektor atributu data-theme do kořenového prvku, abyste podmíněně použili motiv tmavého režimu na základě vaší logiky:

Zde navážete volič datového motivu na darkMode ref. Tím je zajištěno, že když je darkMode true, temné téma se projeví. Posluchač události kliknutí na tlačítku přepíná mezi světlým a tmavým režimem.

 npm run dev

Chcete-li zobrazit náhled aplikace, spusťte ve svém terminálu následující příkaz:

Měli byste vidět takovou obrazovku:

Když kliknete na tlačítko, aplikace by měla přepínat mezi světlými a tmavými motivy:

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

Proměnné CSS a rozhraní LocalStorage API usnadňují přidání tmavého motivu do vaší aplikace Vue.