0

在我的 vue 项目中，我有两个主题，即暗模式和亮模式。我为颜色代码创建了根变量和暗模式变量，以便可以在它们之间切换。到目前为止一切都很好，但我有一个问题。我无法更改在侧边栏中用作品牌徽标的 .svg 颜色。那么我将如何根据主题更改 svg 呢？

这是我在 Navbar.vue 中的暗模式功能；

  methods: {
    toggleTheme() {
      this.theme = this.theme == 'dark-mode' ? '' : 'dark-mode';
      document.documentElement.setAttribute('data-theme', this.theme);
      localStorage.setItem('theme', this.theme); 
    }
  },
  mounted() {
    let localTheme = localStorage.getItem('theme'); 
    document.documentElement.setAttribute('data-theme', localTheme);
  },
  data(){
    return {
      theme: '',
    }
  },

我将该方法绑定到一个包含暗模式和亮模式的两个图标的跨度，如下所示；

<li class="ml-2 cursor-pointer">
  <span @click="toggleTheme" aria-label="Toggle themes" class="dark-mode" :title="$t('navbar.theme')">
    <span v-if="this.theme == 'dark-mode'" class="icon navbar-icons leading-none">brightness_low</span>
    <span v-else class="icon navbar-icons leading-none">brightness_high</span>     
  </span>
</li>

When the dark mode is selected, the data becomes theme: 'dark-mode', what I want to do is, when the theme is equal to dark-mode, I want to display the white svgin my Sidebar;

  <router-link to="/admin/dashboard">
    <div id="logo" class="logo-normal"></div>
    <div id="logo" class="logo-white"></div>
  </router-link>

如何将主题信息从导航栏发送到侧边栏，以便我可以说v-if="theme == 'dark-mode'或类似的东西？

4

0 回答 0