Vue - How to change svg color based on Dark Mode or Light Mode

Question

In my vue project I have two themes which are Dark and Light mode. I created root variables and dark mode variables for color codes so I can switch between them. Everything so far is okay but I have a question. I am not able to change the .svg color that I use in my sidebar as a brand logo. So how am I going to change the svg based on the theme?

Here is my dark-mode function in my 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: '',
    }
  },

And I bind the method to a span that contains two icons for dark and light mode as follows;

<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 svg in my Sidebar;

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

How do I send the information of theme from the Navbar to the Sidebar so I can say v-if="theme == 'dark-mode' or something like that?

What relation are the navbar and sidebar to each other? Do they share a parent? — Daniel_Knights, Mar 29 '21 at 08:37
Do you know about emitting events in Vue? You can emit the value to `Admin` and bind it to a prop for `Sidebar`. You could also just read the value from `localStorage` — Daniel_Knights, Mar 29 '21 at 11:56
Reading from localStorage makes sense but how do I say "Display if local storage theme = dark-mode" in vue template? — Yasin Demirkaya, Mar 30 '21 at 11:21
Set it to a data property: `this.theme = localStorage.getItem('theme');` — Daniel_Knights, Mar 30 '21 at 15:45
Honestly, I'd recommend emitting the value to Admin and passing it as a prop. It's better practice, but, not that important really. To get it from local storage just add that line in `created` or `mounted` and add a `data` property called `theme` — Daniel_Knights, Mar 31 '21 at 08:37

Vue - How to change svg color based on Dark Mode or Light Mode

0 Answers0