В этой статье мы будем реализовывать функцию темного / светлого режима в нашем приложении Vue Vite без использования какой-либо библиотеки.
Мы начнем с создания простого приложения Vite, а затем настроим простой пользовательский интерфейс для нашего приложения. Перед созданием нашего приложения Vue я хотел бы упомянуть о некоторых отличных бесплатных шаблонах Vue от WrapPixel, их можно бесплатно загрузить и использовать как в личных, так и в коммерческих целях. Они могут сэкономить массу времени, поскольку вы можете использовать их потрясающие пользовательские интерфейсы непосредственно в своем проекте, что придаст вашему приложению потрясающий внешний вид. Так что проверьте их.
Создание приложения Vuejs Vite
Чтобы настроить приложение Vite, откройте свой терминал и введите следующее:
npm init vite-app themeswitcher
Эта команда создаст новое приложение vite. Нам нужно будет перейти в каталог проекта и установить зависимости проекта:
cd themeswitcher
npm install
После установки теперь мы можем запустить наше приложение с помощью команды npm run dev
:
code . && npm run dev
Команда code .
откроет наше приложение в VS Code.
Наше приложение теперь будет работать на порту 3000.
Теперь, когда наше приложение запущено и работает, мы можем создать наш ассет css. Создайте файл css/dark.css
в каталоге public
. Здесь мы будем хранить весь код CSS для нашей среды темного режима.
Добавьте следующие коды в файл dark.css:
:root {
--text: #ffffff;
--background: #1d1d23;
}
body {
background-color: var(--background) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
a {
color: var(--text) !important;
}
Теперь нам нужно создать метод, который теперь будет создавать тег ссылки внутри нашей html-заголовка, который установит его в файл dark.css
, который мы создали, чтобы можно было применить все стили, которые мы там определили.
Для этого мы будем использовать классы Javascript. Создайте файл src/theme.js
внутри каталога src и добавьте следующие коды:
export default class themeChanger {
/**
* @constructor
*/
constructor() {}
_addDarkTheme() {
const darkThemeLinkEl = document.createElement('link')
darkThemeLinkEl.setAttribute('rel', 'stylesheet')
darkThemeLinkEl.setAttribute('href', './css/dark.css')
darkThemeLinkEl.setAttribute('id', 'dark-theme-style')
const docHead = document.querySelector('head')
docHead.append(darkThemeLinkEl)
}
_removeDarkTheme() {
const darkThemeLinkEl = document.querySelector('#dark-theme-style')
const parentNode = darkThemeLinkEl.parentNode
parentNode.removeChild(darkThemeLinkEl)
}
_darkThemeSwitch() {
const darkThemeLinkEl = document.querySelector('#dark-theme-style')
if (!darkThemeLinkEl) {
this._addDarkTheme()
} else {
this._removeDarkTheme()
}
}
}
Создаем 3 метода:
_addDarkTheme()
: это добавит тег ссылки в HTML-заголовок нашего приложения._removeDarkTheme()
: Это удалит ссылку, которая была добавлена в заголовок HTML._darkThemeSwitch()
: это переключит методы добавления и удаления для добавления и удаления тега ссылки в нашей HTML-заголовке.
Мы можем продолжить и использовать эти методы в нашем компоненте Vuejs.
Измените коды в components/HelloWorld.vue
на это:
<template>
<h3>Vite is the future of Frontend Developement.</h3>
<small>Thanks to Evan You</small>
<br />
<button @click="darkThemeSwitch">switch</button>
</template>
<script>
import themeChanger from "../util/theme.js";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
themeChanger: null,
};
},
methods: {
darkThemeSwitch() {
this.themeChanger._darkThemeSwitch();
},
},
created() {
this.themeChanger = new themeChanger();
},
};
</script>
Мы вводим экземпляр нашего класса themeChanger
, а затем сохраняем его как экземпляр данных Vuejs. Затем мы создаем кнопку, которая будет вызывать _darkThemeSwitch
, который мы создали в файле theme.js
.
После этого мы можем переключаться между светлым и темным режимами в нашем приложении.
Вы также можете проверить нашу статью о том, как создать корзину покупок в Vue Vite.