jgraph
Colors Affected by Dark Mode
Preflight Checklist
- [x] I agree to follow the Code of Conduct that this project adheres to.
- [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.
You must agree to search and the code of conduct. You must fill in this entire template. If you delete part/all or miss parts out your issue will be closed.
If you are technical, you should reporting bugs along the lines of https://marker.io/blog/how-to-write-bug-report. If you are not technical, we will make allowances, please try to make an effort to understand the process.
Describe the bug A clear and concise description of what the bug is.
- The colors are affected by dark mode (which was on by default). Exporting to an image results in completely different colors than what you think you're setting while editing, which is really annoying.
- The setting for dark mode is also tiny and tucked in the corner, not easy to find (I couldn't find the option in the menus).
To Reproduce Steps to reproduce the behavior:
- Go to - draw.io (maybe with system settings to default to dark mode?)
- Click on - any colors to color something
-
- export to an image or turn on light mode
- See error
Expected behavior A clear and concise description of what you expected to happen.
- It is expected that the colors you see with your eyes in the program are the colors you're selecting. Presumably the color codes are correct, but for most colors that's not a dead giveaway.
Screenshots If applicable, add screenshots to help explain your problem.
-
On the left is how the colors appear in dark mode in draw.io, on the right is how the image outputs.
-
I thought it was weird that the color palette was not the regular color spectrum, but it didn't click until I saw the output.
-
Also for some reason there are two color selection interfaces depending on if you click the little selected color box or the eyedropper. And you can open the latter from the former. But the latter shows correct colors (I think, normal looking palette, at least).
-
So that's weird.
draw.io version (In the Help->About menu of the draw.io editor):
- draw.io version - 24.6.4
Desktop (please complete the following information):
- OS: Windows 11
- Browser - Firefox and Chrome
- Browser Version 128.0 and 126.0.6478.127
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
I tested the problem in incognito/private mode with all browser extensions switched off, write "yes" below:
- yes
Additional context Add any other context about the problem here.
- Thanks!
I'm confused with this problem, too! I tested to export pictures in dark mode or light mode, then I use the color chooser to test the colors. It turned out that the colors you entered, displayed, and exported are all different. Take my experiment for an example, I entered #800002, then the displayed color is #ffb8ae, and 2 colors displayed in dark mode and light mode is #6c180f and #f5c5c5.
I was dealing with this frustration again. Luckily this time I found this "issue page".
From the link above:
"It is assumed when using dark mode that all diagrams have been created in light mode. As this is by far the most common case" "their intensity will be altered to significantly improve readability in dark mode. "
@Peeeet I think this should be left for the user to decide. I don't think it makes sense to present the user with a weird palette. I think the normal colour palette should be used. At most, creating a checkbox, possibly with a tooltip, prompting the user with something like "try dark mode palette for better readability while drawing (not recommended if you intend to export this in a white background since the colours will change)" or something properly thought-out and better.
The thing is, while in dark mode, I simply don't know which colours I'm actually selecting. Imagine I like those dark mode colours and then switch to light mode or print to a white background. User reaction: "Where are the colours I chose? wtf, do I need to go back and change ALL of them??".
This is a feature with unexpected side effects. I don't think this makes much sense. But I'm just passing by so I know nothing hehe
It is up to you to decide, apply the configuration as per the article:
{
"enableCssDarkMode": false
}
But I'm just passing by so I know nothing hehe
Actually, I could implement the eventually decided solution, given proper guidance. Just let me know.
Another idea that came up to me was, when the user is exporting, always give them the option to export either in 1.light mode or 2.dark mode (or eventually even going as far as giving them the option 3.export both and decide later)
@davidjgraph
It's up to you to decide and apply the configuration IF you know that exists and IF you know how that behaves. Imho, those are already too many IFs for a common user.
I've been using this tool for years and only found out about this configuration today. Many times I didn't use colours, but every time I wanted to use them I felt frustrated. "Why can't I make this normal red? Is it my browser? Is it my operating system? (....) af...pink it is, again".
OK, so come to the place for help (here) and ask for help. You did and it's sorted.
There are reasons for it being how it is, but I just don't have time to explain it in detail.
I see that there's an option for light or dark on export now, which I don't think was there when I had issues originally. I like that whichever mode you're in is the default for the output type, that should prevent the kind of confusion I ran into!
It is mostly quite an intuitive/familiar UI experience, and a great tool ❤️
Thanks!
Edit: Sorry, didn't notice that it defaulted to the mode you're in at first.
@davidjgraph
Ok, I really don't want to get into deeper discussions about this, specially because as far as I can understand you are one of the most involved people in the project.
But I do have to say having to create a github account and ask for help for something that is "just" considerable disappointing (having basic/expected colours, specifically in dark mode) but that in the end isn't completely essential for being able to draw nice enough graphs is just bad UX.
I just checked and at least there is a 2 click way to find the next steps on how to find help, by iterating through a list of promising resources. That is positive (but as I type it I can't help but feel some sarcasm emerging, because in the end, those are a lot of steps for asking for help).
You may have reasons for the issue in discussion being the way it is, it may even be the people leading the project simply don't want or don't care, all that is absolutely valid (no sarcasm, not wanting to do something is valid by itself) but the fact the current state is bad UX remains.
Not all UX issues have viable solutions (you cover here you uncover there) but this is likely not the case, although I admit I'm not familiar with the code base.
Thanks for developing this solid, extremely useful and mostly pleasurable piece of software, it's really an important tool, probably the best around that covers so many possibilities.
Cheers!
Oh! There could be a fourth option -
- Light
- Dark
- Dark with optimized colors
- Automatic
which would make it more clear when selecting that there's something unusual about that dark mode. 🤷
@josephgriffith
Assuming you're referring to the "Appearance dropdown" under export menu of some of the available formats, that could be a plus, yet the user would only get a "hint", and when and if they use that functionality, while keeping that info not explicit at drawing/creation time, which would probably be ideal.
The issue is that the viewers needs to display the diagram in a light or dark viewer in a way that is visible, regardless of whether the diagram was built in a light or dark mode editor. This is currently done by normalising the colours to light mode.
The information as to which mode the editor was in when it was made in the editor isn't in the file. If the editor were to have true colouring in both light and dark mode, then we'd have to set the mode of the editor saved to the file. That way we could adapt knowing what the base theme was.
The issue then is if an editor opens the file in a different light mode to the last editor, they might find they can't see anything...
@josephgriffith
Assuming you're referring to the "Appearance dropdown" under export menu of some of the available formats, that could be a plus, yet the user would only get a "hint", and when and if they use that functionality, while keeping that info not explicit at drawing/creation time, which would probably be ideal.
I meant in these places
And I guess it could still slip by if you find and set it without having much color on screen. I was thinking if I saw those options I'd try switching between them to see if I could tell what it meant, and if it wasn't clear to me I would just opt for the safer sounding 'Dark'.
I'm happy enough with the current WYSIWYG export method, should I come back to use it in a few years having forgotten about this ~~quirk~~feature 😝
@davidjgraph
I'm not sure if I'm understanding this entirely (I'm a bit sleepy today), but the major UI/UX issue seems to be, by order of priority:
- A user using X viewer opens a file which was created in Y viewer and sees nothing.
- The same situation, but the user can't see parts/nodes of the file.
- The same situation, and although the user sees everything, some nodes will not be easy/optimal to look at.
The problem was solved by keeping the "normal colours" in the file, and by normalizing those colours when displaying the contents in the dark viewer.
Adding a field to the file ( e.g viewerModeAtCreation: "dark"/"light"/"future-other" ) could help, but now another person opening the file in their local app with a different viewer mode will suffer. The app would need to check that field and 1. automatically change the mode (not great) or 2. compare and prompt the user something like "this file was created in light mode, yours is dark mode, you may have issues seeing the content correctly, would you like to temporarily change? You can still find the mode button in the corner any time you want" (but simpler and to the main point) (and there could be a checkbox somewhere to remember the behaviour, maybe).
However, introducing that field changes the API, and older versions of the client won't support it.
There are plugins, but what types of additional complexity is there in terms of versioning support? So older versions probably can't rely on that either.
If they eventually could, somehow, you already have the normalization solution, which is not bidirectional yet, but that should be achievable.
Is this legacy version maintainability the main issue? If so, how have you handled the previous new functionalities updates?
Are there more issues?
Edit: the issue is indeed complex; having something in the colour picker when in dark viewer explaining why the colours look weird could be a starter, adding that if the user wants true colours they can still use the light viewer.
Edit: Another option would be to ask the user if they want to use the app only locally, maybe saying "warning, if you share your piece of graph art, there may be colours out of place, everyone will probably be disappointed with you, and you may as well end up going to hell. Choose carefully".
The colour normalization can never be bidirectional, it's technically impossible, we've checked that. If it were possible to find an algo that goes from light to dark and back and end up with the original colour, there would be no problem.
Basically, no other diagramming app supports dark mode, and this is why...
I admit I don't know about general algorithms (if it was possible it would need to implement an invertible function - using symmetric lightness in HSL for colours with L < 50 (ex: 5 -> 95), with an additional decoding bit or field for decoding < 50 or keep it >= 50, could yield something useful? I really don't know, but you probably looked at it and discarded it because it doesn't work).
But I'm pretty sure it is at least possible to map the 45 colours provided in the simplified colour picker in a simple table/map/dictionary.
Yes, I remember hearing (abstractly) how dark mode could be a huge mess, but this is the first time I'm contacting with it and I'm already convinced hehe
Also, about the simplified colour picker, instead of having those 2 colour pickers, maybe providing just the simplified one by default, since from there the user can click the "+" button if needed. And then on that "full range" picker, maybe put the warning there, with one of those "?" icons, maybe even linking to that page "blog/dark-mode-diagrams". The explanation is pretty good and options are provided, so the user should at least feel very well informed. Or even doing that in the simplified colour picker immediately. Just exploring an idea. Because having both so close together, and with different colour palettes, adds to the confusion and can make the user think that's some sort of bug.
@davidjgraph I just noticed I forgot to mention you in my previous message
I like to export a light variant and a dark variant of the same diagram (for use in dark / light theme mode on website). I noticed that the exported dark image (i.e. hex color of rectangles in png) differs greatly from what you see on screen in 'dark mode'. It seems like the UI has lighter tones in general. The colors when exporting in light mode also differ to the UI but its much more subtle.
Looks like the UI might be applying something like a filter: invert(0.07) to the dark mode in the UI. Or at least if I apply this to the dark variant that export option produces it becomes a lot closer to what I see in the UI.
Is there anyway to export and have the exported image have the same colors as what you are seeing on screen? Basically, what you see is what you get.
Ideally I'd like to avoid manually maintaining 2 copies of the same diagram with different colors if possible.
Edit: As a work around I've been creating a light mode version and using Photoshop to apply a 7% inversion to the produced dark mode version to make it a little softer on the eyes. Works pretty well overall and I only need to maintain one variant of the diagram.
@mobeigi I don't think there's enough political motivation for implementing this. Although, as a UI tool, the colour fidelity should matter imho. Still an awesome tool, but that's what you get (and not what you see).