Home-theater-designers
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.
Dagens video från MUO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL
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 skapa-vy paket, 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 till app.vue fil i din ansökan src katalog:
<!-- App.vue -->
<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 ä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. I den src/tillgångar katalog, skapa en styles.css fil.
hur gör jag min router snabbare
Lägg till följande stilar till denna 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 */
}
Dessa deklarationer innehåller en speciell pseudoklassväljare ( :rot ) 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 hjälp av -- prefix. De lagrar färgvärden som du sedan kan använda för att styla applikationen för ljusa och mörka teman.
Redigera src/main.js fil och importera filen styles.css:
hur man stänger av skärmen på en bärbar dator
// main.js
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 styles.css , under datatema väljare. Några av dessa definitioner kommer att referera till färgvariablerna med hjälp av var nyckelord. 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 ( * ) för att skapa en jämn animering när du byter läge:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
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
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, klistra in följande skriptblock under mallblocket som skrivits in Vues sammansättning API :
<!-- App.vue -->
<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>
Skriptet ovan innehåller all JavaScript-logik för att växla mellan ljust och mörkt läge i din webbapp. Manuset börjar med en importera uttalande 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 Lokalt utrymme . Det deklarerar mörkt läge ref, initialisera den med användarens preferens hämtad av getInitialDarkMode-funktionen.
De saveDarkModePreference funktionen uppdaterar användarens preferens för mörkt läge i webbläsarens LocalStorage med setItem metod. Slutligen, den växla till mörkt läge funktionen låter 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
Nu, i mallblocket för 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:
<!-- App.vue -->
<template>
<!-- added the data theme attribute selector to apply the dark theme
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>
<!--added the dark mode switch button-->
<button @click="toggleDarkMode" class="toggle-button">
Toggle Dark Mode
</button>
</div>
</template>
Här binder du datatemaväljaren till darkMode-referen. Detta säkerställer att när mörkt läge ä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.
Kör följande kommando i din terminal för att förhandsgranska programmet:
npm run dev
Du bör se en skärm som denna:
När du klickar på knappen ska 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.
hur gör jag mina bilder privata på fb
Det finns många tredjepartsbibliotek och inbyggda Vue-extrafunktioner som låter dig anpassa dina webbappar och använda extrafunktioner.