CODEWITHSUNDEEP
javascripthtmlcssvue.js
picKit
picKit

Reputation: 453

How to implement multiple assest paths for different themes in VueJS app?

I have a VueJS app. It implements a multiple themes functionality. For that I'm using something like this:

let theme = getTheme() // returns 'light' | dark
document.documentElement.setAttribute('data-theme', theme)

And color styles for the default(light) theme and for the dark theme

:root {
  --primary-color: #6B59CC;
  --primary-color-rgb: #{hexToRGB(#6B59CC)};

  --secondary-green-color: #009a76;
  --secondary-green-color-rgb: #{hexToRGB(#009a76)};

  --secondary-orange-color: #F6933E;
  --secondary-orange-color-rgb: #{hexToRGB(#F6933E)};
  ...
}

[data-theme="dark"] {
  --primary-color: #6B59CC;
  --primary-color-rgb: #{hexToRGB(#6B59CC)};

  --secondary-green-color: #009a76;
  --secondary-green-color-rgb: #{hexToRGB(#009a76)};

  --secondary-orange-color: #F6933E;
  --secondary-orange-color-rgb: #{hexToRGB(#F6933E)};
  ...
}

NOTE: please don't mind that styles are the same for the both light and dark theme. This just an example.

I need to use different icon color for each theme. For example: the light theme's base icon color is #a8a8a8, and for the dark theme's base icon color is #cfcfcf.

How to change icon's color dynamicly? Or there are multiple way to implement this in the world?

P.S. I use SVG icons with object tag. Like this:

<object :data="require('./assets/home.svg')" />

Upvotes: 0

Views: 287

Answers (1)

ma_jafari
ma_jafari

Reputation: 1059

How about defining a variable in data; something like lightTheme and check that to change the theme:

data() {
    return {
        lightTheme: false
    }
},
methods: {
    changeTheme() {
        this.lightTheme = !lightTheme
        let icon = document.getElementById("id")
        if(this.lightTheme) {
            icon.classList.add('light-theme-style')
            icon.classList.remove('dark-theme-style')
        } else {
             icon.classList.add('dark-theme-style')
             icon.classList.remove('light-theme-style')
        }
    }
}

You also need to bind you'r element to changeTheme, If you want you can share you'r template code and i'll add it to the answer.

Upvotes: 1

Related Questions