Як додати темні теми в програми Vue за допомогою змінних CSS

Впровадження темних тем у наші веб-програми перетворилося з розкоші в необхідність. Тепер користувачі пристроїв хочуть переходити від світлих тем до темних і навпаки через естетичні уподобання та практичні міркування.

Темні теми пропонують темнішу колірну палітру для інтерфейсу користувача, що робить інтерфейс зручним для очей в умовах слабкого освітлення. Темні теми також допомагають економити заряд акумулятора на пристроях з екранами OLED або AMOLED.

Ці та інші переваги роблять більш доцільним надавати користувачам вибір переходу на темні теми.

Налаштування тестової програми

Щоб краще зрозуміти, як додавати темні теми у Vue, вам потрібно буде створити просту програму Vue для тестового запуску вашої розробки.

Щоб ініціалізувати нову програму Vue, виконайте таку команду з терміналу:

 npm init vue@latest

Ця команда встановить останню версію пакета create-vue, пакета для ініціалізації нових програм Vue. Він також попросить вас вибрати з певного набору функцій. Вам не потрібно вибирати жодного, оскільки це не є необхідним для обсягу цього підручника.

Додайте такий шаблон до файлу App.vue у каталозі src вашої програми:

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

Наведений вище блок коду описує всю програму у звичайному HTML без блоків сценарію чи стилю. Ви будете використовувати класи в наведеному вище шаблоні для стилізації. Коли ви реалізуєте темну тему, структура програми зміниться.

Стилізуйте тестову програму за допомогою змінних CSS

Змінні CSS або власні властивості CSS — це динамічні значення, які можна визначити у своїх таблицях стилів. Змінні CSS забезпечують чудові інструменти для створення тем, оскільки вони дозволяють визначати та керувати такими значеннями, як кольори та розміри шрифту, в одному місці.

Ви будете використовувати змінні CSS і селектори псевдокласів CSS, щоб додати тему звичайного та темного режиму до програми Vue. У каталозі src/assets створіть файл styles.css.

Додайте такі стилі до цього файлу styles.css:

 
:root {
  --background-color: #ffffff; 
  --text-color: #333333; 
  --box-background: #007bff; 
  --box-text-color: #ffffff; 
  --toggle-button: #007bff; 
}
  
[data-theme="true"] {
  --background-color: #333333; 
  --text-color: #ffffff; 
  --box-background: #000000; 
  --box-text-color: #ffffff; 
  --toggle-button: #000000; 
}

Ці оголошення містять спеціальний селектор псевдокласу (:root) і селектор атрибутів ([data-theme=’true’]). Стилі, які ви включаєте в кореневий селектор, націлені на найвищий батьківський елемент. Він діє як стиль за замовчуванням для веб-сторінки.

Селектор теми даних націлює HTML-елементи з атрибутом true. У цьому селекторі атрибутів ви можете визначити стилі для теми темного режиму, щоб замінити стандартну світлу тему.

Обидва ці оголошення визначають змінні CSS за допомогою префікса —. Вони зберігають значення кольорів, які потім можна використовувати для стилізації програми для світлих і темних тем.

Відредагуйте файл src/main.js та імпортуйте файл styles.css:

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

Тепер додайте ще кілька стилів у styles.css під селектором теми даних. Деякі з цих визначень посилатимуться на змінні кольору за допомогою ключового слова var. Це дозволяє змінювати використовувані кольори, просто змінюючи значення кожної змінної, як це роблять початкові стилі.

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

 * {
  
  transition: background-color 0.3s, color 0.3s;
}

щоб створити плавну анімацію під час перемикання режимів:

Ці переходи створюють поступову зміну кольору фону та кольору тексту, коли перемикається темний режим, створюючи приємний ефект.

Реалізація логіки темного режиму

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

Щоб реалізувати режим темної теми, вам знадобиться логіка JavaScript для перемикання між світлою та темною темами. У вашому файлі App.vue вставте наступний блок сценарію під блоком шаблону, написаним у Vue Composition API:

Наведений вище сценарій включає всю логіку JavaScript для перемикання між світлим і темним режимами у вашій веб-програмі. Сценарій починається з оператора import для імпорту функції ref для обробки реактивних даних (динамічних даних) у Vue.

Потім він визначає функцію getInitialDarkMode, яка отримує налаштування темного режиму користувача з LocalStorage браузера. Він оголошує посилання darkMode, ініціалізуючи його уподобаннями користувача, отриманими функцією getInitialDarkMode.

Функція saveDarkModePreference оновлює налаштування темного режиму користувача в LocalStorage браузера за допомогою методу setItem. Нарешті, функція toggleDarkMode дозволить користувачам перемикати темний режим і оновлювати значення LocalStorage браузера для темного режиму.

Застосування теми темного режиму та тестування програми

 
<template>
  
       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>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>
 

Тепер у блоці шаблону вашого файлу App.vue додайте селектор атрибута теми даних до кореневого елемента, щоб умовно застосувати тему темного режиму на основі вашої логіки:

Тут ви прив’язуєте селектор теми даних до посилання darkMode. Це гарантує, що коли darkMode має значення true, темна тема почне діяти. Прослуховувач подій клацання на кнопці перемикає світлий і темний режими.

 npm run dev

Виконайте таку команду в терміналі, щоб переглянути програму:

Ви повинні побачити такий екран:

Коли ви натискаєте кнопку, програма має перемикатися між світлою та темною темами:

Навчіться інтегрувати інші пакети у ваші програми Vue

Змінні CSS і API LocalStorage дозволяють легко додати темну тему до вашої програми Vue.