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 create-vue balíček, balíček 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 App.vue soubor ve vaší aplikaci src adresář:

<template>
<div>
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>

<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<buttonclass="toggle-button">Toggle Dark Modebutton>
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ě. Jak implementujete tmavé téma, struktura aplikace se změní.

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

CSS proměnné nebo vlastní 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 src/aktiva adresář, vytvořte a styly.css soubor.

Přidejte do tohoto souboru styles.css následující styly:

/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}

[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}

Tyto deklarace obsahují speciální selektor pseudotříd (:vykořenit) a selektor atributu ([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ředpona. Ukládají hodnoty barev, které pak můžete použít ke stylizaci aplikace pro světlá a tmavá témata.

Upravit src/main.js a importujte soubor styles.css:

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

Nyní přidejte další styly styly.css, pod datové téma volič. Některé z těchto definic budou odkazovat na barevné proměnné pomocí var klíčové slovo. 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 (*) pro vytvoření hladké animace při přepínání režimů:

* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}

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

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 vašem App.vue vložte následující blok skriptu pod zapsaný blok šablony Vue Composition API :

<scriptsetup>
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>

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. Scénář začíná písmenem an import příkaz k importu funkce ref pro zpracování reaktivních dat (dynamických dat) ve Vue.

Dále definuje a getInitialDarkMode funkce, která načte uživatelovu preferenci tmavého režimu prohlížeče Místní úložiště. Prohlašuje to tmavý režim ref, inicializuje jej s preferencí uživatele získanou funkcí getInitialDarkMode.

The saveDarkModePreference funkce aktualizuje nastavení tmavého režimu uživatele v LocalStorage prohlížeče pomocí setItem metoda. Konečně, přepnout tmavý režim Funkce 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

Nyní v bloku šablon vašeho 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:

<template>

<div:data-theme="darkMode">
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>

<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>

<button @click="toggleDarkMode"class="toggle-button">
 Toggle Dark Mode
button>
div>
template>

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

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

npm run dev

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.

Existuje mnoho knihoven třetích stran a vestavěných doplňků Vue, které vám umožňují přizpůsobit vaše webové aplikace a používat další funkce.