Ako pridať tmavé motívy do aplikácií Vue s premennými CSS

Implementácia tmavých tém v našich webových aplikáciách sa zmenila z luxusu na nevyhnutnosť. Používatelia zariadení teraz chcú prejsť zo svetlých tém na tmavé témy a naopak z estetických preferencií aj z praktických dôvodov.

Tmavé motívy ponúkajú tmavšiu paletu farieb pre používateľské rozhrania, vďaka čomu je rozhranie nenáročné na oči v prostrediach so slabým osvetlením. Tmavé motívy tiež pomáhajú šetriť výdrž batérie na zariadeniach s obrazovkami OLED alebo AMOLED.

Vďaka týmto výhodám a ďalším výhodám je rozumnejšie dať používateľom možnosť prepnúť na tmavé témy.

Nastavenie testovacej aplikácie

Ak chcete lepšie pochopiť, ako pridať tmavé témy do Vue, budete musieť vytvoriť jednoduchú aplikáciu Vue na testovanie svojho vývoja.

Ak chcete inicializovať novú aplikáciu Vue, spustite nasledujúci príkaz z terminálu:

npm init vue@latest

Tento príkaz nainštaluje najnovšiu verziu create-vue package, balík na inicializáciu nových aplikácií Vue. Tiež vás požiada, aby ste si vybrali z konkrétneho súboru funkcií. Nemusíte vyberať žiadne, pretože to nie je potrebné pre rozsah tohto návodu.

Pridajte nasledujúcu šablónu do App.vue súbor vo vašej aplikácii src adresár:

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

Vyššie uvedený blok kódu popisuje celú aplikáciu v bežnom HTML, bez blokov skriptov alebo štýlov. Triedy vo vyššie uvedenej šablóne použijete na účely úpravy štýlu. Keď implementujete temnú tému, štruktúra aplikácie sa zmení.

Úprava štýlu testovacej aplikácie pomocou premenných CSS

CSS premenné alebo vlastné vlastnosti CSS, sú dynamické hodnoty, ktoré môžete definovať vo svojich štýloch. Premenné CSS poskytujú vynikajúce nástroje na vytváranie tém, pretože vám umožňujú definovať a spravovať hodnoty, ako sú farby a veľkosti písma, na jednom mieste.

Premenné CSS a selektory pseudotriedy CSS použijete na pridanie témy bežného a tmavého režimu pre vašu aplikáciu Vue. V src/aktíva adresár, vytvorte a styles.css súbor.

Do tohto súboru styles.css pridajte nasledujúce štýly:

/* 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 */
}

Tieto deklarácie obsahujú špeciálny selektor pseudotriedy (:koreň) a selektor atribútu ([data-theme='true']). Štýly, ktoré zahrniete do koreňového selektora, sa zameriavajú na najvyšší nadradený prvok. Funguje ako predvolený štýl webovej stránky.

Selektor dátovej témy sa zameriava na prvky HTML s týmto atribútom nastaveným na hodnotu true. V tomto selektore atribútov potom môžete definovať štýly pre tému tmavého režimu, čím prepíšete predvolenú svetlú tému.

Tieto deklarácie definujú premenné CSS pomocou -- predpona. Ukladajú hodnoty farieb, ktoré potom môžete použiť na štýl aplikácie pre svetlé a tmavé motívy.

Upravte src/main.js a importujte súbor styles.css:

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

Teraz pridajte ďalšie štýly styles.css, pod dátová téma selektor. Niektoré z týchto definícií budú odkazovať na farebné premenné pomocou var kľúčové slovo. To vám umožní zmeniť používané farby jednoduchým prepnutím hodnoty každej premennej, ako to robia počiatočné štýly.

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

Vlastnosť prechodu môžete nastaviť na všetkých prvkoch pomocou univerzálneho selektora CSS (*) na vytvorenie plynulej animácie pri prepínaní režimov:

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

Tieto prechody vytvárajú postupnú zmenu farby pozadia a farby textu pri prepnutí tmavého režimu, čo poskytuje príjemný efekt.

Implementácia logiky tmavého režimu

Na implementáciu režimu tmavej témy budete potrebovať logiku JavaScriptu na prepínanie medzi svetlými a tmavými témami. V tvojom App.vue súbor, prilepte nasledujúci blok skriptu pod zapísaný blok šablóny Vue's 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>

Skript vyššie obsahuje všetku logiku JavaScriptu na prepínanie medzi svetlým a tmavým režimom vo vašej webovej aplikácii. Scenár začína písmenom an importovať príkaz na importovanie funkcie ref na spracovanie reaktívnych údajov (dynamických údajov) vo Vue.

Ďalej definuje a getInitialDarkMode funkcia, ktorá načíta preferenciu tmavého režimu používateľa prehliadača Lokálny obchod. Vyhlasuje to tmavý režim ref, inicializuje ho s preferenciou používateľa získanou funkciou getInitialDarkMode.

The saveDarkModePreference funkcia aktualizuje preferenciu tmavého režimu používateľa v LocalStorage prehliadača pomocou setItem metóda. Nakoniec, prepnúť tmavý režim funkcia umožní používateľom prepínať tmavý režim a aktualizovať hodnotu LocalStorage prehliadača pre tmavý režim.

Aplikácia témy tmavého režimu a testovanie aplikácie

Teraz v bloku šablón vášho App.vue pridajte selektor atribútu údajovej témy do koreňového prvku, aby ste podmienečne použili tému tmavého režimu na základe vašej 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>

Tu spájate volič dátovej témy s ref. darkMode. Tým sa zabezpečí, že kedy tmavý režim je pravda, temná téma sa prejaví. Prijímač udalosti kliknutia na tlačidle prepína medzi svetlým a tmavým režimom.

Ak chcete zobraziť ukážku aplikácie, spustite nasledujúci príkaz vo svojom termináli:

npm run dev

Mali by ste vidieť takúto obrazovku:

Keď kliknete na tlačidlo, aplikácia by mala prepínať medzi svetlými a tmavými témami:

Naučte sa integrovať ďalšie balíčky do vašich aplikácií Vue

Premenné CSS a rozhranie LocalStorage API uľahčujú pridanie temnej témy do vašej aplikácie Vue.

Existuje mnoho knižníc tretích strán a vstavaných doplnkov Vue, ktoré vám umožňujú prispôsobiť vaše webové aplikácie a používať ďalšie funkcie.