Ismerje meg a CSS-változókat és a LocalStorage API-t ezzel a praktikus Vue-projekttel.

A sötét témák webalkalmazásainkban való megvalósítása luxusból szükségszerűvé vált. Az eszközfelhasználók most esztétikai és gyakorlati okok miatt szeretnének világos témákról sötét témákra váltani, és fordítva.

A sötét témák sötétebb színpalettát kínálnak a felhasználói felületekhez, így a kezelőfelület kíméli a szemet gyenge megvilágítású környezetben. A sötét témák emellett segítenek megőrizni az akkumulátor élettartamát az OLED vagy AMOLED képernyővel rendelkező eszközökön.

Ezek az előnyök és egyebek ésszerűbbé teszik, hogy a felhasználók választási lehetőséget biztosítsanak a sötét témákra való váltáshoz.

A tesztalkalmazás beállítása

Ahhoz, hogy jobban megértse, hogyan adhat hozzá sötét témákat a Vue-hoz, létre kell hoznia egy egyszerű Vue-alkalmazást a fejlesztés teszteléséhez.

Az új Vue alkalmazás inicializálásához futtassa a következő parancsot a terminálról:

npm init vue@latest

Ez a parancs telepíti a legújabb verziót

instagram viewer
Create-vue csomag, az új Vue-alkalmazások inicializálására szolgáló csomag. Azt is megkéri, hogy válasszon egy adott szolgáltatáskészlet közül. Nem kell kiválasztania egyiket sem, mivel ez nem szükséges az oktatóanyag hatóköréhez.

Adja hozzá a következő sablont a App.vue fájlt az alkalmazásában src Könyvtár:


<template>
<div>
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>

<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<buttonclass="toggle-button">Toggle Dark Modebutton>
div>
template>

A fenti kódblokk az egész alkalmazást normál HTML-ben írja le, szkript- vagy stílusblokkok nélkül. A fenti sablon osztályait stíluscélokra fogja használni. A sötét téma megvalósítása során az alkalmazás szerkezete megváltozik.

A tesztalkalmazás stílusa CSS-változókkal

CSS-változók vagy egyéni CSS-tulajdonságok, dinamikus értékek, amelyeket megadhat a stíluslapjaiban. A CSS-változók kiváló eszközöket biztosítanak a témához, mert lehetővé teszik az értékek, például a színek és a betűméretek egy helyen történő meghatározását és kezelését.

CSS-változókat és CSS-pszeudoosztály-választókat használ, hogy normál és sötét módú témát adjon a Vue-alkalmazáshoz. Ban,-ben src/assets könyvtárat, hozzon létre a stílusok.css fájlt.

Adja hozzá a következő stílusokat ehhez a styles.css fájlhoz:

/* 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 */
}

Ezek a deklarációk tartalmaznak egy speciális pszeudoosztály választót (:gyökér) és egy attribútumválasztó ([data-theme='true']). A gyökérválasztóban szereplő stílusok a legmagasabb szülőelemet célozzák. Ez a weboldal alapértelmezett stílusaként működik.

Az adattéma-választó olyan HTML-elemeket céloz meg, amelyeknél az attribútum igaz. Ebben az attribútumválasztóban stílusokat határozhat meg a sötét mód témához, hogy felülírja az alapértelmezett világos témát.

Ezek a deklarációk egyaránt CSS-változókat határoznak meg a -- előtag. Színértékeket tárolnak, amelyek segítségével világos és sötét témákhoz stílusozhatja az alkalmazást.

Szerkessze a src/main.js fájlt, és importálja a styles.css fájlt:

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

Most adjon hozzá néhány további stílust stílusok.css, valami alatt adattéma választó. Néhány ilyen meghatározás a színváltozókra hivatkozik a var kulcsszó. Ez lehetővé teszi a használt színek egyszerű megváltoztatását az egyes változók értékének megváltoztatásával, ahogy a kezdeti stílusok teszik.

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

Az univerzális CSS választó segítségével minden elemre beállíthat egy átmeneti tulajdonságot (*), hogy egyenletes animációt hozzon létre módváltáskor:

* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}

Ezek az átmenetek fokozatos változást hoznak létre a háttérszínben és a szöveg színében, amikor a sötét módot váltják, így kellemes hatást keltenek.

A sötét mód logika megvalósítása

A sötét témamód megvalósításához JavaScript-logikára lesz szüksége a világos és sötét témák közötti váltáshoz. A tiédben App.vue fájlt, illessze be a következő szkriptblokkot a beírt sablonblokk alá A Vue kompozíció API-ja :


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

A fenti szkript tartalmazza az összes JavaScript-logikát a világos és sötét módok közötti váltáshoz a webalkalmazásban. A forgatókönyv an-val kezdődik import utasítás a ref függvény importálásához a reaktív adatok (dinamikus adatok) kezelésére a Vue-ban.

Ezután meghatározza a getInitialDarkMode funkció, amely lekéri a felhasználó sötét mód preferenciáit a böngészőé Helyi raktár. Kijelenti a sötét mód ref, inicializálva a getInitialDarkMode függvény által lekért felhasználói preferenciákkal.

A saveDarkModePreference funkció frissíti a felhasználó sötét mód beállításait a böngésző LocalStorage-jában a következővel: setItem módszer. Végül a kapcsolja be a DarkMode-ot A funkció lehetővé teszi a felhasználók számára, hogy átváltsák a sötét módot, és frissítsék a böngésző LocalStorage értékét a sötét módhoz.

A Sötét mód téma alkalmazása és az alkalmazás tesztelése

Most az Ön sablonblokkjában App.vue fájlt, adja hozzá az adattéma attribútum-választót a gyökérelemhez, hogy feltételesen alkalmazza a sötét mód témáját az Ön logikája alapján:


<template>

<div:data-theme="darkMode">
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>

<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>

<button @click="toggleDarkMode"class="toggle-button">
 Toggle Dark Mode
button>
div>
template>

Itt az adattéma-választót a darkMode ref. Ez biztosítja, hogy mikor sötét mód igaz, a sötét téma életbe lép. A gombon lévő kattintási eseményfigyelő átkapcsol a világos és sötét módok között.

Az alkalmazás előnézetéhez futtassa a következő parancsot a terminálon:

npm run dev

Egy ehhez hasonló képernyőt kell látnod:

Amikor a gombra kattint, az alkalmazásnak váltania kell a világos és a sötét témák között:

Ismerje meg, hogyan integrálhat más csomagokat Vue-alkalmazásaiba

A CSS-változók és a LocalStorage API megkönnyíti a sötét téma hozzáadását a Vue alkalmazáshoz.

Számos harmadik féltől származó könyvtár és beépített Vue-extra létezik, amelyek lehetővé teszik a webalkalmazások testreszabását és az extra funkciók használatát.