Тематизация с S CSS и nuxt - PullRequest
Новая
       5

Тематизация с S CSS и nuxt

0 голосов
/ 06 марта 2020

Я пытаюсь разрешить моим пользователям выбирать разные темы, но я не могу заставить их работать. Я пробовал несколько разных способов, один из них - иметь два разных файла, и я импортирую их, основываясь на том, светлая или темная тема, но после импорта она остается на странице. Другой находится в пределах S CSS, например: 

$enable-rounded: true;

[theme="dark"] {
  $blue: #232c3b;
  $body-bg: #262626;
  $body-color: white;
}
[theme="light"]  {
  $body-bg: #ffffff;
  $body-color: #000000;
}

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

, затем в моих макетах / default. vue: 

import(`~/assets/scss/main.scss`)
export default {
data() {
  return {
    darkMode: false,
  }
},
mounted() {
  let bodyElement = document.body;
  bodyElement.classList.add("app-background");
  let htmlElement = document.documentElement;
  let theme = localStorage.getItem("theme");
  if (theme === 'dark') {
      bodyElement.setAttribute('theme', 'dark')
      this.darkMode = true
  } else {
      bodyElement.setAttribute('theme', 'light');
      this.darkMode = false
  }
},
watch: {
    darkMode: function () {
      let htmlElement = document.documentElement;
      if (this.darkMode) {
          localStorage.setItem("theme", 'dark');
          htmlElement.setAttribute('theme', 'dark');
      } else {
          localStorage.setItem("theme", 'light');
          htmlElement.setAttribute('theme', 'light');
      }
    }
  }
}

, однако, когда я делаю это таким образом, ничего не происходит. Я пытался понять это в течение нескольких дней и, похоже, не могу этого понять. Это заставляет меня хотеть просто использовать CSS и избегать S CSS, хотя я действительно хочу использовать s css

1 Ответ

0 голосов
/ 08 марта 2020

Я думаю, что вы импортируете свой файл css неправильно. Пожалуйста, попробуйте импортировать его, как показано ниже, из части скрипта: 

<style lang="scss">
   @import '~/assets/scss/main.scss';
</style>
...