Solara•7mo ago

Theme

I have a Solara application which when run on my machine looks fine, it runs in light mode and as a green primary colour (for context my Mac is in dark mode, IDK if this useful info). it is also worth noting that i do not do anything with the theme anywhere in my Solara application except from the theme.js file below. However, when I run the same Solara application on a different machine the website is in dark mode, dispite to my knolage not being put in dark mode.
Is there a way I can force the theme to be light for my Solara application? theme.js:

vuetifyThemes = {
    light: {
        primary: '#00842B',  // "Algae Green" see brand guidelines
    }
}

vuetifyThemes = {
    light: {
        primary: '#00842B',  // "Algae Green" see brand guidelines
    }
}

4 Replies

iisakkirotko•7mo ago

Hey @Harry! So you aren't using solara.lab.ThemeToggle anywhere in your application either? On the second machine, if you open developer tools, go to Application > Local storage, is there an entry under the domain for :solara:theme.variant? On the second machine, is the solara application running on http://localhost:8765, and do you run any other solara applications on the same machine?

HarryOP•7mo ago

Hi @cr33pyguy No I'm not using

solara.lab.ThemeToggle

solara.lab.ThemeToggle

anywhere in my application. In the developer tools, on the machine where it is dark the

solara:theme.variant

solara:theme.variant

is set to 'auto'. I was running another Solara app on the same machine but I have killed that and the issue persists Hope that is helpful Thanks for getting back!

iisakkirotko•7mo ago

Thanks for getting back so quick @Harry. If you run a different app on the same domain or port on localhost, and that uses solara's theming features it most likely stores :solara:theme.variant = "auto" in your local storage. Since local storage is scoped per domain, this theme preference gets applied to any other solara apps you run. As a workaround, you could override / clear the local storage variable using javascript in your first app We'll try and think of a better solution to theme control in the long term. It's a surprisingly tricky problem :)

HarryOP•7mo ago

I can appreciate, this has fixed it. Just to summarise for when / if you need this info in the future: - I had my prod application running on port 8765. It did NOT have any theme toggles accept from the theme.js above and the prod was in light mode (I assume by default given i had not changed that anywhere) - I then had my dev application run on port 9093 for testing (before I pulled it into prod) and this also had no theme toggle or alterations other than the theme.js above but this was in dark mode (why I don’t understand) - When I looked at the :solara:theme.variant it was set to auto. - I then shut down prod and restarted dev and the issue persisted - Then when I shut down the dev and prod, reset caches etc in chrome and relaunched dev it was fixed and my app was in light mode. (NB: I then restarted prod and ran that alongside dev and they were both working and in light mode) Hope this is helpful, thank you for yor help!

Gaming

Programming

Theme