Developer Dark Mode

💬 Feature Requests
43

+1 , eyes hurt when working at late night

44

I need to stop working on retool projects simply because it's too bright. This is the most important feature please prioritise it over everything else...

Thank you.

45

Thanks for the +1s & feedback! I've passed it along internally as well

1 Like
46

+1

47

+1 :eye_in_speech_bubble: :eye_in_speech_bubble:

48

Here's a solution that doesn't require any third-party extensions, just 7 lines of CSS:

:root:has(#root:target) {
  body {
    filter: invert(1) brightness(90%);
  }
  video, img {
    filter: invert(1);
  }
}

Add this to your Custom CSS setting and then add #root to your URL, whether it's from the editor screen or the user screen.

This technique also allows for a dark mode button - instructions will follow below :wink:

49

Tutorial for Adding a Dark Mode Button

Step 0. If you haven't done so already, ensure that the following CSS is added to your application:

:root:has(#root:target) {
  body {
    filter: invert(1) brightness(90%);
  }
  video, img {
    filter: invert(1);
  }
}

Step 1. Place an icon in your app—most likely in your global header.
Step 2. Use the FX value for your icon, then copy and paste the following:

{{ url.hashParams.root === null ? "/icon:bold/interface-weather-sun" : "/icon:bold/interface-weather-moon" }}

Step 3. Add a Click event handler to the icon and set it to Run Script.
Step 4. Copy and paste the following script:

// first we extract the path from the current URL (without any hashtags)
const newUrl = url.href.split("#")[0];
// since "#root" represents dark mode, we check if it's available, but empty
const isDark = url.hashParams.root === null;
// we open a URL and append the "#root" in the case of light mode
utils.openUrl(`${newUrl}#${isDark ? '' : 'root'}`, { newTab: false, forceReload: false });
// source: https://community.retool.com/t/developer-dark-mode/6935/49#p-158777-tutorial-for-adding-a-dark-mode-button-1

That's it! - You should be able to use icon to toggle between dark/light mode.

:wave: Hope this helps. If you do have any questions, feel free to let me know :slight_smile:

P.s. As some have pointed out, it does introduce a slight dependence on hashtags, and if your app already uses hashtags for certain behavior, then this might affect that. However, if your app doesn't use hashtags, then this could be a good fit.

2 Likes
50

amazing job, friend! this is perfect enough for my old eyes at night!!! thank you

1 Like