Hur man lägger till mörka teman i Vue-appar med CSS-variabler

Att implementera mörka teman i våra webbapplikationer har gått från en lyx till en nödvändighet. Enhetsanvändare vill nu byta från ljusa teman till mörka teman och vice versa på grund av både estetiska preferenser och praktiska skäl.

Mörka teman erbjuder en mörkare färgpalett för användargränssnitt, vilket gör gränssnittet lätt för ögonen i miljöer med svagt ljus. Mörka teman hjälper också till att spara batteritid på enheter med OLED- eller AMOLED-skärmar.

Dessa fördelar och fler gör det mer rimligt att ge användarna valet att byta till mörka teman.

Konfigurera testapplikationen

För att få en bättre förståelse för hur du lägger till mörka teman i Vue måste du skapa en enkel Vue-app för att testköra din utveckling.

För att initiera den nya Vue-appen, kör följande kommando från din terminal:

 npm init vue@latest

Detta kommando kommer att installera den senaste versionen av create-vue-paketet, paketet för att initiera nya Vue-appar. Den kommer också att be dig att välja från en viss uppsättning funktioner. Du behöver inte välja någon eftersom det inte är nödvändigt för den här handledningens omfattning.

Lägg till följande mall i filen App.vue 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>

Kodblocket ovan beskriver hela applikationen i vanlig HTML, utan skript eller stilblock. Du kommer att använda klasserna i mallen ovan för stylingändamål. När du implementerar det mörka temat kommer appens struktur att förändras.

Styla testapplikationen med CSS-variabler

CSS-variabler, eller anpassade CSS-egenskaper, är dynamiska värden som du kan definiera i dina stilmallar. CSS-variabler ger utmärkt verktyg för teman eftersom de låter dig definiera och hantera värden som färger och teckenstorlekar på ett ställe.

Du kommer att använda CSS-variabler och CSS-pseudoklassväljare för att lägga till ett vanligt och ett mörkt lägestema för din Vue-applikation. Skapa en styles.css-fil i katalogen src/assets.


Lägg till följande stilar till denna 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;
}

Dessa deklarationer innehåller en speciell pseudoklassväljare (:root) och en attributväljare ([data-theme=’true’]). Stilarna du inkluderar i en rotväljare riktar sig till det högsta överordnade elementet. Det fungerar som standardstilen för webbsidan.

Datatemaväljaren riktar in sig på HTML-element med det attributet inställt på sant. I den här attributväljaren kan du sedan definiera stilar för temat mörkt läge för att åsidosätta standardljustemat.

Dessa deklarationer definierar båda CSS-variabler med prefixet —. De lagrar färgvärden som du sedan kan använda för att styla applikationen för ljusa och mörka teman.

Redigera filen src/main.js och importera filen styles.css:

 
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Lägg nu till några fler stilar i styles.css, under data-temaväljaren. Vissa av dessa definitioner kommer att referera till färgvariablerna med nyckelordet var. Detta låter dig ändra färgerna som används helt enkelt genom att ändra värdet för varje variabel, som de ursprungliga stilarna 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 ställa in en övergångsegenskap för alla element med den universella CSS-väljaren

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

för att skapa en jämn animering när du byter läge:

Dessa övergångar skapar en gradvis förändring i bakgrundsfärg och textfärg när mörkt läge växlas, vilket ger en tilltalande 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>

För att implementera det mörka temaläget behöver du JavaScript-logik för att växla mellan ljusa och mörka teman. I din App.vue-fil klistrar du in följande skriptblock under mallblocket skrivet i Vues Composition API:

Skriptet ovan innehåller all JavaScript-logik för att växla mellan ljust och mörkt läge i din webbapp. Skriptet börjar med en importsats för att importera ref-funktionen för hantering av reaktiva data (dynamiska data) i Vue.

Därefter definierar den en getInitialDarkMode-funktion som hämtar användarens preferens för mörkt läge från webbläsarens LocalStorage. Den deklarerar darkMode-referen och initierar den med användarens preferenser hämtade av getInitialDarkMode-funktionen.

SaveDarkModePreference-funktionen uppdaterar användarens mörka lägespreferens i webbläsarens LocalStorage med setItem-metoden. Slutligen låter toggleDarkMode-funktionen användare växla mellan mörkt läge och uppdatera webbläsarens LocalStorage-värde för mörkt läge.

Tillämpa mörkt lägestema och testa 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 mallblocket i din App.vue-fil, lägg till data-tema-attributväljaren till rotelementet för att villkorligt tillämpa mörkt lägestemat baserat på din logik:

Här binder du datatemaväljaren till darkMode ref. Detta säkerställer att när darkMode är sant kommer det mörka temat att träda i kraft. Klickahändelselyssnaren på knappen växlar mellan ljust och mörkt läge.

 npm run dev

Kör följande kommando i din terminal för att förhandsgranska programmet:

Du bör se en skärm som denna:

När du klickar på knappen bör appen växla mellan ljusa och mörka teman:

Lär dig att integrera andra paket i dina Vue-applikationer

CSS-variabler och LocalStorage API gör det enkelt att lägga till ett mörkt tema till din Vue-app.

Det finns många tredjepartsbibliotek och inbyggda Vue-extrafunktioner som låter dig anpassa dina webbappar och använda extrafunktioner.