In a regular app it would eg toggle style sheets or a collection of key styles.
I added a night mode version within an hour or two on my app recently. It didn’t take long. I just made sure all of my groups were transparent, then made the background dark. Then went to styles and updated the styles with conditionals so when the user chooses dark mode, or by using the plugin, if night mode is detected, it will change the colors.
My members portal also has a night mode already built in. I think it’s nice to have for sure.
Using the styles tab and conditionals would be the easiest way to do this.
Hope that helps! 
For All Your No-Code Education Needs:
- One-on-One Tutoring
- eLearning Hub
- Video Tutorials
- No-Code Classes
1 Like
Thanks! Can you share a couple of screen shots of your 2 modes?
There’s a much easier and simpler way > grab an html element and tank this line of code in situ:
**Word of warning, this will omit everything so see the followup code after. Also be sure to use only transient palettes that are core colors > white for example: #FFF, black for example: #000 and grays/neutrals: #333, 666, 999 etc…
html {
filter: invert(1) hue-rotate(180deg);
}
If you want to cancel out elements then you can revert them back to their original state with this line of follow-up code:
content, bubble-x, video {
filter: invert(1) hue-rotate(180deg)
}
Here is what I have set up. I guess it’s more flexible so I can choose the colors I want. Here you go:
3 Likes
Late entry, but how did you get that really nice tab ‘highlight’ on the left hand menu that sort of opens up into the main body? I’m guessing somehow playing around with border and radius? Doesn’t seem immediately obvious to me, but looks great!
1 Like
Thanks!
Yeah, it is just playing with borders and roundness based on conditions.
The key was to put each element into a group and then round the edges of the tabs above and below the selected one.
It’s sort of difficult to reproduce and modify if I want to add more options. Haha 
But, for me, it was worth it since I want this eLearning Hub to really be a reflection of the quality of work that you can get from my business.
Ahh okay yeah that makes sense - thanks for sharing and the quick reply!
1 Like
No problem!
I used the plugin Dark mode, here is one solution on how to do one 
There are 2 workflows actions
Hey @J805
Can you help me with this. How do you go about setting conditionals on Styles so that when the user chooses dark mode it triggers a colour change?
I’m trying to setup a dark mode but can’t find a way to create a conditional on a style (eg a Group style) that is based on anything other than “this group”
What plugin are you using? I’m using the Dark theme detect Free.
Thanks in advance,
Mike
@brightmike154 I had written this yesterday on creating a light and dark mode. I am using a toggle button to store the theme selection in a custom state and then using conditional statements to change the color. You can check out the preview and editor links.
Hey, thanks for this really interesting tutorial.
That’s actually what I had started to do, though I was hoping there would be a simpler method than creating a conditional state on each individual element.
Some elements already have complex conditional states dictating style already - adding a dark variation will literally double the number of states and I’m assuming increase page size 
Hey @brightmike154 
I haven’t found an easy way to do this yet either. There is a plugin that tries: Dark mode Plugin | Bubble but just a quick test shows a lot of bugs with it.
To make it look good, I set a data type of ‘darkMode = y/n’ on my user so when they refresh the page, the dark mode option stays the same for them. I used to use a plugin that turns it on and off automatically but it was sort of annoying. So I opted in to just put a button on the screen that I could turn the dark mode on and off.
Hope that helps a bit.
As a side note, did you know you can copy and paste the whole condition of an element, not just the expression. Hope that can speed things up a bit if you didn’t already know that. You can even copy all of the conditions on one element to a different element with three clicks. Just right click and copy conditional formatting. Then right click on the other element and click paste conditional formatting.
1 Like
There is a free Darkmode detector that I’m using which automatically detects the users mode (Light or Dark) on pageload. This works well on Apple devices (the only ones I’ve tested it on).
The only downside is if the user changes the setting on their device the page doesn’t change until it is reloaded. So a manual button might still be the way to go.
Think I’ll stick with this for now and see how I get on.
Thanks for the tip with the conditional formatting - should save some time 
1 Like
Hey @brightmike154
I see two possible options for you. Here is a plugin that checks it live: Detect Live System Darkmode Plugin | Bubble
Or you could do a check every ten seconds or something like that. You can use the same plugin. Here is an example for you:
Editor: Test805421 | Bubble Editor
Preview: https://test805421.bubbleapps.io/version-test/darkmode?debug_mode=true
Hope that helps!
1 Like