ENH: Better dark colors

[larsoner]

This at least sets up a framework by which we can set the dark mode analogs for our light-mode colors:

main-dark	main/PR-light	PR-dark

For now I tried to choose similar colors based on the matplotlib list.

@mscheltienne you mentioned the colors not being so good, is this any better?

Helps with #83

[larsoner]

@hoechenberger @agramfort @cbrnr you also had comments in #83 (comment) for example, this moves us toward a custom EDIT: hand-picked set of dark mode colors

[larsoner]

And here is the script I used to test:

import numpy as np
import mne
ch_t = ('grad', 'mag', 'ref_meg', 'eeg', 'eeg', 'ecg', 'seeg', 'dbs', 'hbo')
ch_n = list(ch_t)
ch_n[4] = 'bad'
info = mne.create_info(ch_n, 1000., ch_t)
info['bads'] = ['bad']
data = np.random.RandomState(0).randn(len(ch_t), 1000) * 0.1
raw = mne.io.RawArray(data, info)
events = np.array([[200, 0, 1], [300, 0, 2]])
annot = mne.Annotations([0.5, 0.8], 0.1, ['BAD_Segment', 'Test'])
raw.set_annotations(annot)
raw.plot(scalings=1., block=True, order=np.arange(len(ch_t)), events=events)

It can be launched with MNE_BROWSER_THEME=dark python ... for example to run in dark mode.

[mscheltienne]

It looks better for me, at least in terms of esthetic and viewing experience, but I also mentioned being color-blind.. so I'm not the best to judge colors 😅 I think the background of the plotting area is still a bit too dark for me. I am used to a dark mode with a background color closer to the toolbar background (similar to macOS, Firefox dark modes).
However, it did become a bit harder to differentiate some of the channel types by color (most likely because they are in the range of my color-blindness), but I don't think this is a big issue as I usually know what I'm plotting and can always refer to the channel names.

[larsoner]

I think the background of the plotting area is still a bit too dark for me. I am used to a dark mode with a background color closer to the toolbar background (similar to macOS, Firefox dark modes).

I tried increasing it a bit to the (53, 53, 53) that Chrome uses when you open an empty tab, but this seemed too light. The value I have now ((17, 17, 17)) is from the dark part of Gmail's dark mode (or maybe it's some theme I chose?).

Want to try different values @mscheltienne and propose what you think is best? Then maybe I can try and we can agree on something in between (or your value if it looks okay already!)

[mscheltienne]

I'm exhausted tonight, but I'll have a look this weekend if I can tune a bit more your values.
I don't think a consensus can be reached that satisfies everyone anyway, but let's try and propose a couple of options :)

I'll try with the firefox colors: https://design.firefox.com/photon/visuals/color.html

[larsoner]

1. Here is (50, 50, 50), which is the widget bgcolor:

   

2. If we split the difference and use (35, 35, 35) I think it looks decent:

   

3. A bit darker (25, 25, 25):
   

4. And just for completeness, this is what I had before (which was actually (15, 15, 15)), which I don't like as much as 25 (or maybe 35):

   

I think (2) and (3) (35 and 25) are my favorites actually

[agramfort]

2 or 3 work for me Thx 🙏

[cbrnr]

I like (3).

[mscheltienne]

From the 4 you propose, I prefer (2) or (3).

I left my macOS at work, so I'm now using Windows, and I only now realize there are large differences between macOS and Windows dark-mode. Any reason why this is the case?

I gave a shot to 5 colors for the background:

• (50, 50, 50)
• (12, 12, 13) -- Mozilla Grey 90
• (42, 42, 46) -- Mozilla Grey 80
• (56, 56, 61) -- Mozilla Grey 70
• (74, 74, 79) -- Mozilla Grey 60

Note that they chose to slightly increase the blue proportion compared to the 2 other colors.

(50, 50, 50)	(12, 12, 13)	(42, 42, 46)	(56, 56, 61)	(74, 74, 79)

The 2 last ones are way too light.
Here is the Grey 80 with the entire window:

Personally, I like how the viewing/plotting area looks in this one, especially the contrast between the background on the edge and the lighter plotting area background + the contour applied to the plotting area.
However, the toolbar and status bar looks bad.

[larsoner]

I left my macOS at work, so I'm now using Windows, and I only now realize there are large differences between macOS and Windows dark-mode. Any reason why this is the case?

Yes, on macOS (at least with mne-tools/mne-python#10500) it uses the native styling provided by Qt, which is similar to what macOS uses. AFAIK there isn't native dark styling for Qt in Windows, so we have to use a qdarkstyle stylesheet for it. You will also experience this theme on macOS if you have light mode for your system, but ask for a dark theme. This stylesheet has a blueish tint.

Note that they chose to slightly increase the blue proportion compared to the 2 other colors.

Interesting. I looked at the bgcolor of the builtin "Digital Color Meter.app" I had been using to pull colors, and it actually uses (35, 31, 41) (I had my mouse over its background), but this ends up looking noticeably purple to me:

Meter	MNE

And the left pane of my Finder is (41, 41, 51). So some blue shift seems pretty common in macOS dark theming.

Personally, I like how the viewing/plotting area looks in this one, especially the contrast between the background on the edge and the lighter plotting area background + the contour applied to the plotting area.

I agree (42, 42, 46) looks decent. On macOS though it comes a bit too close to the other colors I think:

It looks like Safari actually uses (30, 30, 30) for its center here:

And this is what it would look like for us:

macOS native	macOS darkdetect-themed

Given that it splits the difference between the (2) and (3) I had and people liked above, is used by Apple in one of their premier applications, won't create a hue issue on macOS, and I think is different enough from the darkdetect blue to not be seen as an error, I'm inclined to go with that one.

[mscheltienne]

Ok, that makes sense now. It's a bit weird that the browser has 2 dark-theme on macOS invoked by the same theme='dark' depending on installed dependencies.
So yes, anything too close to (50, 50, 50) will not work on macOS. (30, 30, 30) looks good.

[larsoner]

. It's a bit weird that the browser has 2 dark-theme on macOS invoked by the same theme='dark' depending on installed dependencies.

What I'm talking about assumes qdarkstyle is installed in both cases. It's really whether the system is in dark mode or light mode that changes things. If it's in dark mode and you request dark mode, we can use Qt's native styling (gray). If the system is in light mode but you request dark mode, we have to overwrite the stylesheets to get dark mode, which means using qdarkstyle (blueish).

The same thing actually happens when your macOS system is in dark mode but you request light mode -- we have to use qdarkstyle to light-theme thingns. The differences there are more subtle though:

light: system in light (Qt native)	light: system in dark (qdarkstyle)

Sounds like we've converged on 30, so I'll go ahead and merge. We can always tweak trace colors further if people try the ones I've chosen here and find them to be unusable!