Anyone have a clever way to handle Dark/Light mode dynamically synced with user’s system?
I’m currently doing it through an Option Set that has 20+ color values that are the core part of the design system, and each element is using “Current User’s X value” which is referencing the correct parameter inside of the option set. The dynamic change is then happening via the Dark Mode Pro plugin that does a check on page load and then sets the user’s theme.
The problem with this is the very tedious manual work of having to define the bg, border lines, shadows by programming the Current Users expression into every single place in the properties editor. And for comparison purpose, in our NextJS project, this is as quick as importing the ThemeProvider component and then wrapping the whole app with it. Then the Globals CSS file contains the HSL/HEX values, etc.
So while it’s cool to have the new styles in Bubble, there is still no way to quickly setup a non-static theme system.
That is nearly perfect. Could you share the CSS that you have in that screenshot perhaps? And so if I understand it correctly, we set the colors in the style variables and then only add the dark mode colors to the CSS as you describe in the post?
By the way, been following you for awhile. Have your Stripe plugin, etc.
Yes exactly. Keep in mind that the custom Bubble Style Variables have a random name and you can find them like this: x.com
This is the HTML I use to override the CSS variables:
<style>
html {
/*Primary text color*/
--color_text_default: rgb(255 255 255) !important;
--color_text_default_rgb: 255, 255, 255 !important;
/*Secondary text color (this is a custom one form my app hence the random name)*/
--color_bTHAI_default: rgb(203 214 221) !important;
--color_bTHAI_default_rgb: 203,205,221 !important;
/* etc. etc. */
}
</style>
This is really neat. Feels like an easy way to allow user defined primary colours for example - just add CSS with dynamic HEX from the user’s chosen colour. Thanks for that.
