Kako dodati temne teme v aplikacije Vue s spremenljivkami CSS

Implementacija temnih tem v naših spletnih aplikacijah je iz razkošja postala nuja. Uporabniki naprav zdaj želijo preklopiti s svetlih tem na temne teme in obratno zaradi estetskih preferenc in praktičnih razlogov.

Temne teme ponujajo temnejšo barvno paleto za uporabniške vmesnike, zaradi česar je vmesnik prijeten za oči v okoljih s šibko svetlobo. Temne teme prav tako pomagajo ohraniti življenjsko dobo baterije na napravah z zasloni OLED ali AMOLED.

Zaradi teh prednosti in drugih je bolj smiselno dati uporabnikom izbiro, da preklopijo na temne teme.

Nastavitev testne aplikacije

Če želite bolje razumeti, kako dodati temne teme v Vue, boste morali ustvariti preprosto aplikacijo Vue za preskusni zagon vašega razvoja.

Če želite inicializirati novo aplikacijo Vue, zaženite naslednji ukaz s svojega terminala:

npm init vue@latest

Ta ukaz bo namestil najnovejšo različico create-vue paket, paket za inicializacijo novih aplikacij Vue. Prav tako vas bo prosil, da izberete iz določenega nabora funkcij. Ni vam treba izbrati nobenega, ker to ni potrebno za obseg te vadnice.

Dodajte naslednjo predlogo v App.vue datoteko v vaši 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>

Zgornji blok kode opisuje celotno aplikacijo v običajnem HTML-ju, brez blokov skripta ali sloga. Razrede v zgornji predlogi boste uporabili za namene oblikovanja. Ko implementirate temno temo, se bo struktura aplikacije spremenila.

Oblikovanje testne aplikacije s spremenljivkami CSS

Spremenljivke CSS ali lastnosti CSS po meri, so dinamične vrednosti, ki jih lahko definirate v svojih slogovnih listih. Spremenljivke CSS zagotavljajo odlično orodje za tematiziranje, saj vam omogočajo, da na enem mestu definirate in upravljate vrednosti, kot so barve in velikosti pisave.

Uporabili boste spremenljivke CSS in izbirnike psevdorazredov CSS, da dodate temo običajnega in temnega načina za svojo aplikacijo Vue. V src/sredstva imenik, ustvarite a styles.css mapa.

V to datoteko styles.css dodajte naslednje sloge:

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

Te deklaracije vsebujejo poseben izbirnik psevdorazreda (:root) in izbirnik atributov ([data-theme='true']). Slogi, ki jih vključite v korenski izbirnik, ciljajo na najvišji nadrejeni element. Deluje kot privzeti slog za spletno stran.

Izbirnik podatkovne teme cilja na elemente HTML s tem atributom, nastavljenim na true. V tem izbirniku atributov lahko nato definirate sloge za temo temnega načina, da preglasite privzeto svetlo temo.

Ti deklaraciji definirata spremenljivke CSS z uporabo -- predpono. Shranjujejo barvne vrednosti, ki jih lahko nato uporabite za oblikovanje aplikacije za svetle in temne teme.

Uredite src/main.js in uvozite datoteko styles.css:

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

Zdaj dodajte še nekaj stilov styles.css, pod podatkovna tema selektor. Nekatere od teh definicij se bodo sklicevale na barvne spremenljivke z uporabo var ključna beseda. To vam omogoča spreminjanje uporabljenih barv preprosto s preklopom vrednosti vsake spremenljivke, kot to počnejo začetni slogi.

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

Lastnost prehoda lahko nastavite za vse elemente z univerzalnim izbirnikom CSS (*), da ustvarite gladko animacijo pri preklapljanju med načini:

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

Ti prehodi ustvarijo postopno spremembo barve ozadja in barve besedila, ko preklopite na temni način, kar daje prijeten učinek.

Izvajanje logike temnega načina

Za implementacijo načina temne teme boste potrebovali logiko JavaScript za preklapljanje med svetlimi in temnimi temami. V vašem App.vue prilepite naslednji blok skripta pod blok predloge, v katerem je zapisan 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>

Zgornji skript vključuje vso logiko JavaScript za preklapljanje med svetlim in temnim načinom v vaši spletni aplikaciji. Scenarij se začne z an uvoz stavek za uvoz funkcije ref za obdelavo reaktivnih podatkov (dinamičnih podatkov) v Vue.

Nato opredeljuje a getInitialDarkMode funkcija, ki pridobi uporabnikove nastavitve temnega načina brskalnika LocalStorage. Izjavlja, temni način ref, ga inicializira z uporabniško preferenco, ki jo pridobi funkcija getInitialDarkMode.

The saveDarkModePreference posodablja uporabnikove nastavitve temnega načina v LocalStorage brskalnika z setItem metoda. Končno, preklopiDarkMode funkcija bo uporabnikom omogočila preklop temnega načina in posodobitev vrednosti brskalnika LocalStorage za temni način.

Uporaba teme temnega načina in testiranje aplikacije

Zdaj pa v vašem bloku predlog App.vue dodajte izbirnik atributa podatkovne teme v korenski element, da pogojno uporabite temo temnega načina na podlagi 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>

Tukaj povezujete izbirnik podatkovne teme z ref. To zagotavlja, da ko temni način res bo temna tema začela veljati. Prisluškovalec dogodka klika na gumbu preklaplja med svetlim in temnim načinom.

V terminalu zaženite naslednji ukaz za predogled aplikacije:

npm run dev

Morali bi videti tak zaslon:

Ko kliknete gumb, mora aplikacija preklapljati med svetlimi in temnimi temami:

Naučite se integrirati druge pakete v svoje aplikacije Vue

Spremenljivke CSS in API LocalStorage olajšajo dodajanje temne teme vaši aplikaciji Vue.

Obstaja veliko knjižnic tretjih oseb in vgrajenih dodatkov Vue, ki vam omogočajo prilagajanje spletnih aplikacij in uporabo dodatnih funkcij.