Issue
I have a Vue application (a all-encompassing element with with several child components) to which I would like to add a night mode. I would like this night mode to be managed centrally, where the relevant styling would be applied to the elements which need to switch to night/day mode.
If I have an element (it is in the DOM as part of a component having been rendered, so not directly available to the parent component and therefore not bindable via v-bind
)
<div class="night-day">hello</div>
and two classes
.night {
background-color: black;
color: red
}
.day {
background-color: white;
color: black
}
is it possible to have night-day
pointing to either day
or night
(depending on some condition)?
Solution
You can consider the use of CSS variables that you change within your JS code (setinterval). Basically you will have something like this:
<div class="night-day">hello</div>
.night-day {
background-color: var(--bc,black);
color: var(--c,red)
}
And within your JS you will have something like this:
var bc= ["black", "white"]
var c= ["red", "black"]
....
document.querySelector('.night-day').style.setProperty("--bc", bc[i]);
document.querySelector('.night-day').style.setProperty("--c", c[i]);
...
Where i
is an index that you can change based on your conditions:
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.