I have tried to use conditional formatting for implementing a dark mode.
I found a few downsides:
We cannot use Styles in conditions. We need to specify the dark mode colors for every single element.
The user sees the default light color for a second or so, before it changes to dark - every time a page is accessed or refreshed. This creates an annoying flickering effect.
Hence I’m thinking of doing the following instead. But because it’s quite an extensive change, I need opinions on whether this is a good idea or not, before I proceed. e.g. every element now needs to access User data type before it can render - any potential issues with that? Any feedback or comments are appreciated!
I create a new option set Color Mode with 2 options - Light and Dark.
Each option has attributes that contain the hex color codes for background, text, etc. e.g. Page background is set to “#FFFFFF” for Light Mode and “#000000” for Dark Mode.
Each User has a field called Preferred Color Mode that they can set - either Light or Dark.
Finally I’ll set each element’s color according to the attribute in the User’s Preferred Color Mode, e.g. Current User’s Preferred Color Mode’s Page background
The way how I implemented Dark mode is via database field with yes/no field on current user.
You can access style condidtions inside the Style tab:
And as you can see you can access Current User there which allows you to define inside the style itself how the style should look for either Dark or Light mode.
I find this quite optimal because you don’t have to fiddle with conditions on the page elements which could be insane on bigger apps.
Yeah that’s good, hadn’t thought of doing it this way. There are a lot of limits on what you can define on the conditional within styles but for a simple yes/no for dark/light mode this works.
