Рубрики
Без рубрики

Темный режим с использованием переменных CSS – Vue JS

Темный режим! Темный режим! Темный режим! Все хочет этого! Вот почему вы здесь, и я помогу тебе Achi … Помечено CSS, Vue, JavaScript, WebDev.

Темный режим! Темный режим! Темный режим! Все хочет этого! Вот почему вы здесь, и я помогу вам добиться его в Vue JS. Поехали!

Во-первых, мы настроили Пользовательские переменные в CSS. Переменные также доступны в Сасс и Меньше в немного другом формате.

Переменные для темы по умолчанию должны быть размещены под : root , в то время как переменные для темного режима могут быть размещены под атрибутом тема данных. Убедитесь, что тема данных установлена на «DarkMode», как показано ниже

/* main.css */
:root {
    /* Variables for default theme (light-mode) */
    --background-color: white;
    --text-color: black;  
}

[data-theme="darkMode"] {
    /* Variables for dark mode */
    --background-color: black;
    --text-color: white;   
}

Мы можем использовать var () Функция Чтобы вставить значение переменных, которые мы только что создали в наших CSS. Посмотрите на пример ниже.

/* main.css */

.example {
    background-color: var(--background-color);
    color: var(--text-color);
}

Эти переменные помогают нам с легкостью переключаться между стилями.

💡 Вы хотели бы, чтобы пользователи могли бы переключать темы в любом месте на вашем сайте, поэтому рекомендую добавить тему Toggle элемент на ваш заголовок.

Чтобы переключаться между двумя темами, давайте добавим функцию под названием Переключить тему который будет вызван кнопка Отказ

//in header.vue

 


data() {
    return {
        theme: '' //When this property is empty, the theme is set to the default theme i.e. light mode.
    };
},

toggleTheme() {
            this.theme = this.theme == 'darkMode' ? '' : 'darkMode'; //toggles theme value
            document.documentElement.setAttribute('data-theme', this.theme); // sets the data-theme attribute
            localStorage.setItem('theme', this.theme); // stores theme value on local storage
}

Теперь мы можем переключить Dark Mode, нажав на Кнопка Toggle темы .

Нам также необходимо установить тему, когда страница загружает. Мы делаем это в vue js внутри Установленный цикл жизненного цикла Отказ

//in header.vue

mounted() {
        let localTheme = localStorage.getItem('theme'); //gets stored theme value if any
        document.documentElement.setAttribute('data-theme', localTheme); // updates the data-theme attribute
},

Теперь мы можем переключить содержание кнопка Элемент на основе активной темы с использованием Условный рендеринг Vue как показано ниже.

//in header.vue

 

Вот целостный взгляд на предыдущие фрагменты кода, работающих вместе.

//in header.vue

 

Оригинал: “https://dev.to/lindaojo/dark-mode-using-css-variables-vue-js-37il”