Узнайте о переменных CSS и API LocalStorage с помощью этого практического проекта Vue.
Реализация темных тем в наших веб-приложениях превратилась из роскоши в необходимость. Пользователи устройств теперь хотят переключаться со светлых тем на темные и наоборот как по эстетическим предпочтениям, так и по практическим соображениям.
Темные темы предлагают более темную цветовую палитру для пользовательских интерфейсов, что делает интерфейс приятным для глаз в условиях низкой освещенности. Темные темы также помогают продлить срок службы батареи на устройствах с экранами OLED или AMOLED.
Эти и другие преимущества делают более разумным предоставить пользователям возможность переключиться на темные темы.
Настройка тестового приложения
Чтобы лучше понять, как добавлять темные темы в Vue, вам нужно будет создать простое приложение Vue для тестирования вашей разработки.
Чтобы инициализировать новое приложение Vue, выполните следующую команду на своем терминале:
npm init vue@latest
Эта команда установит последнюю версию
создать-vue package — пакет для инициализации новых приложений Vue. Он также попросит вас выбрать из определенного набора функций. Вам не нужно ничего выбирать, поскольку это не требуется для целей данного руководства.Добавьте следующий шаблон в App.vue файл в вашем приложении источник каталог:
<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. в источник/активы каталог, создайте стили.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 */
}
Эти объявления содержат специальный селектор псевдокласса (:корень) и селектор атрибутов ([данные-тема = 'истина']). Стили, которые вы включаете в корневой селектор, нацелены на самый верхний родительский элемент. Он действует как стиль по умолчанию для веб-страницы.
Селектор темы данных нацелен на элементы HTML, у которых для этого атрибута установлено значение true. В этом селекторе атрибутов вы можете затем определить стили для темы темного режима, чтобы переопределить светлую тему по умолчанию.
Оба этих объявления определяют переменные CSS, используя -- префикс. В них хранятся значения цвета, которые затем можно использовать для стилизации приложения для светлых и темных тем.
Отредактируйте источник/main.js файл и импортируйте файлstyles.css:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Теперь добавьте еще несколько стилей в стили.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 для переключения между светлым и темным режимами вашего веб-приложения. Сценарий начинается с Импортировать оператор для импорта функции ref для обработки реактивных данных (динамических данных) в Vue.
Далее он определяет getInitialDarkMode функция, которая извлекает предпочтения темного режима пользователя из браузера Локальное хранилище. Он объявляет темный режим ref, инициализируя его предпочтениями пользователя, полученными функцией getInitialDarkMode.
сохранитьDarkModePreference функция обновляет настройки темного режима пользователя в 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 и API LocalStorage позволяют легко добавить темную тему в ваше приложение Vue.
Существует множество сторонних библиотек и встроенных дополнений Vue, которые позволяют настраивать веб-приложения и использовать дополнительные функции.