Builder has implemented the ability to switch between light/dark mode within the editor--awesome!
What if we also had the ability to switch between light/dark mode for our content while editing it? So that we can test out different themes in our content. Could work like:
Set some kind of global state, like
state.builder.theme (or maybe in
context or some other globally available variable). Perhaps make it opt-in or make it so that the user can change the name of the property to avoid conflicts.
theme will be populated from the browser settings, something like
At a minimum, change docs to instruct users how to take advantage of
theme using conditional data bindings to set colors. A more integrated approach would involve changing the style tab UI to allow for changing settings based on the value of
Add a UI button for switching content between light/dark (i.e., toggling the value of
theme between light/dark).
An even better approach might be to generalize the value of
theme so that the user can set it to anything using the UI.
Maybe the cheapest solution would be to just have the UI for adding any custom theme value to the account, then populating a drop down in the Visual Editor for selecting that value, which would set
state.builder.theme or something similar. Then leave it up to the user how they want to consume that value with a bit of documentation about it, for example, docs on how to populate theme from window.matchMedia using custom JS (although that would be annoying to have to repeat across every content item). You could make it fancier if there's uptake.