Како додати тамне теме у Вуе апликације помоћу ЦСС променљивих

Имплементација мрачних тема у наше веб апликације је од луксуза постала неопходна. Корисници уређаја сада желе да пређу са светлих тема на тамне и обрнуто због естетских преференција и практичних разлога.

Тамне теме нуде тамнију палету боја за корисничке интерфејсе, чинећи интерфејс лаким за очи у окружењима са слабом осветљеношћу. Тамне теме такође помажу у очувању батерије на уређајима са ОЛЕД или АМОЛЕД екранима.

Ове предности и више чине разумнијим да се корисницима да избор да пређу на тамне теме.

Подешавање апликације за тестирање

Да бисте боље разумели како да додате тамне теме у Вуе, мораћете да креирате једноставну Вуе апликацију да бисте тестирали свој развој.

Да бисте иницијализовали нову Вуе апликацију, покрените следећу команду са свог терминала:

 npm init vue@latest

Ова команда ће инсталирати најновију верзију пакета цреате-вуе, пакета за иницијализацију нових Вуе апликација. Такође ће од вас тражити да изаберете из одређеног скупа функција. Не морате да изаберете ниједну јер то није неопходно за обим овог упутства.

Додајте следећи шаблон у датотеку Апп.вуе у срц директоријуму ваше апликације:

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

Блок кода изнад описује целу апликацију у обичном ХТМЛ-у, без блокова скрипте или стила. Користићете класе у горњем шаблону за потребе стилизовања. Како имплементирате тамну тему, структура апликације ће се променити.

Стилизирање тестне апликације помоћу ЦСС променљивих

ЦСС променљиве или ЦСС прилагођена својства су динамичке вредности које можете да дефинишете у својим стиловима. ЦСС варијабле пружају одличан алат за креирање тема јер вам омогућавају да дефинишете и управљате вредностима као што су боје и величине фонта на једном месту.

Користићете ЦСС променљиве и ЦСС селекторе псеудокласа да бисте додали редовну и мрачну тему за вашу Вуе апликацију. У директоријуму срц/ассетс креирајте датотеку стилес.цсс.

Додајте следеће стилове у ову датотеку стилес.цсс:

 
: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; 
}

Ове декларације садрже посебан селектор псеудо-класе (:роот) и селектор атрибута ([data-theme=’true’]). Стилови које укључите у основни селектор циљају на највиши родитељски елемент. Делује као подразумевани стил за веб страницу.

Бирач теме података циља ХТМЛ елементе са тим атрибутом постављеним на тачно. У овом селектору атрибута можете дефинисати стилове за тему тамног режима да бисте заменили подразумевану светлу тему.

Обе декларације дефинишу ЦСС променљиве користећи — префикс. Они чувају вредности боја које затим можете користити за стилизовање апликације за светле и тамне теме.

Уредите датотеку срц/маин.јс и увезите датотеку стилес.цсс:

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

Сада додајте још стилова у стилес.цсс, испод бирача теме података. Неке од ових дефиниција ће упућивати на променљиве боје користећи кључну реч вар. Ово вам омогућава да промените боје које се користе једноставним променом вредности сваке променљиве, као што то чине почетни стилови.

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

Можете подесити својство прелаза за све елементе користећи универзални ЦСС селектор

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

Да бисте применили режим тамне теме, биће вам потребна ЈаваСцрипт логика за пребацивање између светлих и тамних тема. У вашу Апп.вуе датотеку, налепите следећи блок скрипте испод блока шаблона написаног у Вуе-овом Цомпоситион АПИ-ју:

Горња скрипта укључује сву ЈаваСцрипт логику за пребацивање између светлог и тамног режима у вашој веб апликацији. Скрипта почиње наредбом импорт за увоз функције реф за руковање реактивним подацима (динамичким подацима) у Вуе-у.

Затим дефинише функцију гетИнитиалДаркМоде која преузима корисничку преференцију тамног режима из ЛоцалСтораге претраживача. Декларише даркМоде реф, иницијализујући га корисничким преференцама које преузима функција гетИнитиалДаркМоде.

Функција савеДаркМодеПреференце ажурира корисничке поставке тамног режима у ЛоцалСтораге претраживача помоћу методе сетИтем. Коначно, функција тогглеДаркМоде ће омогућити корисницима да пребаце тамни режим и ажурирају вредност ЛоцалСтораге претраживача за тамни режим.

Примена теме мрачног режима и тестирање апликације

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

Сада, у блок шаблона ваше Апп.вуе датотеке, додајте бирач атрибута дата-тхеме у основни елемент да бисте условно применили тему мрачног режима на основу ваше логике:

Овде повезујете селектор теме података са реф. Ово осигурава да ће тамна тема ступити на снагу када је даркМоде истинит. Слушалац догађаја клика на дугмету се пребацује између светлих и тамних режима.

 npm run dev

Покрените следећу команду у свом терминалу да бисте прегледали апликацију:

Требало би да видите екран попут овога:

Када кликнете на дугме, апликација би требало да прелази између светлих и тамних тема:

Научите да интегришете друге пакете у своје Вуе апликације

ЦСС променљиве и ЛоцалСтораге АПИ олакшавају додавање тамне теме вашој Вуе апликацији.