Kaip pridėti tamsių temų „Vue“ programose naudojant CSS kintamuosius

Tamsiųjų temų diegimas mūsų žiniatinklio programose iš prabangos tapo būtinybe. Įrenginių naudotojai dabar nori pereiti nuo šviesių temų prie tamsių ir atvirkščiai dėl estetinių nuostatų ir praktinių priežasčių.

Tamsios temos siūlo tamsesnę vartotojo sąsajų spalvų paletę, todėl sąsaja yra lengva akims esant prastam apšvietimui. Tamsiosios temos taip pat padeda taupyti akumuliatoriaus veikimo laiką įrenginiuose su OLED arba AMOLED ekranais.

Dėl šių ir kitų pranašumų naudotojams suteikiama galimybė pasirinkti pereiti prie tamsių temų.

Bandomosios programos nustatymas

Kad geriau suprastumėte, kaip į „Vue“ pridėti tamsių temų, turėsite sukurti paprastą „Vue“ programą, kad išbandytumėte kūrimą.

Norėdami inicijuoti naują „Vue“ programą, paleiskite šią komandą iš savo terminalo:

npm init vue@latest

Ši komanda įdiegs naujausią kurti-vue paketą, paketą, skirtą naujoms „Vue“ programoms inicijuoti. Taip pat bus paprašyta pasirinkti iš tam tikro funkcijų rinkinio. Jums nereikia pasirinkti, nes tai nėra būtina šios pamokos apimčiai.

Pridėkite šį šabloną prie App.vue failą savo paraiškoje src katalogas:

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

Aukščiau pateiktas kodo blokas apibūdina visą programą įprastu HTML, be scenarijaus ar stiliaus blokų. Kurdami stilių, naudosite aukščiau pateiktame šablone esančias klases. Kai įdiegsite tamsiąją temą, programos struktūra pasikeis.

Bandomosios programos stiliaus kūrimas naudojant CSS kintamuosius

CSS kintamieji arba tinkintos CSS ypatybės, yra dinaminės reikšmės, kurias galite apibrėžti savo stiliaus lapuose. CSS kintamieji suteikia puikius įrankius temoms kurti, nes jie leidžia vienoje vietoje apibrėžti ir valdyti reikšmes, pvz., spalvas ir šrifto dydžius.

Naudosite CSS kintamuosius ir CSS pseudoklasių parinkiklius, kad pridėtumėte įprastą ir tamsaus režimo temą savo „Vue“ programai. Viduje src/assets katalogą, sukurkite a stiliai.css failą.

Pridėkite šiuos stilius prie šio styles.css failo:

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

Šiose deklaracijose yra specialus pseudoklasės parinkiklis (:root) ir atributo parinkiklis ([data-theme='true']). Stiliai, kuriuos įtraukėte į šakninį parinkiklį, taikomi aukščiausiam pirminiam elementui. Jis veikia kaip numatytasis tinklalapio stilius.

Duomenų temos parinkiklis taikomas pagal HTML elementus, kurių atributas nustatytas kaip „true“. Šiame atributų parinkiklyje galite apibrėžti tamsiojo režimo temos stilius, kad nepaisytumėte numatytosios šviesios temos.

Abi šios deklaracijos apibrėžia CSS kintamuosius naudojant -- priešdėlis. Juose saugomos spalvų reikšmės, kurias vėliau galite naudoti šviesioms ir tamsioms temoms pritaikyti.

Redaguoti src/main.js failą ir importuokite styles.css failą:

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

Dabar pridėkite daugiau stilių stiliai.css, žemiau duomenų tema parinkiklis. Kai kurie iš šių apibrėžimų nurodo spalvų kintamuosius naudojant var raktažodį. Tai leidžia pakeisti naudojamas spalvas tiesiog perjungiant kiekvieno kintamojo reikšmę, kaip tai daroma pradiniuose stiliuose.

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

Visuose elementuose galite nustatyti perėjimo ypatybę naudodami universalų CSS parinkiklį (*), kad perjungiant režimus būtų sukurta sklandi animacija:

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

Šie perėjimai sukuria laipsnišką fono ir teksto spalvos pasikeitimą, kai perjungiamas tamsus režimas, o tai suteikia malonų efektą.

Tamsiojo režimo logikos įgyvendinimas

Norėdami įdiegti tamsiosios temos režimą, jums reikės „JavaScript“ logikos, kad galėtumėte perjungti šviesias ir tamsias temas. Jūsų App.vue failą, įklijuokite šį scenarijaus bloką po parašytu šablono bloku „Vue“ kompozicijos 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>

Aukščiau pateiktame scenarijuje yra visa „JavaScript“ logika, skirta žiniatinklio programoje perjungti šviesų ir tamsų režimus. Scenarijus prasideda an importuoti pareiškimas, skirtas importuoti nuorodos funkciją, skirtą reaktyviesiems duomenims (dinaminiams duomenims) tvarkyti Vue.

Toliau jis apibrėžia a getInitialDarkMode funkcija, kuri nuskaito vartotojo tamsaus režimo nuostatas naršyklės Vietinė parduotuvė. Jame skelbiama tamsus režimas ref, inicijuodami jį pagal vartotojo nuostatas, gautas naudojant funkciją getInitialDarkMode.

The saveDarkModePreference funkcija atnaujina vartotojo tamsaus režimo nuostatas naršyklės „LocalStorage“ su setItem metodas. Galiausiai, perjungti „DarkMode“. funkcija leis vartotojams perjungti tamsųjį režimą ir atnaujinti naršyklės „LocalStorage“ reikšmę tamsiajam režimui.

Tamsiojo režimo temos taikymas ir programos testavimas

Dabar jūsų šablonų bloke App.vue failą, pridėkite duomenų temos atributo parinkiklį prie šakninio elemento, kad sąlygiškai pritaikytumėte tamsiojo režimo temą pagal jūsų logiką:

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

Čia duomenų temos parinkiklį pririšate prie „darkMode“ nuorod. Tai užtikrina, kad kada tamsus režimas tiesa, tamsioji tema įsigalios. Mygtuko paspaudimo įvykių klausytojas perjungia šviesų ir tamsų režimus.

Norėdami peržiūrėti programą, savo terminale paleiskite šią komandą:

npm run dev

Turėtumėte pamatyti tokį ekraną:

Kai spustelėsite mygtuką, programa turėtų perjungti šviesias ir tamsias temas:

Išmokite integruoti kitus paketus į savo „Vue“ programas

CSS kintamieji ir „LocalStorage“ API leidžia lengvai pridėti tamsią temą prie „Vue“ programos.

Yra daug trečiųjų šalių bibliotekų ir integruotų „Vue“ priedų, kurie leidžia tinkinti žiniatinklio programas ir naudoti papildomas funkcijas.