В этой статье мы будем реализовывать функцию темного / светлого режима в нашем приложении 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.