WIP: dark mode #1

daira · 2024-11-04T12:16:49Z

Based loosely on @birgersp's code at prati0100/git-gui#64 (comment).

Limitations:

There is no attempt to make this configurable yet.
It has only been tested on Linux (using Englightenment with a dark system theme).
The colour of the border around widgets when they are focused is not consistent. On my system it is sometimes light blue (which I haven't set anywhere, so it must be coming from the underlying theme), and sometimes an almost invisible dark blue.
I'm forcing a particular underlying theme, 'alt', which might not be to everyone's taste. The reason for this is to make the states of checkboxes and radio buttons more visible.
Some less commonly used dialog boxes still have light elements (but they're at least readable).
The banners for "Unstaged Changes", "Staged for commit", and "Staged Changes" should be made darker and use white text.
The contrast of red and green in diffs is uneven. Diff colours should be configurable for accessibility (Please make diff colors configurable prati0100/git-gui#86).
Some UI elements may be too small on high-resolution screens.
Dialogs flicker white initially and take visible time to draw. There's probably a way to set the right starting background colour.
Disabled text on a checkbox control is ugly in my opinion (for an example, see "Tools | Add..." when "Show a dialog before running" is unchecked). I don't know what whoever decided it should use that fake-3D effect was thinking.
I don't know what that light grey rectangle in the bottom right is.

@birgersp

Based loosely on @birgersp's code at <prati0100/git-gui#64 (comment)>. Limitations: * There is no attempt to make this configurable yet. * It has only been tested on Linux (using Englightenment with a dark system theme). * The colour of the border around widgets when they are focused is not consistent. On my system it is sometimes light blue (which I haven't set anywhere, so it must be coming from the underlying theme), and sometimes an almost invisible dark blue. * I'm forcing a particular underlying theme, 'alt', which might not be to everyone's taste. * Some less commonly used dialog boxes still have light elements (but they're at least readable). * The banners for "Unstaged Changes", "Staged for commit", and "Staged Changes" should be made darker and use white text. * The contrast of red and green in diffs is uneven. * Some UI elements may be too small on high-resolution screens. * Dialogs flicker white initially and take visible time to draw. There's probably a way to set the right starting background colour. * Disabled text on a checkbox control is ugly in my opinion (for an example, see "Tools | Add..." when "Show a dialog before running" is unchecked). I don't know what whoever decided it should use that fake-3D effect was thinking. * I don't know what that light grey rectangle in the bottom right is. Signed-off-by: Daira-Emma Hopwood <[email protected]>

daira · 2024-11-04T13:27:24Z

git-gui.sh

@@ -3272,7 +3272,7 @@ ttext $ui_workdir \
 	-borderwidth 0 \
 	-width 20 -height 10 \
 	-wrap none \
-	-takefocus 1 -highlightthickness 1\
+	-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \


This is ugly and should be abstracted out. It doesn't work to use $color::{focused,unfocused} variables because they might not have been initialized yet.

daira · 2024-11-04T13:28:52Z

git-gui.sh

@@ -3606,13 +3605,13 @@ $ui_diff tag conf d_+s \
 	-foreground {#00a000} \
 	-background {#e2effa}
 $ui_diff tag conf d_-s \
-	-foreground red \
+	-foreground darkred \


Similarly abstract these colours. Getting the right contrast is really important for diffs; for many devs they're what we spend most time reading.

daira · 2024-11-04T13:31:42Z

lib/themed.tcl

+			-foreground $field_fg -arrowcolor $scroll_arrow -arrowsize $arrow_size \
+			-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
+		ttk::style map TCombobox -background [list active $control_active disabled $base_bg readonly $control_readonly]
+		ttk::style map TCombobox -fieldbackground [list active $field_bg disabled $field_bg readonly $field_bg]


This was really hard to get right; setting it using ttk::style configure TCombobox -fieldbackground just doesn't work.

daira · 2024-11-04T13:34:06Z

lib/themed.tcl

+
+		set arrow_size              $scale
+
+		ttk::style theme use alt


default also works pretty well. I prefer the slightly more 3D look of alt, but the main reason to use it is that it makes the settings of checkboxes and radio buttons clearer (it was hard to get those to do the right thing with sufficient contrast in other themes).

daira · 2024-11-04T13:38:13Z

lib/themed.tcl

+		set darkest                 #101010
+		set darker                  #242424
+		set dark                    #303030
+		set darkish                 #404040
+		set lightish                #484848
+		set light                   #585858
+		set lighter                 #686868
+		set lightest                #808080
+		set white                   #e0e0e0
+		set whiter                  #f0f0f0
+		set whitest                 #ffffff
+
+		set scale                   18


Users of this fork: feel free to adjust these for accessibility. I'll probably add "high contrast" and "larger controls" settings.

daira · 2024-11-04T13:40:21Z

lib/themed.tcl

+		ttk::style theme use alt
+
+		ttk::style configure TFrame -background $base_bg \
+			-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused


The widget focus highlight is still not working quite right, and it should be made more visible, especially on buttons and checkboxes. (Also keyboard navigation on the main pane is tricky because pressing Tab in the comment area just adds a tab to the content. I can't remember ever wanting a tab in a commit comment, so that should probably be changed.)

daira · 2024-11-04T15:22:46Z

It seems from prati0100/git-gui#44 that people are having problems with incorrect colour extraction from the system theme even in light mode. So a "Use system theme" / "Light mode" / "Dark mode" option would be useful for that as well. Also the extracted colours should probably be sanity-checked for sufficient contrast, which is necessary even to be able to see the UI to change the settings.

Proposed appearance controls

Colours
( ) Use system colours
( ) Light mode
( ) Dark mode

[ ] Diffs use -red +blue instead of -red +green
[ ] High contrast
[ ] Larger controls

Tk theme: (recommended) [▾]

(The word "colours" is localized so will appear as "colors" in en_US locales.)

How these will work:

"Use system colours" extracts the colours from the Tk theme, but enforcing minimum contrast.
- On macOS we may be better off using tk::unsupported::MacWindowStyle isdark window as described here to tell whether the OS is configured for dark mode, and if it is then behave as for the "Dark mode" option. For Windows see here.
"Light mode" and "Dark mode" replace all the colours (incidentally solving any problems with colour extraction).
"Diffs use -red +blue..." just changes the "+" colour for diffs. This should be an improvement for most forms of colour blindness if I'm understanding correctly; not just deuteranomaly. If that's not correct then I'll make it a dropdown with various options. Note that the exact colours will depend on the other settings (e.g. the red that is used for light mode is too bright in dark mode — unless the user wants high contrast in which case it should be that bright).
"High contrast" applies a contrast and saturation-enhancing curve to all colours.
"Larger controls" increases the size of scrollbars, comboboxes, spinboxes, etc. I'm inclined to set the default based on the size of the UI font (which is already configurable in "Edit | Options..."), and then "Larger controls" would multiply it by 1.5, say.
"Tk theme" allows overriding the theme that we would otherwise set. The dropdown will have "(recommended)" plus the list of available themes. "(recommended)" will use whatever seems best for the platform, "Colours" option, and "Larger controls" option based on testing. We can't call this "default" because Tk has a 'default' theme which will probably not be the recommended one in some cases.

I'll also consider adding specific colour overrides, if I have time and the Tk colour selector widgets aren't too horrible.

The "Edit | Options..." dialog is already crowded, so I'm also thinking of putting these in a separate "Edit | Appearance..." dialog. There would definitely not be enough room for colour selectors in "Edit | Options...", and this gives more flexibility to add other appearance options if needed. If we also move the font settings there, it would make "Edit | Options..." more clearly focused on the behaviour of the app, rather than its appearance. Each dialog would have an independent "Restore Defaults" button.

daira mentioned this pull request Nov 4, 2024

"Official" Dark Mode for Git GUI prati0100/git-gui#64

Open

daira force-pushed the dark-mode branch from 864ea36 to eb35667 Compare November 4, 2024 13:25

daira commented Nov 4, 2024

View reviewed changes

daira mentioned this pull request Nov 4, 2024

Please make diff colors configurable prati0100/git-gui#86

Open

daira mentioned this pull request Nov 4, 2024

Add the ability to set ttk theme in the settings prati0100/git-gui#47

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: dark mode #1

WIP: dark mode #1

daira commented Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira commented Nov 4, 2024 •

edited

Loading

WIP: dark mode #1

Are you sure you want to change the base?

WIP: dark mode #1

Conversation

daira commented Nov 4, 2024 • edited Loading

daira Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

daira Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

daira Nov 4, 2024

Choose a reason for hiding this comment

daira Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

daira Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

daira Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

daira commented Nov 4, 2024 • edited Loading

Proposed appearance controls

daira commented Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira Nov 4, 2024 •

edited

Loading

daira commented Nov 4, 2024 •

edited

Loading