Created a "Dark Mode" on one of our Applications

Been working on figuring out all the stylizing in retool for some internal apps, and we decided to build a dark mode (using css in two separate text elements, and a toggle which hides dark vs normal). Has anybody else done something similar?

Here's a screenshot:

8 Likes

Nice @ibgoldbergs! Thanks for sharing, this is really awesome. We’ve tried using the Chrome reader dark mode in the past (Dark Mode), but this looks even better.

Here's a video that demonstrates how quick it runs too :slight_smile:

https://www.loom.com/share/b1780cbf2da74b27b9e0d7894091dbce

2 Likes

:eyes::flushed: whoa -- looking good!

2 Likes

That’s awesome!

2 Likes

Wow this is so cool! Would you be willing to share the CSS? I know there are a bunch of other Retool users that would love to try this out on their apps!

Absolutely @jamie - Here is a fiddle of the CSS we used for dark mode. Note that I stripped out my custom button, container, and text element names, so any users feel free to use your own.

https://jsfiddle.net/oLztpkv7/

Once you’ve created a text element for this, you’ll want to duplicate and change all the HEX codes for your light mode.

Finally; create a toggle button on your page, and upon TRUE hide light mode. FALSE enable dark mode.

2 Likes

This is awesome, thanks @ibgoldbergs! Sending this to a few folks now and I’m going to try it on some of my own apps!

1 Like