[how-to] Apply quick Dark mode to your app with Custom CSS

[Kenny]

You can apply a Dark-mode to your app using custom CSS. To do this, within your app go to > Settings > CSS> apply body {filter:invert(1)}

Before:

After:

[bradlymathews]

Interesting effect happens to me when I do this. See images below.

First one is a normal Text Input. The second is using the Dark Mode Theme. The last one uses filter:invert(1).

Not sure if this is a Windows only problem as your example, while not as crisp as the original text, is not as bad as I am getting, Retoolers seem to prefer Macs.

[ScottR]

Yes, this works when in Edit mode as well - the entire Retool panel inverts, but yep fonts are a little fuzzy - on a Mac for me as well

[nickaus]

Hi all,

I read this post and was thinking: Can I make this a toggle-able thing for the user?

I found a pretty basic solution (step 2 with the help of GPT). I did the following:

1. Added a Number input component and set it to hidden (called inverter)
2. Added a Switch Component, and assigned a basic JS script to it, which triggers on-toggle:

inverter.setValue(darkModeSwitch.value ? 1 : 0);

3. Changed the App's Settings>Custom CSS to:

body {filter:invert({{ inverter.value }})

I know its not super-elegant, but it works. And its really more just for a bit of fun really.

Re the above comments, everything except for our logo looks fine in dark mode. Our org almost exclusively use Mac's for various reasons so the blurring mentioned is not an issue.

Here are some screenshots if you're interested (note the inverter component is hidden above the switch):

Light/Dark Screenshots and toggle

Light Mode:

Dark Mode:

Maybe someone will find this helpful, or have good suggestion for bypassing the need for the hidden number component?

Regards,
Nick

[Little_Big_Apple]

@nickaus

invert({{ inverter.value }})

This was a great tip @nickaus. Thank you.

As a follow up, one could always restrict the filtering to just the "ContentWrapper" of the App to avoid changing the "Edit UI" of Retool, and messing up with the "inverted images" on an eventual avatar in the header.

[bradlymathews]

Interesting Idea. However, I would rather have the entire Dev environment in dark mode, but leave the app UX it's real colors.

After some head banging and finally some ChatGPT I came up with this:

body {
    filter: invert(1);
}

body .EditorPageLayout__quickPreviewWrapper {
    filter: invert(1);
}

That inverts the entire page, then inverts the EditorPageLayout__quickPreviewWrapper div which re-inverts (un-inverts?) the App canvas:

One caveat (@jessicasun): It does not work in Full Screen IDE mode. It seems as if the Custom CSS is only applied when the Canvas is visible so even the original body {filter:invert(1)} does not work in Full Screen mode.

[Tess]

Thanks for the call out, @bradlymathews! Will share this internally

[Tess]

@bradlymathews are you still seeing the issue in full screen mode? I'm not able to reproduce it anymore!

[bradlymathews]

@Tess

The class name changed to EditorPageLayout and once I figured that out, then yes, it works in both modes.

I also realize I could have just added a second rule for the class the full screen mode used for the canvas.

[bobthebear]

@bradlymathews

body {
    filter: invert(1);
}

body .EditorPageLayout__quickPreviewWrapper {
    filter: invert(1);
}

just thought I'd mention the class name seems to have changed again?

body {
  filter: invert(1);
}

body .editor-canvas-container {
  filter: invert(1);
}

[Derek]

I see that most people are just inverting the colors for Dark Mode, but has anyone used this workaround to switch between two custom-made themes? We have two custom defined themes for a branded light and dark mode. So I wouldn't need to invert the colors, but rather switch between the two options for themes.