Hvordan legge til mørke temaer i Vue-apper med CSS-variabler

Implementering av mørke temaer i nettapplikasjonene våre har gått fra en luksus til en nødvendighet. Enhetsbrukere ønsker nå å bytte fra lyse temaer til mørke temaer og omvendt på grunn av både estetiske preferanser og praktiske årsaker.

Mørke temaer tilbyr en mørkere fargepalett for brukergrensesnitt, noe som gjør grensesnittet lett for øynene i miljøer med lite lys. Mørke temaer bidrar også til å spare batterilevetid på enheter med OLED- eller AMOLED-skjermer.

Disse fordelene og flere gjør det mer rimelig å gi brukerne valget mellom å bytte til mørke temaer.

Sette opp testapplikasjonen

For å få en bedre forståelse av hvordan du legger til mørke temaer i Vue, må du lage en enkel Vue-app for å teste utviklingen din.

For å initialisere den nye Vue-appen, kjør følgende kommando fra terminalen din:

 npm init vue@latest

Denne kommandoen vil installere den nyeste versjonen av create-vue-pakken, pakken for initialisering av nye Vue-apper. Den vil også be deg om å velge fra et bestemt sett med funksjoner. Du trenger ikke velge noen, da det ikke er nødvendig for omfanget av denne opplæringen.

Legg til følgende mal i App.vue-filen i programmets src-katalog:

 
<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 applikasjonen i vanlig HTML, uten skript eller stilblokker. Du vil bruke klassene i malen ovenfor for stylingformål. Når du implementerer det mørke temaet, vil appens struktur endres.

Styling av testapplikasjonen med CSS-variabler

CSS-variabler, eller egendefinerte CSS-egenskaper, er dynamiske verdier du kan definere i stilarkene dine. CSS-variabler gir utmerket verktøy for temaer fordi de lar deg definere og administrere verdier som farger og skriftstørrelser på ett sted.

Du vil bruke CSS-variabler og CSS-pseudoklassevelgere for å legge til et vanlig og mørkt modus-tema for Vue-applikasjonen din. Lag en styles.css-fil i src/assets-katalogen.

Legg til følgende stiler til denne styles.css-filen:

 
: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æringene inneholder en spesiell pseudoklassevelger (:root) og en attributtvelger ([data-theme=’true’]). Stilene du inkluderer i en rotvelger målretter mot det høyeste overordnede elementet. Det fungerer som standard stil for nettsiden.

Datatemavelgeren målretter HTML-elementer med det attributtet satt til true. I denne attributtvelgeren kan du deretter definere stiler for mørk modus-temaet, for å overstyre standard lystema.

Disse erklæringene definerer begge CSS-variabler ved å bruke prefikset —. De lagrer fargeverdier som du deretter kan bruke til å style applikasjonen for lyse og mørke temaer.

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

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

Legg nå til noen flere stiler i styles.css, under data-tema-velgeren. Noen av disse definisjonene vil referere til fargevariablene ved å bruke nøkkelordet var. Dette lar deg endre fargene som er i bruk ganske enkelt ved å bytte verdien til hver variabel, slik de første stilene gjø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 angi en overgangsegenskap for alle elementer ved å bruke den universelle CSS-velgeren

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

for å lage en jevn animasjon når du bytter modus:

Disse overgangene skaper en gradvis endring i bakgrunnsfarge og tekstfarge når mørk modus er vekslet, noe som gir en behagelig effekt.

Implementering av 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 å implementere mørk temamodus, trenger du JavaScript-logikk for å bytte mellom lyse og mørke temaer. I App.vue-filen limer du inn følgende skriptblokk under malblokken skrevet i Vues Composition API:

Skriptet ovenfor inkluderer all JavaScript-logikk for å veksle mellom lyse og mørke moduser i nettappen din. Skriptet begynner med en importsetning for å importere ref-funksjonen for håndtering av reaktive data (dynamiske data) i Vue.

Deretter definerer den en getInitialDarkMode-funksjon som henter brukerens mørkemoduspreferanse fra nettleserens LocalStorage. Den erklærer darkMode ref, initialiserer den med brukerens preferanse hentet av getInitialDarkMode-funksjonen.

SaveDarkModePreference-funksjonen oppdaterer brukerens mørkmoduspreferanse i nettleserens LocalStorage med setItem-metoden. Til slutt vil toggleDarkMode-funksjonen la brukere veksle mellom mørk modus og oppdatere nettleserens LocalStorage-verdi for mørk modus.

Bruk av mørk modus-tema og testing av applikasjonen

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

Nå, i malblokken til App.vue-filen din, legg til data-tema-attributtvelgeren til rotelementet for å betinget bruke mørk modus-temaet basert på logikken din:

Her binder du data-tema-velgeren til darkMode-referen. Dette sikrer at når darkMode er sann, vil det mørke temaet tre i kraft. Klikk-hendelseslytteren på knappen veksler mellom lys og mørk modus.

 npm run dev

Kjør følgende kommando i terminalen for å forhåndsvise applikasjonen:

Du bør se en skjerm som dette:

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

Lær å integrere andre pakker i Vue-applikasjonene dine

CSS-variabler og LocalStorage API gjør det enkelt å legge til et mørkt tema i Vue-appen din.