Tummien teemojen lisääminen Vue-sovelluksiin CSS-muuttujien avulla

Tummien teemojen käyttöönotto verkkosovelluksissamme on muuttunut ylellisyydestä välttämättömyyteen. Laitteen käyttäjät haluavat nyt vaihtaa vaaleista teemoista tummiin ja päinvastoin sekä esteettisistä mieltymyksistä että käytännön syistä.

Tummat teemat tarjoavat käyttöliittymille tummemman väripaletin, mikä tekee käyttöliittymästä helpon silmille heikossa valaistuksessa. Tummat teemat auttavat myös säästämään akkua laitteissa, joissa on OLED- tai AMOLED-näyttö.

Näiden ja muiden etujen ansiosta on järkevämpää antaa käyttäjille mahdollisuus vaihtaa tummiin teemoihin.

Testisovelluksen määrittäminen

Jotta saat paremman käsityksen tummien teemojen lisäämisestä Vueen, sinun on luotava yksinkertainen Vue-sovellus testataksesi kehitystäsi.

Alusta uusi Vue-sovellus suorittamalla seuraava komento päätteestäsi:

npm init vue@latest

Tämä komento asentaa uusimman version Create-vue paketti, paketti uusien Vue-sovellusten alustamiseen. Se myös pyytää sinua valitsemaan tietyn joukon ominaisuuksia. Sinun ei tarvitse valita mitään, koska se ei ole välttämätöntä tämän opetusohjelman laajuuden kannalta.

Lisää seuraava malli App.vue tiedosto hakemuksessasi src hakemisto:

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

Yllä oleva koodilohko kuvaa koko sovelluksen tavallisessa HTML: ssä ilman komentosarja- tai tyylilohkoja. Käytät yllä olevan mallin luokkia muotoilutarkoituksiin. Kun otat käyttöön tumman teeman, sovelluksen rakenne muuttuu.

Testisovelluksen muotoilu CSS-muuttujilla

CSS-muuttujat tai mukautetut CSS-ominaisuudet, ovat dynaamisia arvoja, jotka voit määrittää tyylisivuihisi. CSS-muuttujat tarjoavat erinomaiset työkalut teemoille, koska niiden avulla voit määrittää ja hallita arvoja, kuten värejä ja kirjasinkokoja, yhdessä paikassa.

Käytät CSS-muuttujia ja CSS-pseudoluokan valitsimia lisätäksesi tavallisen ja pimeän tilan teeman Vue-sovellukseesi. Vuonna src/assets hakemisto, luo a styles.css tiedosto.

Lisää seuraavat tyylit tähän styles.css-tiedostoon:

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

Nämä ilmoitukset sisältävät erityisen pseudoluokan valitsimen (:root) ja määritteen valitsin ([data-theme='true']). Juurivalitsimeen sisällyttämäsi tyylit kohdistavat korkeimpaan yläelementtiin. Se toimii web-sivun oletustyylinä.

Datateeman valitsin kohdistaa HTML-elementteihin, joiden attribuutti on tosi. Tässä määritteen valitsimessa voit sitten määrittää tyylejä tumman tilan teemalle ohittaaksesi vaalean oletusteeman.

Nämä ilmoitukset molemmat määrittelevät CSS-muuttujat käyttämällä -- etuliite. Ne tallentavat väriarvot, joita voit sitten käyttää vaaleiden ja tummien teemojen sovelluksen muotoiluun.

Muokkaa src/main.js tiedosto ja tuo styles.css-tiedosto:

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

Lisää nyt lisää tyylejä styles.css, alapuolella data-teema valitsin. Jotkut näistä määritelmistä viittaavat värimuuttujiin käyttämällä var avainsana. Tämän avulla voit muuttaa käytössä olevia värejä yksinkertaisesti vaihtamalla kunkin muuttujan arvoa, kuten alkuperäiset tyylit tekevät.

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

Voit asettaa siirtymäominaisuuden kaikille elementeille yleisellä CSS-valitsimella (*) luodaksesi sujuvan animaation tiloja vaihdettaessa:

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

Nämä siirtymät luovat asteittaisen muutoksen taustaväriin ja tekstin väriin, kun tumma tila vaihdetaan, mikä antaa miellyttävän vaikutelman.

Tumman tilan logiikan toteuttaminen

Tumman teematilan käyttöönotto edellyttää JavaScript-logiikkaa vaihtaaksesi vaaleiden ja tummien teemojen välillä. Sinun App.vue tiedosto, liitä seuraava komentosarjalohko kirjoitetun mallilohkon alle Vuen koostumussovellusliittymä :

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

Yllä oleva komentosarja sisältää kaiken JavaScript-logiikan verkkosovelluksesi vaalean ja tumman tilan vaihtamiseksi. Käsikirjoitus alkaa kirjaimella an tuonti lauseke ref-funktion tuomiseksi reaktiivisten tietojen (dynaamisten tietojen) käsittelemiseksi Vuessa.

Seuraavaksi se määrittelee a getInitialDarkMode toiminto, joka hakee käyttäjän pimeän tilan mieltymykset selaimen Paikallinen varasto. Se julistaa darkMode ref, alustamalla sen getInitialDarkMode-funktiolla haettuilla käyttäjän asetuksilla.

The saveDarkModePreference toiminto päivittää käyttäjän pimeän tilan asetuksen selaimen LocalStoragessa setItem menetelmä. Lopuksi, vaihdaDarkMode -toiminnon avulla käyttäjät voivat vaihtaa pimeää tilaa ja päivittää selaimen LocalStorage-arvon pimeää tilaa varten.

Tumman tilan teeman käyttäminen ja sovelluksen testaus

Nyt sinun mallilohkossasi App.vue tiedosto, lisää data-theme-attribuutin valitsin juurielementtiin soveltaaksesi ehdollisesti pimeän tilan teemaa logiikkasi perusteella:

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

Tässä sidotaan datateeman valitsin darkMode-viitteeseen. Tämä varmistaa, että milloin darkMode on totta, tumma teema tulee voimaan. Painikkeen napsautustapahtuman kuuntelija vaihtaa vaalean ja tumman tilan välillä.

Suorita seuraava komento päätteessäsi esikatsellaksesi sovellusta:

npm run dev

Sinun pitäisi nähdä tällainen näyttö:

Kun napsautat painiketta, sovelluksen pitäisi vaihtaa vaaleiden ja tummien teemojen välillä:

Opi integroimaan muita paketteja Vue-sovelluksiin

CSS-muuttujat ja LocalStorage API helpottavat tumman teeman lisäämistä Vue-sovellukseesi.

On olemassa monia kolmannen osapuolen kirjastoja ja sisäänrakennettuja Vue-lisäominaisuuksia, joiden avulla voit mukauttaa verkkosovelluksiasi ja käyttää lisäominaisuuksia.