Light and Dark Theme Detection Tip

Community Show & Tell
1

CSS can now detect your OS theme (light and dark) at least in Windows with Chrome.
The code below belongs in your App -> Settings & Styles -> CSS
Here is some CSS to get you started:

/* 1. Create global variables for text and background color */
:root {
  --color-text: black;
  --color-background: white;
  --text-weight: normal;
}

/* 2. Add conditional styling for dark mode preference */
@media (prefers-color-scheme: dark) {
  /* Re-assign previous variables */
  :root {
    --color-text: white; /* black => white */
    --color-background: #071b24; /*black; /* white => black */
    --text-weight: bolder;
  }
}

/* 3. Assign variables to page color and background */
#root {
  color: var(--color-text);
  background-color: var(--color-background);
}

Plus you will need to add something like this:


#root > div > div > div > div > div > div > div > div > div > div > span > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div  * {
 color: var(--color-text);
 background-color: var(--color-background);
 color: var(--color-text);
 font-weight: var(--text-weight);
}

I used the Chrome Developer Tools to get the correct CSS path (all of those divs). Your path may be different and I do not know how well this works in a non Chrome browser.

Once that is done you will need to use the CSS variables which can be done fairly easily as shown in the picture below
image

Note that this will also change how things work in the Retool IDE when developing things, but they seem correct in the 'App Preview' mode.

1 Like
2

Thank you Peter, my boss has been asking for light/dark mode versions of our app for a while and this assist greatly.