New dark mode dialog

[davidjgraph]

Specify a separate color for 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.

Dark Mode Colors Dialog

You can maintain consistent colors for all cells or selected cells, including labels, by pressing Ctrl+Shift+6 to open the Dark Mode Colors dialog.

• Fix Colors: Click this option to convert all single-color values in the styles of selected cells (or all cells if none are selected) to light-dark() color functions. This will apply the same color in both light and dark modes by using the single color value twice.
• Labels: When the Labels checkbox is selected, all single-color values within CSS styles in HTML labels will also be converted to use the light-dark() function, ensuring consistent label color across light and dark modes.

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

Upcoming Improvements

• Named colors are not yet supported for dark mode.
• Update https://github.com/jgraph/drawio-github/blob/master/DARK-MODE.md

[davidjgraph]

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

[Bergstrand2]

This looks really good and will be a highly useful update!

I work in a larger organization, and we have created quite a lot of diagrams that we would like to keep color consistent across both light and dark mode.

1. Is it possible to set user-defined dark mode colors globally, or do they have to be configured individually in each diagram?

2. If it’s not possible to set them globally: If we create a template diagram, will the user-defined dark mode colors in the template also be copied to new diagrams, even if only specific elements are reused?

3. Can you set different backgrounds for dark and light mode that will adjust automatically when viewed in Confluence if the user switches between modes? We would like to keep the background transparent or white in light mode, and white in dark mode due to consistency.

4. Is there any planned release date for these updates?

Looking forward to hearing your response.

[davidjgraph]

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 :)

[davidjgraph]

also, where are you saving diagrams?

[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.