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:

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/

[Bergstrand2]

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?

[Bergstrand2]

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?

[Bergstrand2]

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.