Kako dodati tamne teme u Vue aplikacije s CSS varijablama

Implementacija tamnih tema u našim web aplikacijama iz luksuza je postala nužnost. Korisnici uređaja sada žele prijeći sa svijetlih na tamne teme i obrnuto zbog estetskih preferencija i praktičnih razloga.

Tamne teme nude tamniju paletu boja za korisnička sučelja, čineći sučelje lakim za oči u okruženjima sa slabim osvjetljenjem. Tamne teme također pomažu u očuvanju trajanja baterije na uređajima s OLED ili AMOLED ekranima.

Ove prednosti i još mnogo toga čine razumnijim davanje korisnicima izbora za prebacivanje na tamne teme.

Postavljanje testne aplikacije

Da biste bolje razumjeli kako dodati tamne teme u Vue, morat ćete izraditi jednostavnu Vue aplikaciju za testiranje vašeg razvoja.

Da biste pokrenuli novu aplikaciju Vue, pokrenite sljedeću naredbu sa svog terminala:

npm init vue@latest

Ova naredba će instalirati najnoviju verziju stvoriti-vue paket, paket za pokretanje novih Vue aplikacija. Također će od vas tražiti da odaberete određeni skup značajki. Ne morate odabrati nijedan jer nije potreban za opseg ovog vodiča.

Dodajte sljedeći predložak u App.vue datoteku u vašoj aplikaciji src imenik:

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

Gornji blok koda opisuje cijelu aplikaciju u običnom HTML-u, bez blokova skripte ili stila. Koristit ćete klase u gornjem predlošku za stilske svrhe. Dok implementirate tamnu temu, struktura aplikacije će se promijeniti.

Oblikovanje testne aplikacije s CSS varijablama

CSS varijable ili CSS prilagođena svojstva, dinamičke su vrijednosti koje možete definirati u svojim listovima stilova. CSS varijable pružaju izvrstan alat za tematiziranje jer vam omogućuju definiranje i upravljanje vrijednostima kao što su boje i veličine fonta na jednom mjestu.

Koristit ćete CSS varijable i selektore CSS pseudo-klasa za dodavanje obične i mračne teme za vašu Vue aplikaciju. u src/imovina imenik, stvorite a stilovi.css datoteka.

Dodajte sljedeće stilove ovoj datoteci styles.css:

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

Ove deklaracije sadrže poseban selektor pseudo-klase (:korijen) i selektor atributa ([data-theme='true']). Stilovi koje uključite u korijenski selektor ciljaju na najviši nadređeni element. Djeluje kao zadani stil za web stranicu.

Birač teme podataka cilja HTML elemente s tim atributom postavljenim na true. U ovom selektoru atributa možete definirati stilove za temu tamnog načina rada kako biste nadjačali zadanu svijetlu temu.

Ove deklaracije definiraju CSS varijable pomoću -- prefiks. Oni pohranjuju vrijednosti boja koje zatim možete koristiti za stiliziranje aplikacije za svijetle i tamne teme.

Uredite src/main.js datoteku i uvezite datoteku styles.css:

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

Sada dodajte još nekoliko stilova stilovi.css, ispod data-tema selektor. Neke od ovih definicija upućivat će na varijable boje pomoću var ključna riječ. To vam omogućuje promjenu boja koje se koriste jednostavnom promjenom vrijednosti svake varijable, kao što to čine početni stilovi.

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

Svojstvo prijelaza možete postaviti na sve elemente pomoću univerzalnog CSS selektora (*) za stvaranje glatke animacije prilikom promjene načina rada:

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

Ovi prijelazi stvaraju postupnu promjenu boje pozadine i boje teksta kada se uključi tamni način rada, dajući ugodan učinak.

Implementacija logike mračnog načina rada

Da biste implementirali način tamne teme, trebat će vam JavaScript logika za prebacivanje između svijetle i tamne teme. U vašem App.vue datoteku, zalijepite sljedeći blok skripte ispod bloka predloška napisanog u 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>

Gornja skripta uključuje svu JavaScript logiku za prebacivanje između svijetlog i tamnog načina rada u vašoj web-aplikaciji. Scenarij počinje s uvoz naredbu za uvoz funkcije ref za rukovanje reaktivnim podacima (dinamičkim podacima) u Vue.

Dalje, definira a getInitialDarkMode funkcija koja dohvaća korisničke postavke tamnog načina rada iz preglednika LocalStorage. Izjavljuje tamni način rada ref, inicijalizirajući ga korisničkim postavkama koje je dohvatila funkcija getInitialDarkMode.

The spremiDarkModePreference funkcija ažurira korisničke postavke tamnog načina rada u LocalStorageu preglednika s setItem metoda. Konačno, prebaciDarkMode omogućit će korisnicima prebacivanje tamnog načina rada i ažuriranje LocalStorage vrijednosti preglednika za tamni način rada.

Primjena teme Dark Mode i testiranje aplikacije

Sada, u vašem bloku predložaka App.vue datoteku, dodajte selektor atributa teme podataka korijenskom elementu za uvjetnu primjenu teme tamnog načina rada na temelju vaše logike:

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

Ovdje vežete selektor teme podataka za darkMode ref. Ovo osigurava da kada tamni način rada istina, tamna tema će stupiti na snagu. Slušatelj događaja klika na gumbu izmjenjuje svijetli i tamni način rada.

Pokrenite sljedeću naredbu na svom terminalu za pregled aplikacije:

npm run dev

Trebali biste vidjeti ovakav zaslon:

Kada kliknete gumb, aplikacija bi se trebala prebacivati ​​između svijetle i tamne teme:

Naučite integrirati druge pakete u svoje Vue aplikacije

CSS varijable i LocalStorage API olakšavaju dodavanje tamne teme vašoj aplikaciji Vue.

Postoje mnoge biblioteke trećih strana i ugrađeni Vue dodaci koji vam omogućuju da prilagodite svoje web aplikacije i koristite dodatne značajke.