Visibility issues with Dr Racket and dark themes

[pmplant]

Some elements of the UI, particularly the error message in the lower left, are difficult to see on a dark theme. I could not any way to customise these elements under preferences.

[winny-]

Related racket/racket#2140

[aidalgol]

Following on from the discussion in racket/racket#2140, I do not think this is a racket/gui bug, because I get the correct colours with a minimal racket/gui application:

#lang racket/gui

(let* ((frame (new frame%
                   [label "Dark GTK bug"]
                   [width 640]
                   [height 480]))
       (message (new message%
                     [parent frame]
                     [label "Message"]))
       (button (new button%
                    [parent frame]
                    [label "Button"])))
  (send frame show #t))

[aidalgol]

I'm having a really hard time finding where in the (DrRacket) code these problem widgets are created, so I'm quite stuck in debugging this myself.

[rfindler]

One issue is whether or not racket/gui is providing the information that says that dark-on-light mode is enabled.

You are right that the controls that have the wrong font and colors are not standard GUI controls. But they are implemented here: https://github.com/racket/gui/blob/master/gui-lib/mrlib/name-message.rkt

[aidalgol]

The problem does seem to be in the MrLib widgets. The "Name Message" widget in this program will is rendered in black.

#lang racket/gui

(require mrlib/name-message)

(let* ((frame (new frame%
                   [label "Dark GTK bug"]
                   [width 640]
                   [height 480]))
       (message (new message%
                     [parent frame]
                     [label "Message"]))
       (button (new button%
                    [parent frame]
                    [label "Button"]))
       (name-msg (new name-message%
                      [parent frame]
                      [label "Name Message"])))

  (send frame show #t))

[aidalgol]

@rfindler Are they all name-messages? Even the line:column readout, and memory usage readout? What about the "Run", "Debug", etc buttons?

[rfindler]

The line:column and memory usage bits are in framework/private/frame, the Run/Debug buttons are mrlib/switchable-button.

[sorawee]

The color of error messages of Check Syntax is fixed by f50868afa47921b7e4c074615a37ba918ecf7724.

[rfindler]

Thanks, @sorawee !

[sorawee]

@rfindler do you want me to keep posting outstanding issues about dark mode here? Or do you want to close this and then create a new issue? Note that there are two kinds of problems.

• The OS-level dark mode
• DrRacket default dark themes.

[rfindler]

I'm happy with posts wherever you find convenient. Pointing me to specific ones is very helpful, however you find easiest. (I recently turned my OS to dark mode so maybe I'll just find them on my own too, as I find time to poke around.)

[sorawee]

1. [General dark mode] Tabs have a bad contrast

2. [General dark mode] Selection by highlighting with blue has a bad contrast. Note that the black text on grey background looks subpar but readable enough for me, but other people might have issues with that.

   By the way, I'm not sure if "selection by highlighting with blue" in this fashion is user friendly and "standard". It's not clear that each language level is clickable/choosable. I thought there are various standard selection widgets. Is it a good idea to switch to those instead?

3. [General dark mode] DrRacket link is too dark blue. The language information and memory limit are also kinda hard to read. See also #319. If that's implemented, the issue category could change from "General dark mode" to "All dark themes".

4. [All dark themes] in: is black, so it completely disappears on dark background

5. [All dark themes] Yet another too dark blue in macro stepper. Also notice that the red right arrow has white background.

[sorawee]

6. Most textbox still has white background.

I think this is how it's supposed to be

[jackfirth]

I'm using dark mode on a mac as well, so I just wanted to say thank you @sorawee for hunting down all these contrast issues and reporting them!

[jackfirth]

Here's one: the signature box arrow semi-circle thing is very bright.

[sorawee]

[White on black theme] Here's one more issue.

Green on blue is hard to read already. Current expression highlight on green on blue is even more so.

[sorawee]

Black text on black background:

[sorawee]

Another black text on dark background. Note that the red highlight is also pretty bad.

[sorawee]

This might not be an issue, but I find the yellow background too bright for dark mode and looks out of place.

[rfindler]

Matthew fixed the tab color https://github.com/racket/gui/pull/153 .

[rfindler]

Another one: the teaching languages test report pane. To see, run (check-expect 1 2) in, say, BSL.

[rfindler]

@sorawee when you write "[General dark mode] Selection by highlighting with blue has a bad contrast. Note that the black text on grey background looks subpar but readable enough for me, but other people might have issues with that." I think that that's a choice made at the level of the operating system -- at least I see that blue there too on my mac os machine, until I change the "Highlight Color" setting in the "General" pane of "System Preferences" (available via the apple menu).

[sorawee]

Yep, you are right.

Note that I just realized that the choose language popup's background is semi-transparent, so if we have a dark theme like white on black, the text will be really unreadable.

[rfindler]

I think that part is fixed already.

On Wed, Dec 25, 2019 at 3:04 PM sorawee notifications@github.com wrote:

Yep, you are right.

Note that I just realized that the choose language popup's background is semi-transparent, so if we have a dark theme like white on black, the text will be really unreadable.

[image: Screen Shot 2019-12-25 at 13 02 20] https://user-images.githubusercontent.com/9099577/71450442-d8e6f580-2716-11ea-9510-7799bc40ef1a.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/racket/drracket/issues/235?email_source=notifications&email_token=AADBNMGXTOLNCDKU24EJHNDQ2PDGBA5CNFSM4F6RQC52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHUTLBI#issuecomment-568931717, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADBNMFR6OCWIAAHXQV27P3Q2PDGBANCNFSM4F6RQC5Q .

[rfindler]

@sorawee re "Green on blue is hard to read already. Current expression highlight on green on blue is even more so.", I was thinking that the green and blue colors were a bit too saturated and so I've adjusted them and here's how something like the screenshot you used above looks now:

Does that fix the problem, would you say?

[rfindler]

I kind of like the yellow/black configuration how it stands out but if someone wants to make some concrete suggestions I could change them.

I think @rmculpepper should probably address the macro-stepper color issue (using color-prefs:add-color-scheme-entry and color-prefs:lookup-in-color-scheme) as I don't really have a good sense of how color is supposed to work there.

Other than that, I think I've fixed stuff for the rest of the comments here. Did I miss anything that you notice @sorawee @jackfirth @shhyou ?

[sorawee]

Is there a way to test these changes easily? Usually I would install a snapshot, but it won't build until tomorrow, correct?

[rfindler]

Probably it is easiest is to build yourself or install a snapshot (unless you're on windows, in which case waiting for a snapshot is easiest).

[shhyou]

Looks pretty nice!

Here are some random observations:

• There's a (perhaps rarely used) Check Syntax feature highlighting syntax errors in gold. Maybe it could be DarkGoldenrod or Goldenrod in dark mode.

  

• The text color in Racket → Limit Memory dialog seems to be hard-wired.

  

• The tab names have higher contrast in light mode. It's a bit difficult to see file names.

  

[rfindler]

Thanks! I've fixed the first two, but the third one is something we'd have to change in https://github.com/MiMo42/MMTabBarView .

[shhyou]

Thanks!

but the third one is something we'd have to change in https://github.com/MiMo42/MMTabBarView .

Indeed, it's not configurable and has been using NSColor.selectedTextBackgroundColor for inactive tabs since the beginning.

[rfindler]

If you understand well enough to make a pull request we could probably get a new version of the library built and put into the distro.

[sorawee]

I just downloaded the today's snapshot. Here are more feedback. Note that I think a lot of these are going to be wontfix or not easily fixable, but let me report them anyway:

• White background issue:

  • "About DrRacket" dialog

    

  • Syntax object in the REPL

    

  • GC icon

    

• Debug mode

  • White background issue
  • Black labels on dark background
  • White stepping buttons
  

• Stepper mode for beginning students

  • White background issue
  • Black label on dark background (1/2)
  

  Incidentally, the "lambda step back" and "lambda step forward" icons clearly have a really low resolution. Can we fix this too?

• FrTime: white background

  

• pict/code: completely transparent background makes some character disappear

  

[sorawee]

Another white background issue: read in the REPL

[rfindler]

I'm having trouble making a recycle icon on a black background. The current ones are recycle@2x.png and recycle.png in https://github.com/racket/icons/ .

[rfindler]

I think the pict/code one is the expected behavior and probably shouldn't change.

[rfindler]

@rmculpepper : it looks like the simplest/best way to make mrlib/syntax-browser look right in dark modes is to have it depend on the framework (specifically to get access to color-prefs:). Is that a problematic dependency, do you think?

[sorawee]

Various boxes (comment box, XML box, text box, etc.)

• The blinking caret is black, so it can't be seen on the dark background.
• For text box, the text is black, so it can't be seen on the dark background.
• Low resolution icon (minor)
• Icon has white background (minor)

[rfindler]

With branch day imminent, what should get fixed here to be in the release?

After a bunch of false starts I think I have a path forward for syntax snips. The macro stepper seems important too. Anything else?

[shhyou]

• The tab names have higher contrast in light mode. It's a bit difficult to see file names.

Thanks! I've fixed the first two, but the third one is something we'd have to change in https://github.com/MiMo42/MMTabBarView .

For reference: this is hopefully fixed by MiMo42/MMTabBarView#74 and merged in racket/libs@743b813.

[shhyou]

What is the color scheme entry for the stack frame background (background of (cdr x) in the above screenshot)?

I added a framework:failed-background-color entry in this commit, but that one does not do the job.

[rfindler]

@shhyou looks like it isn't in a color scheme. It is the result of get-error-color in drracket/private/debug.rkt. Probably that should change to use the color scheme!

[sorawee]

@rfindler very weird. I just installed snapshot "20200115-738d2b7" and the blue link of DrRacket is still dark blue (not fixed), while the language name and mode is now light green (fixed).

[rfindler]

@sorawee what OS are you using? This is what I see:

[rfindler]

Also, the code in question that determines the color is the function click-delta in drracket/private/rep.rkt, which calls gui-utils:get-clickback-delta passing along (preferences:get 'framework:white-on-black?). It might be good to know what some printfs inside gui-utils:get-clickback-delta and that tell us what the preference is returning for you. It isn't obvious to me what's going wrong.

[sorawee]

OK. I know now what's going on.

Here's the classic theme.

Here's what happens when I switch to white on black theme.

Here's what happens after I click "Run" to reset the REPL window.

And here's what happens after I open a new tab

So the problem seems to be that the configuration is not updated immediately in various places, and there are also multiple levels of the update event.

[rfindler]

Oh yes, that's expected (and unfortunate).

[rfindler]

Although the dark issues for DrRacket aren't all done, I think I'm going to close this issue now. Lets open new issues for whatever remaining issues there are.

[jackfirth]

Now that I'm actually using 7.6, I just wanted to say that dark mode looks really good. Thank you everyone!

[sleepnova]

I have the same problem. If you keep DrRacket open on MacOS, the text color will be wrong when the system theme is changed from "Light Mode" to "Dark Mode" or vise-versa. The text on the toolbar and bottom(such as memory usage) is difficult to read.