Mørk modus i Vue: Enkelt guide med CSS-variabler

by
Tweet
Share
Share
Pin
0 Shares

Implementering av et mørkt tema i webapplikasjoner har utviklet seg fra å være en ekstra funksjon til å bli en forventning. Brukere ønsker nå muligheten til å veksle mellom lyse og mørke temaer, både for estetikkens skyld og for praktiske fordeler.

Mørke temaer gir en mørkere fargepalett for brukergrensesnittet, noe som kan redusere belastningen på øynene i omgivelser med dårlig belysning. I tillegg kan mørke temaer bidra til å spare batteri på enheter med OLED- eller AMOLED-skjermer.

Disse fordelene, sammen med flere andre, gjør det stadig mer relevant å gi brukerne valget om å aktivere et mørkt tema.

Konfigurere testapplikasjonen

For å få en bedre forståelse av hvordan du implementerer mørke temaer i Vue, kan vi starte med å lage en enkel Vue-app som vi kan bruke til å teste ut funksjonaliteten.

For å initialisere en ny Vue-applikasjon, kjør følgende kommando i terminalen:

 npm init vue@latest

Denne kommandoen vil installere den nyeste versjonen av «create-vue»-pakken, som brukes til å sette opp nye Vue-prosjekter. Du vil bli bedt om å velge mellom ulike funksjoner, men dette er ikke nødvendig for denne opplæringen.

Kopier følgende kode til App.vue-filen i programmets «src»-mappe:

 <template>
  <div>
    <h2 class="header">Velkommen til Min Vue App</h2>
    <p>Dette er en enkel Vue-app med litt tekst og stil.</p>
    
    <div class="styled-box">
      <p class="styled-text">Stylet Tekst</p>
    </div>
    <button class="toggle-button">Aktiver Mørk Modus</button>
  </div>
</template>

Koden over beskriver hele applikasjonen med vanlig HTML, uten bruk av skript eller stilblokker. Vi vil benytte klassene definert i malen for å style appen. Applikasjonens struktur vil ikke endres når vi implementerer det mørke temaet.

Styling av testapplikasjonen med CSS-variabler

CSS-variabler, også kalt egendefinerte CSS-egenskaper, er dynamiske verdier du kan definere i stilarkene dine. Disse variablene er svært nyttige for temabruk, fordi de tillater deg å sentralisere og administrere verdier som farger og skriftstørrelser.

Vi vil bruke CSS-variabler og CSS-pseudoklassevelgere for å legge til et standard og et mørkt tema i Vue-applikasjonen. Opprett en «styles.css»-fil i mappen «src/assets».

Legg til følgende stiler i «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 deklarasjonene benytter en spesiell pseudoklassevelger (:root) og en attributtvelger ([data-theme=’true’]). Stilene definert i rotvelgeren gjelder for det øverste elementet, som er standardstilen for websiden.

Attributtvelgeren ([data-theme=’true»]) er rettet mot HTML-elementer hvor dette attributtet er satt til «true». Her kan du definere stiler for det mørke temaet, som overstyrer det standard lyse temaet.

Disse erklæringene definerer CSS-variabler ved hjelp av prefikset «–«. De lagrer fargeverdier som vi senere kan bruke til å style applikasjonen for både lyse og mørke temaer.

Rediger filen «src/main.js» 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 flere stiler i «styles.css», under data-theme-velgeren. Noen av disse definisjonene refererer til fargevariablene ved hjelp av nøkkelordet «var». Dette gjør det enkelt å endre fargene ved å endre verdien til hver variabel, slik som i de første stilene.

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

Vi kan legge til en «transition»-egenskap for alle elementer med den universelle CSS-velgeren:

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

Dette skaper en jevn animasjon når vi bytter mellom lys og mørk modus:

Implementering av mørk modus logikk

Disse overgangene resulterer i en gradvis endring i bakgrunns- og tekstfarge, noe som gir en behagelig visuell effekt ved veksling til mørk modus.

 <script setup>
import { ref } from 'vue';
// Funksjon for å hente den første mørk modus preferansen fra local storage
const getInitialDarkMode = () => {
  const userPreference = localStorage.getItem('darkMode');
  return userPreference === 'true' ? true : false;
};
// Definer en ref for darkMode og initialiser den med brukerpreferanse
// eller false.
const darkMode = ref(getInitialDarkMode());
// Funksjon for å lagre mørk modus preferansen i local storage
const saveDarkModePreference = (isDarkMode) => {
  localStorage.setItem('darkMode', isDarkMode);
};
// Funksjon for å veksle mørk modus og oppdatere preferansen i local storage
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  saveDarkModePreference(darkMode.value);
};
</script>

For å implementere mørk modus, trenger vi JavaScript-logikk for å veksle mellom lyst og mørkt tema. I App.vue-filen, lim inn følgende scriptblokk under malblokken, skrevet med Vues Composition API:

Skriptet ovenfor inneholder all nødvendig JavaScript-logikk for å veksle mellom lys og mørk modus i webappen. Skriptet starter med å importere ref-funksjonen, som brukes til å håndtere reaktive (dynamiske) data i Vue.

Deretter definerer den en «getInitialDarkMode»-funksjon, som henter brukerens mørk modus preferanse fra nettleserens LocalStorage. Den deklarerer en «darkMode»-ref, og initialiserer den med brukerens preferanse hentet av «getInitialDarkMode»-funksjonen.

Bruk av mørkt tema og testing av applikasjonen

«saveDarkModePreference»-funksjonen oppdaterer brukerens preferanse for mørk modus i nettleserens LocalStorage ved hjelp av «setItem»-metoden. Til slutt vil «toggleDarkMode»-funksjonen tillate brukere å veksle mellom mørk modus og oppdatere LocalStorage-verdien for mørk modus.

 <template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h2 class="header">Velkommen til Min Vue App</h2>
    <p>Dette er en enkel Vue-app med litt tekst og stil.</p>
    
    <div class="styled-box">
      <p class="styled-text">Stylet Tekst</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Aktiver Mørk Modus
    </button> 
  </div>
</template>

I malblokken til App.vue-filen, legg til data-theme-attributtvelgeren til rotelementet for å betinget bruke mørkt tema basert på logikken:

Her kobler vi «data-theme»-velgeren til «darkMode»-ref. Dette sørger for at når «darkMode» er «true», vil det mørke temaet aktiveres. «Click»-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 skal nå se en skjerm som ligner denne:

Integrer andre pakker i Vue applikasjonene dine

Når du klikker på knappen skal appen veksle mellom lyst og mørkt tema:

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

Det finnes mange tredjepartsbiblioteker og innebygde Vue funksjoner som kan brukes til å tilpasse webapplikasjonene og legge til ekstra funksjonalitet.