Научете повече за CSS променливите и LocalStorage API с този практичен Vue проект.
Внедряването на тъмни теми в нашите уеб приложения се превърна от лукс в необходимост. Потребителите на устройства сега искат да преминат от светли теми към тъмни теми и обратно поради естетически предпочитания и практически причини.
Тъмните теми предлагат по-тъмна цветова палитра за потребителските интерфейси, което прави интерфейса лесен за очите в среда с ниска осветеност. Тъмните теми също помагат за запазване на живота на батерията на устройства с OLED или AMOLED екрани.
Тези предимства и други правят по-разумно да се даде на потребителите избор да преминат към тъмни теми.
Настройване на тестовото приложение
За да разберете по-добре как да добавяте тъмни теми във Vue, ще трябва да създадете просто приложение Vue, за да изпробвате вашата разработка.
За да инициализирате новото приложение Vue, изпълнете следната команда от вашия терминал:
npm init vue@latest
Тази команда ще инсталира най-новата версия на create-vue
пакет, пакетът за инициализиране на нови приложения на Vue. Той също така ще ви помоли да изберете от определен набор от функции. Не е необходимо да избирате нито един, тъй като не е необходим за обхвата на този урок.Добавете следния шаблон към App.vue файл във вашето приложение src директория:
<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>
Кодовият блок по-горе описва цялото приложение в обикновен HTML, без скриптови или стилови блокове. Ще използвате класовете в горния шаблон за целите на стилизирането. Докато прилагате тъмната тема, структурата на приложението ще се промени.
Оформяне на тестовото приложение с CSS променливи
CSS променливи или CSS персонализирани свойства, са динамични стойности, които можете да дефинирате във вашите листове със стилове. CSS променливите осигуряват отличен инструментариум за тематизиране, защото ви позволяват да дефинирате и управлявате стойности като цветове и размери на шрифта на едно място.
Ще използвате CSS променливи и CSS псевдо-клас селектори, за да добавите обикновена и тъмен режим на тема за вашето приложение Vue. В src/активи директория, създайте a styles.css файл.
Добавете следните стилове към този файл styles.css:
/* 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 */
}
Тези декларации съдържат специален селектор на псевдокласове (: корен) и селектор на атрибут ([data-theme='true']). Стиловете, които включвате в коренния селектор, са насочени към най-високия родителски елемент. Той действа като стил по подразбиране за уеб страницата.
Селекторът на тема за данни е насочен към HTML елементи с този атрибут, зададен на true. В този селектор на атрибути можете след това да дефинирате стилове за темата на тъмен режим, за да замените светлата тема по подразбиране.
Тези декларации дефинират CSS променливи, използвайки -- префикс. Те съхраняват цветови стойности, които след това можете да използвате, за да стилизирате приложението за светли и тъмни теми.
Редактирайте src/main.js файл и импортирайте файла styles.css:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Сега добавете още стилове styles.css, под данни-тема селектор. Някои от тези дефиниции ще се позовават на цветните променливи, използвайки вар ключова дума. Това ви позволява да променяте използваните цветове просто чрез превключване на стойността на всяка променлива, както правят първоначалните стилове.
* {
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;
}
Можете да зададете свойство за преход на всички елементи, като използвате универсалния CSS селектор (*), за да създадете плавна анимация при превключване на режимите:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Тези преходи създават постепенна промяна в цвета на фона и цвета на текста при превключване на тъмен режим, което дава приятен ефект.
Внедряване на логиката на тъмния режим
За да приложите режима на тъмна тема, ще ви трябва JavaScript логика за превключване между светли и тъмни теми. Във вашия App.vue файл, поставете следния блок скрипт под блока шаблон, записан в API за съставяне на Vue :
<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>
Скриптът по-горе включва цялата JavaScript логика за превключване между светъл и тъмен режим във вашето уеб приложение. Сценарият започва с an импортиране израз за импортиране на функцията ref за обработка на реактивни данни (динамични данни) във Vue.
След това определя a getInitialDarkMode функция, която извлича предпочитанията за тъмен режим на потребителя от на браузъра LocalStorage. То декларира, darkMode ref, инициализирайки го с предпочитанията на потребителя, извлечени от функцията getInitialDarkMode.
The saveDarkModePreference актуализира предпочитанията за тъмен режим на потребителя в LocalStorage на браузъра с setItem метод. И накрая, на toggleDarkMode функцията ще позволи на потребителите да превключват тъмния режим и да актуализират стойността на LocalStorage на браузъра за тъмния режим.
Прилагане на темата за тъмен режим и тестване на приложението
Сега в шаблонния блок на вашия App.vue файл, добавете селектора на атрибута за тема на данни към основния елемент, за да приложите условно темата на тъмен режим въз основа на вашата логика:
<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>
Тук обвързвате селектора за тема на данни към реф. Това гарантира, че когато darkMode е вярно, тъмната тема ще влезе в сила. Прослушвателят на събития при щракване върху бутона превключва между светъл и тъмен режим.
Изпълнете следната команда във вашия терминал, за да визуализирате приложението:
npm run dev
Трябва да видите екран като този:
Когато щракнете върху бутона, приложението трябва да превключва между светли и тъмни теми:
Научете се да интегрирате други пакети във вашите Vue приложения
CSS променливите и LocalStorage API улесняват добавянето на тъмна тема към вашето приложение Vue.
Има много библиотеки на трети страни и вградени екстри на Vue, които ви позволяват да персонализирате вашите уеб приложения и да използвате допълнителни функции.
