Dark mode colour changes #3701
Replies: 16 comments 25 replies
-
|
The dark mode looks great. Unfortunately, I must choose a light mode because I need to leave an impression. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I didn't add those |
Beta Was this translation helpful? Give feedback.
-
|
Seems to be fixed :) |
Beta Was this translation helpful? Give feedback.
-
|
Damn, this is the only thing preventing me from using the dark mode! Is this available? How can I use it?? |
Beta Was this translation helpful? Give feedback.
-
|
On the top right corner you will see a small sun icon, press there and then select "dark". |
Beta Was this translation helpful? Give feedback.
-
|
I probably misunderstood it then. I thought it would automatically convert my diagrams, which was not the case. Thank you anyways. |
Beta Was this translation helpful? Give feedback.
-
|
I hope the lines will also be visible and that the export/print options will have an option to ignore dark mode colors. |
Beta Was this translation helpful? Give feedback.
-
|
Look fine and all but all my diagrams were made using dark mode, and when I opened my project this morning, the only thing I was presented with was a broken mess. This update broke most of my files. Is there a way to keep the old dark mode along this one? The old one was way better looking, this new mode looks like a cheap css filter. |
Beta Was this translation helpful? Give feedback.
-
|
I think I can rephrase my issue in a better way: I prefered when the dark mode was limited to the UI and did not influence the diagram itself. So maybe separate the "dark mode" and the "invert colors" options? Or something like "improve contrast" as a checkbox and limit the css filter to the diagram instead of the whole app. |
Beta Was this translation helpful? Give feedback.
-
|
I have the exact same problem, my document is made with dark ui in mind so i only use the l'element 6-15 in your picture and the ctrl-shit-6 ain't helping |
Beta Was this translation helpful? Give feedback.
-
|
To keep using the old dark mode, use this link or set the following configuration option: |
Beta Was this translation helpful? Give feedback.
-
|
This works like a charm! Thank you for the solution! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you :D |
Beta Was this translation helpful? Give feedback.
-
|
I use Background pages for Title Blocks and Borders for diagrams, and when setting a Page Background in the new version the background elements appear in Dark Mode on the pages for which they are in the background.
Full Diagram XML: |
Beta Was this translation helpful? Give feedback.
-
|
would like to know if/when the cmd+shift+6 function will begin working as intended? it would be nice to use that function rather than going through config! |
Beta Was this translation helpful? Give feedback.
-
|
That needs the values in the picker corrected, you don't want to use the config for that, then you'd have a real mess. We'll take a look at the picker. |
Beta Was this translation helpful? Give feedback.
-
|
But even with the values in the picker corrected it's not always possible to get the exact color that was entered in dark mode. So yes, currently the only way you can achieve that color in dark mode is by doing the config, but we'll take a look at some options. |
Beta Was this translation helpful? Give feedback.
-
|
I wouldn't use the old system on anything collaborative (i.e. jira or conf). There's 2 different problem cases here, it maybe better to discuss in a call. |
Beta Was this translation helpful? Give feedback.
-
|
just double checking here, is there anything you guys would like from me to help in this? I am more than happy to assist in any way I can, if that's the case. I just assumed the "we" you talk about is between you two 😅 |
Beta Was this translation helpful? Give feedback.
-
|
Yup, we're thinking about it, in between naps. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I'm using draw.io in NextCloud. The color palette has recently changed. I am a dark theme user and would like to change the dark mode color palette to "normal", is there a way? I will be making more diagrams in the future and would like to have this as the default color scheme. I would also like to achieve no differences in the display of dark or light mode. (some of my colleagues use light mode, some use dark mode, and we share one big diagram that has many colors) The NextCloud version of Draw.io is 21.6.2. I tried your "Conver Colors" but most of the colors were not the same + they were pale. Light theme: Dark theme: |
Beta Was this translation helpful? Give feedback.
-
|
Hey @davidjgraph, thanks for this update! One question: how are the dark colors calculated from the light colors? I had previously setup a bunch of |
Beta Was this translation helpful? Give feedback.
-
|
Why do I have to set it to dark mode every single time I open the file? |
Beta Was this translation helpful? Give feedback.
-
|
This change is rather bad UX and messes with existing data. I spent a lot of time with my team to build a diagram with a lot of color coding mostly using draw.io desktop. Obviously we were all using the dark mode. Now I wanted to distribute it to quite some people to view it with the web app and just realised that everyone will see messed up colors, unless they take extra steps. There should be a property in the data structure which indicates in which mode the diagram has been created to keep the view consistent. Or at least (as a temporary workaround) let the creator specify it manually in the file properties. |
Beta Was this translation helpful? Give feedback.
-
|
We've added a contrast URL parameter so you can give out the following URL https://app.diagrams.net/?dark=1&contrast=0&splash=0 or directly reference the file via it's public URL with improved contrast or without improved contrast. |
Beta Was this translation helpful? Give feedback.
-
|
Can we have a dark mode with a light design panel? It would be great to have a button toggle to switch the appearance of the charts and grid, similar to what Outlook offers with its dark mode and light reading panel. You can find more details about this feature in Outlook here: Dark Mode in Outlook. |
Beta Was this translation helpful? Give feedback.
-
|
Hello. When I use the following settings: The UI is very blurry and is very hard to read: How do I make it more readable while maintaining the above settings? |
Beta Was this translation helpful? Give feedback.
-
|
That looks like a font selection problem on your system. |
Beta Was this translation helpful? Give feedback.
-
|
What do you mean? I did not change anything. I don't have this problem in light mode. Only happens in dark mode.
|
Beta Was this translation helpful? Give feedback.
-
|
Hi, I am using the embed function from the drawio, how can I prevent the css changing colors when the site where I embed those iframes toggle the preferred color theme? I do not need to have the dark theme colors for my diagrams. The way I embed those is: Here is a demo of a problem: 2025-01-02_16-42-41.mp4PS. I would rather prefer this would have been an opt-in for the embeds, as now all my diagrams look bad when the dark theme is set in the user' system, which is a non backwards compatible change... |
Beta Was this translation helpful? Give feedback.
-
|
Try |
Beta Was this translation helpful? Give feedback.
-
|
thanks, this solves it, buuuut, I have hundreds of these across several repos... I would understand if |
Beta Was this translation helpful? Give feedback.
-
|
This will be fixed in the next release. Possible values for dark-mode are |
Beta Was this translation helpful? Give feedback.
-
Update 2023.08.10: The new dark mode can now be turned off by unchecking Extras (or Settings), Appearance, Improve Contrast:
Update 2023.07.05: These changes are out in 21.6.1. If you need to adjust colours that were originally designed just for dark mode and you now feel are wrong, use this link or set the following configuration option:
We've found a better system for adapting light mode designed diagrams into dark mode. If you never use dark mode, nothing to see here for you.
This functionality relates to diagrams drawn in either mode using the default colours. These colours are changed when you switch dark/light mode. i.e. black text in light mode becomes white.
If you have a specific colour applied to a shape/text, we don't touch it when you switch modes. This leads to readability problems on the same diagram when you share it between users on different view modes.
The new functionality will store everything under the hood as the colour values in light mode and change everything, including the colour picker in dark mode. Testing has shown considerably better results over what we currently have.
However, this means that we will assume that all diagrams were drawn in light mode once the change is in place. If you drew a diagram in dark mode and pick specific colours to suit the theme of the UI, we will then take those as being the colours selected for light mode and apply the algorithm for dark mode. End result is the colours won't be the same as those you originally picked in dark mode.
This applies to the minority of users and a minority of those users' diagrams. We will provide an option in the UI to change all colours in the diagram model to the new model so you get the original colours back. That applies per diagram.
It might seem like a heavy change, but in the long term we need the better colour adaption algorithm, the current one isn't good enough.
Note this will only apply to app.diagrams.net users and draw.io desktop users. draw.io for Confluence and Jira have never had a dark mode implement (but cloud will very soon). There maybe some downstream effect in integrations such as VSCode. We'll inform the authors that we have contact with and provide a way to switch this off if they wish.
Example diagram in light mode (original colors):
Diagram adapting to dark mode using current system:
Using new system with same diagram:
Beta Was this translation helpful? Give feedback.
All reactions