New Dark Mode

[davidjgraph]

Specify separate colors for light and dark mode by selecting User-defined in the Advanced section of the color dialog.

Setting Colors for Light and Dark Mode

1. To assign colors for both light and dark modes, click the respective text box in the color dialog.
2. Enter a color value or select a color by clicking on the color and brightness box.

Note: The Advanced section remains hidden in light mode if only one color is specified. To access this section, click on Advanced.

Dark Mode Functionality

The new dark mode utilizes the light-dark() color function in cell styles and HTML labels:

• For single-color values, dark mode will automatically apply an improved contrast color.
• To maintain a consistent color across both light and dark modes, specify the same color twice in the light-dark() color function.

Adaptive Colors for Diagrams in Dark Mode

The Adaptive Colors feature allows you to adjust the appearance of your diagrams in dark mode. This option is available in two locations: the Style tab and the Extras menu, providing easy access to customize how colors are managed.

Adaptive Colors Modes

1. Default

• The current system default is used. The current system default is written in parenthesis and can be configured using the defaultAdaptiveColors configuration. Possible values are auto, simple and none. Note that this is the default setting for all diagrams and means that the diagram appearance may change based on the current system default.

1. Automatic

• Enhances the contrast of all colors in the diagram.
• Optimizes the diagram for dark mode by adjusting set and generated colors for better readability and visual balance.

3. Simple

• Improves the contrast of background colors and black/white elements (e.g., fill, stroke, and text).
• Retains all other set colors, ensuring the same palette is used in both light and dark modes.

4. None

• Disables dark mode adjustments entirely.
• Diagrams appear exactly as they do in light mode, regardless of the application’s dark mode settings.

Accessing the Adaptive Colors Menu

• Style Tab: Adjust adaptive colors directly while styling your diagram.

• Extras Menu: Access adaptive colors from the main menu for quick, global adjustments.

Removing User-defined Colors

To remove user-defined dark colors that override the automatic colors in simple adaptive colors mode, open the Adaptive Colors dialog by pressing Ctrl+Shift+6.

• Remove User-defined: Click this option to remove all user-defined dark colors in the styles of the selected cells (or all cells if none are selected).
• Background: When the Background checkbox is selected, a user-defined dark background color for the diagram is removed.
• Labels: When the Labels checkbox is selected, all user-defined dark colors within CSS styles in HTML labels are removed.

This feature helps in achieving a uniform appearance for all cells and labels regardless of the mode.

Export SVG with Dark Mode

Light and dark colors are specified using the light-dark() color function and the SVG element has a color-scheme: light dark CSS property to use the current color scheme. (Where possible, light colors are specified in the DOM as a fallback for browsers that do not support the light-dark() color function.) This means the static SVG adapts to the color scheme of the operating system, containing page, node or img tag. See diagrams.net Dark Mode in SVG with CSS for details.

Comparison of the new (left) and old (right) SVG export:

Setting the Default Adaptive Colors

Set the defaultAdaptiveColors configuration value via Extras, Configuration to auto, simple or none.

{
  "defaultAdaptiveColors": "simple"
}

After a restart of the app or refresh of the page, the new default value will be visible in the drop down menu and applied to all diagrams that use default adaptive colors.

Minimum Browser Requirements

Due to the use of the light-dark() CSS color function, the minimum browser requirement for this new dark mode is Chrome 123+, Firefox 120+, Safari 17.5+, Opera 109+, WebView Android 131+, Safari iOS 17.5+ and Edge 123+. Where possible, a fallback for older browsers was implemented.

See also

• Implementing Dark Mode in a Diagramming App: Challenges and Solutions
• https://caniuse.com/?search=light-dark

[davidjgraph]

https://8e580d75.drawio-dev.pages.dev/

[Bergs11]

1. We can look at a per diagram on/off css inversion switch.
2. Globally? globally per diagram or globally per confluence?
3. Doesn't the switch for part 1 solve this?
4. We don't do ETAs :)

Thank you for your response! Just to provide some additional context:

We are primarily working in Confluence, where we document enterprise and system architecture, and this is where the diagrams are saved. These diagrams are also frequently exported and used in Word and PowerPoint presentations.

1. Regarding the on/off CSS inversion switch: If I understand correctly, you mean the ability to turn off dark mode for specific diagrams? That would definitely be useful in our situation.

2. Globally: By "globally," I mean a solution that works across an entire Confluence space or instance, as this is where our diagrams are primarily stored and accessed. Such a solution would help us maintain consistent colors across multiple diagrams without needing to adjust settings for each one individually.

3. Turning off dark mode per diagram: Yes, being able to turn off dark mode for specific diagrams would solve that issue for us, as it helps consistency in across both modes.

Thank you again for your clarifications! Let me know if you need further details.

[davidjgraph]

For point 1, you're saying disable all adaptive dark mode functionality for a diagram? i.e. you set colours and those are the only colours used, nothing changes between light and dark mode?

[Bergs11]

For point 1, you're saying disable all adaptive dark mode functionality for a diagram? i.e. you set colours and those are the only colours used, nothing changes between light and dark mode?

Yes, that’s correct. The ability to disable all adaptive dark mode functionality for specific diagrams (in addition to a potential global setting) would be ideal. This way, the set colors remain unchanged across both light and dark modes, ensuring consistency and clarity across the organization.

[davidjgraph]

Thanks. Do you have a fairly simple example diagram you could post that demonstrates this? I take it you don't care that the background colour of the diagram might not fit the theme of confluence?

[Bergs11]

Thanks. Do you have a fairly simple example diagram you could post that demonstrates this? I take it you don't care that the background colour of the diagram might not fit the theme of confluence?

Thank you for the follow up. I’ve created a simple example diagram to give you an idea of how we use it. Link

Regarding the background color: You're correct that we prioritize maintaining consistent colors for the diagrams themselves over ensuring that the background matches the Confluence theme.

There are also a few additional considerations:

• Dark mode colors currently don’t align with our organization’s palette, which we use for consistency across diagrams.
• When diagrams are exported in light mode (e.g., to PowerPoint or Word), we want them to remain consistent with how they appear in Confluence, even if the user viewing them in Confluence has dark mode enabled.
• We’ve also noticed that some transparent logos partially disappear against dark backgrounds in dark mode.

[stderr-to-devnull]

I don't know who asked for this or why this was implemented, because it completely destroyed the diagram building process which was completely fine in version 25.x

This mode erroneously inverts colors, makes text invisible while editing and overall looks absolutely nothing like the intended result when exporting to PNG.

There is no setting that I could find which would represent the diagram even remotely close to the way it would look exported, per my color choices, as it was the case in previous version.

Another case of "fixing" something which was not broken, which broke everything.

[stderr-to-devnull]

In the Style tab, you should see Default (Simple) for Adaptive Colors

It is already set to Default (Simple)

I also tried applying the extra configuration option to no effect after restarting.

This is how my dark grey background looks with some elements with white text:

[stderr-to-devnull]

The proper fix for me is to return to https://github.com/jgraph/drawio-desktop/releases/download/v25.0.2/draw.io-25.0.2-windows-no-installer.exe

It fixes all the issues the 26.x version(s) introduced with the dark mode. For reference, this is how the same portion of my diagram looks with the older version, without having to do any modifications to the settings:

[alderg]

Try v26.0.9.

[stderr-to-devnull]

26.0.9 finally fixes the dark mode issue; I had a problem with grid lines not being visible but it was a color issue which is easily fixed by choosing another color (first time I encountered this)

[ilanbiala]

Maybe I'm misunderstanding the functionality, but is this adjusting the color of the text based on light/dark mode alone or also the color of the shape the text is in?

[atosh502]

I had an issue where adding (w/ Paste) SVGs created with draw.io [web version v26.0.11] into Figma would appear complete black (see hello-svg-web 1).
Creating, exporting the same SVG w/ Desktop app v25.0.2, and adding to Figma would work as expected (see hello-svg-local 1)

I had "Light" mode enabled in Figma. My Adaptive color was set to "Simple" and I removed "Background", and "Labels" colors using the "Remove User-defined" adaptive colors before exporting.
I suspect this is due to my lack of understanding of light-dark(), so I reverted to using the v25.0.2.

[alderg]

Exporting SVG with Appearance: Light will produce an SVG output with no light-dark color functions.

[atosh502]

okay this worked thanks

[martin-rainlabs]

It's a bit irksome that by default, the SVG export isn't compliant with the SVG standard. And very non-obvious that the "Appearance" setting can make it so.

[alderg]

Only the style attribute contains the light-dark color functions.

The style attribute is governed by the CSS Style Attribute Specification.

[martin-rainlabs]

I stand corrected. light-dark() appears to be a relatively new addition to CSS, and SVG-rendering tools other than web browsers will no doubt take a while to catch up.

[RocketMaDev]

This a good feature to help those who want to set 2 different color on light mode and dark mode. But for me, it's a bit annoying to set 2 colors to the same under simple mode. I also tried the none mode, but the canvas turn white when I'm under Dark Mode.

@davidjgraph is there a switch to keep canvas dark under Dark Mode when defaultAdaptiveColors is none?

[monokal]

I think this functionality should be opt-in, having just spent a couple of hours re-styling every node on my diagram following a very confusing export. I don't want (nor have the time) to style two versions of every diagram.