Lær om CSS-variabler og LocalStorage API med dette praktiske Vue-projekt.

Implementering af mørke temaer i vores webapplikationer er gået fra en luksus til en nødvendighed. Enhedsbrugere ønsker nu at skifte fra lyse temaer til mørke temaer og omvendt på grund af både æstetiske præferencer og praktiske årsager.

Mørke temaer tilbyder en mørkere farvepalet til brugergrænseflader, hvilket gør grænsefladen let for øjnene i omgivelser med svagt lys. Mørke temaer hjælper også med at spare batterilevetid på enheder med OLED- eller AMOLED-skærme.

Disse fordele og flere gør det mere rimeligt at give brugerne mulighed for at skifte til mørke temaer.

Opsætning af testapplikationen

For at få en bedre forståelse af, hvordan du tilføjer mørke temaer i Vue, skal du oprette en simpel Vue-app for at teste din udvikling.

For at initialisere den nye Vue-app skal du køre følgende kommando fra din terminal:

npm init vue@latest

Denne kommando vil installere den seneste version af skabe-vue pakke, pakken til initialisering af nye Vue-apps. Det vil også bede dig om at vælge fra et bestemt sæt funktioner. Du behøver ikke at vælge nogen, da det ikke er nødvendigt for omfanget af denne vejledning.

instagram viewer

Tilføj følgende skabelon til App.vue fil i din ansøgning src vejviser:


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

Kodeblokken ovenfor beskriver hele applikationen i almindelig HTML, uden script- eller stilblokke. Du skal bruge klasserne i ovenstående skabelon til stylingformål. Når du implementerer det mørke tema, ændres appens struktur.

Style testapplikationen med CSS-variabler

CSS-variabler eller CSS-tilpassede egenskaber, er dynamiske værdier, du kan definere i dine typografiark. CSS-variabler giver fremragende værktøj til tematisering, fordi de giver dig mulighed for at definere og administrere værdier såsom farver og skriftstørrelser på ét sted.

Du vil bruge CSS-variabler og CSS-pseudoklassevælgere til at tilføje et almindeligt og et mørkt tilstandstema til din Vue-applikation. I den src/aktiver mappe, opret en styles.css fil.

Føj følgende stilarter til denne styles.css-fil:

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

Disse erklæringer indeholder en speciel pseudoklassevælger (:rod) og en attributvælger ([data-theme='sand']). De stilarter, du inkluderer i en rodvælger, er målrettet mod det højeste overordnede element. Det fungerer som standardstyling for websiden.

Data-tema-vælgeren målretter HTML-elementer med denne attribut sat til sand. I denne attributvælger kan du derefter definere stilarter for temaet mørk tilstand for at tilsidesætte standard lystemaet.

Disse erklæringer definerer begge CSS-variabler ved hjælp af -- præfiks. De gemmer farveværdier, som du derefter kan bruge til at style applikationen til lyse og mørke temaer.

Rediger src/main.js fil og importer filen styles.css:

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

Tilføj nu nogle flere styles styles.css, under data-tema vælger. Nogle af disse definitioner vil referere til farvevariablerne ved hjælp af var søgeord. Dette lader dig ændre farverne i brug ved blot at ændre værdien af ​​hver variabel, som de oprindelige stilarter gør.

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

Du kan indstille en overgangsegenskab på alle elementer ved hjælp af den universelle CSS-vælger (*) for at skabe en jævn animation, når du skifter tilstand:

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

Disse overgange skaber en gradvis ændring i baggrundsfarve og tekstfarve, når mørk tilstand skiftes, hvilket giver en behagelig effekt.

Implementering af Dark Mode Logic

For at implementere den mørke tematilstand skal du bruge JavaScript-logik til at skifte mellem lyse og mørke temaer. I din App.vue fil, indsæt følgende scriptblok under skabelonblokken skrevet i 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>

Scriptet ovenfor inkluderer al JavaScript-logik til at skifte mellem lys og mørke tilstande i din webapp. Scriptet begynder med en importere sætning for at importere ref-funktionen til håndtering af reaktive data (dynamiske data) i Vue.

Dernæst definerer den en getInitialDarkMode funktion, som henter brugerens præference for mørk tilstand fra browserens LocalStorage. Det erklærer mørk tilstand ref, initialiserer den med brugerens præference hentet af getInitialDarkMode-funktionen.

Det saveDarkModePreference funktionen opdaterer brugerens præference for mørk tilstand i browserens LocalStorage med sætItem metode. Endelig skifte Mørk tilstand funktionen vil lade brugere skifte mellem mørk tilstand og opdatere browserens LocalStorage-værdi for mørk tilstand.

Anvendelse af Dark Mode-temaet og test af applikationen

Nu, i skabelonblokken i din App.vue fil, tilføj data-tema-attributvælgeren til rodelementet for at betinget anvende mørketilstandstemaet baseret på din 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>

Her binder du data-tema-vælgeren til darkMode-referen. Dette sikrer, at når mørk tilstand er sandt, vil det mørke tema træde i kraft. Klikhændelseslytteren på knappen skifter mellem lys og mørk tilstand.

Kør følgende kommando i din terminal for at få vist applikationen:

npm run dev

Du bør se en skærm som denne:

Når du klikker på knappen, skal appen skifte mellem lyse og mørke temaer:

Lær at integrere andre pakker i dine Vue-applikationer

CSS-variabler og LocalStorage API gør det nemt at tilføje et mørkt tema til din Vue-app.

Der er mange tredjepartsbiblioteker og indbyggede Vue-ekstramateriale, der lader dig tilpasse dine webapps og bruge ekstra funktioner.