Skip to Main Content
Builder.io Ideas
Categories Visual Editor
Created by Ersin
Created on Sep 12, 2022

Add dark mode/first-class themes for content

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 window.matchMedia('(prefers-color-scheme: dark)').

  • 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 theme.

  • 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.

  • Attach files