Kā pievienot tumšus motīvus Vue lietotnēs, izmantojot CSS mainīgos

Tumšo tēmu ieviešana mūsu tīmekļa lietojumprogrammās no greznības ir kļuvusi par nepieciešamību. Ierīču lietotāji tagad vēlas pārslēgties no gaišiem motīviem uz tumšiem motīviem un otrādi gan estētisku, gan praktisku iemeslu dēļ.

Tumšie motīvi piedāvā tumšāku krāsu paleti lietotāja saskarnēm, padarot saskarni vieglu acīm vājā apgaismojumā. Tumšie motīvi arī palīdz ietaupīt akumulatora darbības laiku ierīcēs ar OLED vai AMOLED ekrāniem.

Šīs un citas priekšrocības padara lietotājiem saprātīgāku iespēju pārslēgties uz tumšajiem motīviem.

Testa lietojumprogrammas iestatīšana

Lai labāk izprastu, kā Vue pievienot tumšus motīvus, jums būs jāizveido vienkārša Vue lietotne, lai testētu savu izstrādi.

Lai inicializētu jauno Vue lietotni, palaidiet šādu komandu no sava termināļa:

npm init vue@latest

Šī komanda instalēs jaunāko versiju izveidot-vue pakotne, pakotne jaunu Vue lietotņu inicializācijai. Tas arī lūgs jums izvēlēties kādu no noteiktas funkciju kopas. Jums nav jāatlasa neviena, jo tas nav nepieciešams šīs apmācības ietvaros.

Pievienojiet tālāk norādīto veidni App.vue failu savā pieteikumā src direktorijs:

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

Iepriekš minētais koda bloks apraksta visu lietojumprogrammu parastajā HTML formātā bez skripta vai stila blokiem. Iepriekš minētajā veidnē esošās klases izmantosit stila nolūkos. Ieviešot tumšo motīvu, mainīsies lietotnes struktūra.

Pārbaudes lietojumprogrammas veidošana ar CSS mainīgajiem

CSS mainīgie vai CSS pielāgotie rekvizīti, ir dinamiskas vērtības, kuras varat definēt savās stila lapās. CSS mainīgie nodrošina lieliskus rīkus tēmu veidošanai, jo tie ļauj vienuviet definēt un pārvaldīt tādas vērtības kā krāsas un fontu izmērus.

Jūs izmantosiet CSS mainīgos un CSS pseidoklases atlasītājus, lai savai Vue lietojumprogrammai pievienotu parasto un tumšā režīma motīvu. Iekš src/assets direktorijā, izveidojiet a stili.css failu.

Pievienojiet šim styles.css failam šādus stilus:

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

Šīs deklarācijas satur īpašu pseidoklases atlasītāju (:root) un atribūtu atlasītāju ([data-theme='true']). Saknes atlasītājā iekļautie stili ir vērsti uz augstāko vecākelementu. Tas darbojas kā tīmekļa lapas noklusējuma stils.

Datu motīvu atlasītājs atlasa HTML elementus, kuru atribūts ir iestatīts uz True. Šajā atribūtu atlasītājā varat definēt tumšā režīma motīva stilus, lai ignorētu noklusējuma gaišo motīvu.

Šīs deklarācijas definē CSS mainīgos, izmantojot -- priedēklis. Tajos tiek saglabātas krāsu vērtības, kuras pēc tam varat izmantot, lai veidotu lietojumprogrammas stilu gaišām un tumšām tēmām.

Rediģēt src/main.js failu un importēt styles.css failu:

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

Tagad pievienojiet vēl dažus stilus stili.css, zem datu tēma atlasītājs. Dažas no šīm definīcijām atsaucēs uz krāsu mainīgajiem, izmantojot var atslēgvārds. Tas ļauj mainīt izmantotās krāsas, vienkārši mainot katra mainīgā vērtību, kā to dara sākotnējie stili.

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

Pārejas rekvizītus var iestatīt visiem elementiem, izmantojot universālo CSS atlasītāju (*), lai, pārslēdzot režīmus, izveidotu vienmērīgu animāciju:

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

Šīs pārejas pakāpeniski maina fona krāsu un teksta krāsu, kad tiek pārslēgts tumšais režīms, radot patīkamu efektu.

Tumšā režīma loģikas ieviešana

Lai ieviestu tumšo motīvu režīmu, jums būs nepieciešama JavaScript loģika, lai pārslēgtos starp gaišajiem un tumšajiem motīviem. Tavā App.vue failu, ielīmējiet šo skripta bloku zem veidnes bloka, kas ierakstīts Vue kompozīcijas 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>

Iepriekš minētajā skriptā ir iekļauta visa JavaScript loģika, lai tīmekļa lietotnē pārslēgtos starp gaišo un tumšo režīmu. Skripts sākas ar an imports paziņojums, lai importētu ref funkciju reaktīvo datu (dinamisko datu) apstrādei Vue.

Tālāk tas definē a getInitialDarkMode funkcija, kas izgūst lietotāja tumšā režīma preferences pārlūkprogrammas Vietējā krātuve. Tā deklarē tumšais režīms ref, inicializējot to ar lietotāja preferenci, kas iegūta, izmantojot funkciju getInitialDarkMode.

The SaglabātDarkModePreference funkcija atjaunina lietotāja tumšā režīma preferences pārlūkprogrammas LocalStorage ar setItem metodi. Visbeidzot, pārslēgt DarkMode funkcija ļaus lietotājiem pārslēgt tumšo režīmu un atjaunināt pārlūkprogrammas LocalStorage vērtību tumšajam režīmam.

Tumšā režīma motīva lietošana un lietojumprogrammas testēšana

Tagad jūsu veidņu blokā App.vue failu, saknes elementam pievienojiet datu tēmas atribūtu atlasītāju, lai nosacīti lietotu tumšā režīma motīvu, pamatojoties uz jūsu loģiku:

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

Šeit jūs saistāt datu motīvu atlasītāju ar darkMode ref. Tas nodrošina, ka kad tumšais režīms ir taisnība, tumšā tēma stāsies spēkā. Klikšķu notikumu uztvērējs uz pogas pārslēdzas starp gaišo un tumšo režīmu.

Lai priekšskatītu lietojumprogrammu, terminālī palaidiet šo komandu:

npm run dev

Jums vajadzētu redzēt šādu ekrānu:

Noklikšķinot uz pogas, lietotnei vajadzētu pārslēgties starp gaišajiem un tumšajiem motīviem:

Uzziniet, kā savās Vue lietojumprogrammās integrēt citas pakotnes

CSS mainīgie un LocalStorage API atvieglo tumšas motīva pievienošanu Vue lietotnei.

Ir daudzas trešo pušu bibliotēkas un iebūvētas Vue ekstras, kas ļauj pielāgot tīmekļa lietotnes un izmantot papildu funkcijas.