Struggling to implement light/dark mode?

Hi guys,

does anyone have any experience implementing light and dark mode?

I followed this particular guide but it doesn’t seem to be working? i.e. my switch that I use to trigger the colour change isn’t working.

Is there any easier way to do this with the ‘change theme’ workflow?

@Joyce @flo

Hi @Newtothis :wave:

Yes, it should be easier now with the Change theme workflow action:

1 Like

thank you so much! unsure why I couldn’t find this!

Hi Joyce,

I’m just wondering if you can provide a short video of you recreating the demo you did on here, or potentially share it please?

Hey @Newtothis - all you need to do is:

go it Library > Color and click on “+” - this lets you create a color with a Dark & Light value.

Bind whatever you want to the Library color (you will see the “From Library” button at the bottom of the color picker).

To switch between light and dark mode - just add a button or toggle - add a workflow “on change” > “change theme” - and then bind to formula switch ( browser.theme, “dark”,“light”,“light”,“dark”) - and that’s it.

Hi Mark,

Thank you for the in-depth response that fantastic.

Just a quick question, would I bind the colour section of each element I.e the header using that specific formula?

Yes … you need to bind ANY and ALL elements that you want to have different colors in light vs dark themes. Including text. Basically - you can think of “library colors” as colors that have two modes.

Hi Mark,

I’ve sent you a direct message, if you could have a check when you have a moment that would be great :slight_smile: