Sådan tilføjes mørke temaer i Vue Apps med CSS-variabler

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 installerer den seneste version af create-vue-pakken, 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.

Tilføj følgende skabelon til App.vue-filen i din applikations src-mappe:

 
<template>
  <div>
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
    <button class="toggle-button">Toggle Dark Mode</button>
  </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. Opret en styles.css-fil i mappen src/assets.

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

 
:root {
  --background-color: #ffffff; 
  --text-color: #333333; 
  --box-background: #007bff; 
  --box-text-color: #ffffff; 
  --toggle-button: #007bff; 
}
  
[data-theme="true"] {
  --background-color: #333333; 
  --text-color: #ffffff; 
  --box-background: #000000; 
  --box-text-color: #ffffff; 
  --toggle-button: #000000; 
}

Disse erklæringer indeholder en speciel pseudo-klassevælger (:root) og en attributvælger ([data-theme=’true’]). 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 at bruge præfikset —. De gemmer farveværdier, som du derefter kan bruge til at style applikationen til lyse og mørke temaer.

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

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

Tilføj nu nogle flere stile i styles.css, under data-tema-vælgeren. Nogle af disse definitioner vil referere til farvevariablerne ved hjælp af nøgleordet var. 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

 * {
  
  transition: background-color 0.3s, color 0.3s;
}

for at skabe en jævn animation, når du skifter tilstand:

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

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

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 skal du indsætte følgende scriptblok under skabelonblokken skrevet i Vue’s Composition API:

Scriptet ovenfor inkluderer al JavaScript-logik til at skifte mellem lys og mørke tilstande i din webapp. Scriptet begynder med en importerklæring 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. Den erklærer darkMode ref, initialiserer den med brugerens præference hentet af getInitialDarkMode-funktionen.

SaveDarkModePreference-funktionen opdaterer brugerens præference for mørk tilstand i browserens LocalStorage med setItem-metoden. Endelig vil toggleDarkMode-funktionen 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

 
<template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>
 

Nu, i skabelonblokken i din App.vue-fil, skal du tilføje data-tema-attributvælgeren til rodelementet for at betinget anvende mørketilstandstemaet baseret på din logik:

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

 npm run dev

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

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.