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

Question

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')" />

How can a user change the theme? by clicking a button or something? — ma_jafari
– ma_jafari, Commented Sep 20, 2020 at 19:22
yes, by clicking a button. then the data-theme will be changed. — picKit
– picKit, Commented Sep 21, 2020 at 20:05

ma_jafari · Accepted Answer · 2020-09-22 04:34:06Z

1

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.

answered Sep 22, 2020 at 4:34

ma_jafari

1,0691 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related