Kuidas lisada Vue rakendustesse tumedaid teemasid CSS-i muutujatega

Tumedate teemade rakendamine meie veebirakendustes on muutunud luksusest hädavajalikuks. Seadme kasutajad soovivad nüüd nii esteetilistel eelistustel kui ka praktilistel põhjustel lülituda heledatelt teemadelt tumedatele ja vastupidi.

Tumedad teemad pakuvad kasutajaliidese jaoks tumedamat värvipaletti, mis muudab liidese vähese valgusega keskkondades silmadele lihtsaks. Tumedad teemad aitavad ka OLED- või AMOLED-ekraaniga seadmete akut säästa.

Need eelised ja palju muud muudavad kasutajatele tumedate teemade vahetamise võimaluse andmise mõistlikumaks.

Testrakenduse seadistamine

Vue tumedate teemade lisamise paremaks mõistmiseks peate arenduse testimiseks looma lihtsa Vue rakenduse.

Uue Vue rakenduse lähtestamiseks käivitage oma terminalist järgmine käsk:

npm init vue@latest

See käsk installib rakenduse uusima versiooni loo-vue pakett, pakett uute Vue rakenduste lähtestamiseks. Samuti palutakse teil valida teatud funktsioonide hulgast. Te ei pea ühtegi valima, kuna see pole selle õpetuse ulatuse jaoks vajalik.

Lisage järgmine mall App.vue faili oma rakenduses src kataloog:

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

Ülaltoodud koodiplokk kirjeldab kogu rakendust tavalises HTML-is ilma skripti- või stiiliplokkideta. Stiilimisel kasutate ülaltoodud malli klasse. Tumeda teema rakendamisel muutub rakenduse struktuur.

Testrakenduse kujundamine CSS-i muutujatega

CSS-i muutujad või CSS-i kohandatud atribuudid, on dünaamilised väärtused, mida saate oma stiililehtedel määratleda. CSS-muutujad pakuvad teemade loomiseks suurepäraseid tööriistu, kuna need võimaldavad teil ühes kohas määratleda ja hallata selliseid väärtusi nagu värvid ja fondi suurused.

Vue rakenduse jaoks tavalise ja tumeda režiimi teema lisamiseks kasutate CSS-i muutujaid ja CSS-i pseudoklassi valijaid. Aastal src/assets kataloog, loo a stiilid.css faili.

Lisage sellele styles.css-failile järgmised stiilid:

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

Need deklaratsioonid sisaldavad spetsiaalset pseudoklassi valijat (:juur) ja atribuudi valija ([data-theme='true']). Juurvalijasse kaasatavad stiilid sihivad kõrgeimat ülemelementi. See toimib veebilehe vaikestiilina.

Andmeteema valija sihib HTML-i elemente, mille atribuudiks on seatud tõene. Selles atribuudivalijas saate seejärel määratleda tumeda režiimi teema stiilid, et alistada vaikevalgustusega teema.

Need deklaratsioonid määravad mõlemad CSS-i muutujad, kasutades -- eesliide. Need salvestavad värviväärtusi, mida saate seejärel kasutada heledate ja tumedate teemade jaoks rakenduse stiilimiseks.

Redigeeri src/main.js faili ja importige fail styles.css:

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

Nüüd lisage veel mõned stiilid stiilid.css, allpool andme-teema valija. Mõned neist määratlustest viitavad värvimuutujatele, kasutades var märksõna. See võimaldab muuta kasutatavaid värve lihtsalt iga muutuja väärtust vahetades, nagu seda tehakse esialgsetes stiilides.

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

Kõigile elementidele saate määrata üleminekuomaduse universaalse CSS-valijaga (*) sujuva animatsiooni loomiseks režiimide vahetamisel:

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

Need üleminekud muudavad tumerežiimi sisselülitamisel järk-järgult taustavärvi ja teksti värvi, andes meeldiva efekti.

Tumeda režiimi loogika rakendamine

Tumeda teemarežiimi rakendamiseks vajate heledate ja tumedate teemade vahel vahetamiseks JavaScripti loogikat. Sinu App.vue faili, kleepige järgmine skriptiplokk sisse kirjutatud malliploki alla Vue kompositsiooni 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>

Ülaltoodud skript sisaldab kogu JavaScripti loogikat teie veebirakenduses heleda ja tumeda režiimi vahel vahetamiseks. Skript algab tähega an importida avaldus reaktiivandmete (dünaamiliste andmete) töötlemiseks Vue-s viitefunktsiooni importimiseks.

Järgmisena määratleb see a hankige InitialDarkMode funktsioon, mis hangib kasutaja tumeda režiimi eelistused brauseri oma LocalStorage. See deklareerib tumerežiim ref, lähtestades selle kasutaja eelistustega, mille hangib funktsioon getInitialDarkMode.

The SaveDarkModePreference funktsioon värskendab kasutaja tumeda režiimi eelistust brauseri LocalStorage'is koos setItem meetod. Lõpuks, lülita DarkMode sisse funktsioon võimaldab kasutajatel tumedat režiimi sisse lülitada ja värskendada brauseri LocalStorage'i väärtust tumeda režiimi jaoks.

Tumeda režiimi teema rakendamine ja rakenduse testimine

Nüüd oma malliplokis App.vue faili, lisage juurelemendile andmeteema atribuudi valija, et tinglikult rakendada tumeda režiimi teemat teie loogika alusel:

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

Siin seote andmeteema valija darkMode viitega. See tagab, et millal tumerežiim on tõsi, tume teema hakkab kehtima. Nupu klõpsamissündmuste kuulaja lülitub heleda ja tumeda režiimi vahel.

Rakenduse eelvaate kuvamiseks käivitage terminalis järgmine käsk:

npm run dev

Peaksite nägema sellist ekraani:

Kui klõpsate nuppu, peaks rakendus lülituma heledate ja tumedate teemade vahel:

Õppige oma Vue rakendustesse teisi pakette integreerima

CSS-i muutujad ja LocalStorage API muudavad Vue rakendusse tumeda teema lisamise lihtsaks.

Seal on palju kolmandate osapoolte teeke ja sisseehitatud Vue lisasid, mis võimaldavad teil oma veebirakendusi kohandada ja kasutada lisafunktsioone.