Best way to implement a "night mode"?

Hello,

I’d like to implement a “night mode” or “dark mode” for my site, meaning I’d like users to be able to switch the background to a darker color and have all the text change to a lighter contrast. I’ve found that if I just set the global variable “$v-background-color” to a darker color in my theme scss file, all of the other colors (text, buttons, etc) conveniently seem to adjust automatically to match the color I choose. So ideally, I’d like to just have a switch or checkbox in my app that says “Night Mode”, and when the user clicks it, the “$v-background-color” is changed to the darker color (and perhaps the theme is reloaded), and back to the lighter color with the switch is flipped again. Is it possible to change theme global variables like that at runtime? Is there a better way to do this?

Thanks!

Edit: I’m using Vaadin 8, Valo theme.

Hi,

I’d recommend creating a new “night mode” theme and switching between themes with UI.setTheme().

Regards,

Olli

Thanks Olli. Unfortunately I have a lot of images that I’m using as ThemeResources… I suppose I could store the images elsewhere, but alternatively is there a way to just change to a different .scss file, or maybe have the other theme somehow reference the files instead of duplicating everything? Or is there some way to change global theme variables?

I haven’t tested it out, but
this old thread
leads me to believe that changing scss variables doesn’t work live - you’d need to compile the theme again when the variable is changed. One thing that could work is that you create a “master” theme, which imports Valo, with most of your images and other things. Then have a “light” and a “dark” theme, both of which import your master theme, and each just specifies the background color variable.

-Olli

@will buck, you very well load images from the same source for different themes. I have 10 themes loading images from a catalogue parallell with the themes-catalogue by referencing them with url(“…/basetheme/images/imagename.jpg”);

I also have a _basetheme.scss with all default css-rules and then specific styles.scss in each theme-catalogue importing this _basetheme.scss. That way I can switch only the valo-variables within the themes without changing anything else. Exactly what you want if I understand you correctly.

Thanks everyone! I got it to work beautifully.