Hola ,
I’m working on a design system for Phoenix apps, and would like to build a theming option such that a user using a website can change the theme and it gets automatically applied without having to reload the page.
I was thinking about using a LiveView socket connection for that and use an approach similar to the one that LiveView uses to change the title of a page, but instead of changing the title, update a tag that sets some CSS variables based on the selected theme.
Is this something that I could implement with the existing LiveViewa capabilities and APIs? Is there a different approach that I should consider? Any guidance is appreciated.
IMO using this option from server-side makes little sense in 99% of cases, the only case would be if you want to store the user theme in a database.
The default approach that is encouraged is to store the selected theme in local preferences. If you are using tailwind, here is an example. You can basically run this kind of script every time app.js is loaded.
This was indeed the case I was aiming to solve, even if it accounts for a very small portion of all the projects out there. I’ll look into leveraging the socket connection, and some client-side code to add/remove elements myself similar to what Tailwind suggests doing based on a client-side setting.
,
