topic Re: Reverse colors in dark mode in Administration & Architecture

Reverse colors in dark mode

dbrixr — Tue, 03 Sep 2024 11:54:38 GMT

It seems that Databricks implements its dark mode by applying the invert filter so that all colors are reversed. This is problematic if one wants to create some sort of html widget or rich output since this filter is passed down to the result of displayHTML. Then your output can look good in either light mode or dark mode but not both.

Is there a way to circumvent this or detect whether the editor is in light or dark mode with javascript from within the output cell? Since the output of displayHTML is sandboxed inside an iframe I see no direct way to access parent classes or to negate them.

Example:

displayHTML('<div style="color: red;">Hello</div>')

This looks red in light mode but teal in dark mode. I've tried !important, filter: none, color-scheme: light; etc but nothing seems to work.

Re: Reverse colors in dark mode

Anushree_Tatode — Wed, 11 Sep 2024 12:02:34 GMT

Hi @dbrixr

Re: Reverse colors in dark mode

dbrixr — Tue, 10 Sep 2024 11:36:32 GMT

Huh? This has nothing to do with my question.

Re: Reverse colors in dark mode

valentin9 — Wed, 21 Jan 2026 20:25:52 GMT

Also struggled with that issue. What I found is that there is a style applied onto the iframe: "filter: var(--invert-filter);" which applies this CSS: filter: invert(1) saturate(0.5).

I couldn't find any elements within the iframe that I can use to detect if dark mode is on or not. But since most people use system settings detection to use dark mode or light mode, the simplest way I found is this - in order to invert colors back to normal we apply filter: invert(1) again, and add saturate(2) to up the saturation back from saturate(0.5). Add this script anywhere within the HTML <head> or <body> it will invert the colors back to normal if the user's system prefers dark mode.

Alternatively, there is dark/light mode switch in the top right corner of the HTML rendering (sun/moon icon), that will get you back to regular view without inverting, but the user has to toggle it manually.