Skip to content

Commit eb35667

Browse files
dairaDaira-Emma Hopwood
daira
authored and
Daira-Emma Hopwood
committed
WIP: dark mode.
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]>
1 parent 2864e85 commit eb35667

File tree

2 files changed

+139
-34
lines changed

2 files changed

+139
-34
lines changed

‎git-gui.sh

+6-7
Original file line numberDiff line numberDiff line change
@@ -3272,7 +3272,7 @@ ttext $ui_workdir \
32723272
-borderwidth 0 \
32733273
-width 20 -height 10 \
32743274
-wrap none \
3275-
-takefocus 1 -highlightthickness 1\
3275+
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
32763276
-cursor $cursor_ptr \
32773277
-xscrollcommand {.vpane.files.workdir.sx set} \
32783278
-yscrollcommand {.vpane.files.workdir.sy set} \
@@ -3294,7 +3294,7 @@ ttext $ui_index \
32943294
-borderwidth 0 \
32953295
-width 20 -height 10 \
32963296
-wrap none \
3297-
-takefocus 1 -highlightthickness 1\
3297+
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
32983298
-cursor $cursor_ptr \
32993299
-xscrollcommand {.vpane.files.index.sx set} \
33003300
-yscrollcommand {.vpane.files.index.sy set} \
@@ -3441,8 +3441,7 @@ ttext $ui_comm \
34413441
-undo true \
34423442
-maxundo 20 \
34433443
-autoseparators true \
3444-
-takefocus 1 \
3445-
-highlightthickness 1 \
3444+
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
34463445
-relief sunken \
34473446
-width $repo_config(gui.commitmsgwidth) -height 9 -wrap none \
34483447
-font font_diff \
@@ -3569,7 +3568,7 @@ ttext $ui_diff \
35693568
-borderwidth 0 \
35703569
-width 80 -height 5 -wrap none \
35713570
-font font_diff \
3572-
-takefocus 1 -highlightthickness 1 \
3571+
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
35733572
-xscrollcommand {.vpane.lower.diff.body.sbx set} \
35743573
-yscrollcommand {.vpane.lower.diff.body.sby set} \
35753574
-state disabled
@@ -3606,13 +3605,13 @@ $ui_diff tag conf d_+s \
36063605
-foreground {#00a000} \
36073606
-background {#e2effa}
36083607
$ui_diff tag conf d_-s \
3609-
-foreground red \
3608+
-foreground darkred \
36103609
-background {#e2effa}
36113610
$ui_diff tag conf d_s+ \
36123611
-foreground {#00a000} \
36133612
-background ivory1
36143613
$ui_diff tag conf d_s- \
3615-
-foreground red \
3614+
-foreground darkred \
36163615
-background ivory1
36173616

36183617
$ui_diff tag conf d< \

‎lib/themed.tcl

+133-27
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,152 @@
44

55
namespace eval color {
66
# Variable colors
7-
# Preffered way to set widget colors is using add_option.
8-
# In some cases, like with tags in_diff/in_sel, we use these colors.
9-
variable select_bg lightgray
10-
variable select_fg black
11-
variable inactive_select_bg lightgray
12-
variable inactive_select_fg black
7+
# Preferred way to set widget colors is using add_option.
8+
# These variables are used by set_selection_colors.
9+
variable select_bg #242470
10+
variable select_fg #f0f0f0
11+
variable inactive_select_bg #404080
12+
variable inactive_select_fg #f0f0f0
1313

1414
proc sync_with_theme {} {
15-
set base_bg [ttk::style lookup . -background]
16-
set base_fg [ttk::style lookup . -foreground]
17-
set text_bg [ttk::style lookup Treeview -background]
18-
set text_fg [ttk::style lookup Treeview -foreground]
19-
set select_bg [ttk::style lookup Default -selectbackground]
20-
set select_fg [ttk::style lookup Default -selectforeground]
21-
set inactive_select_bg [convert_rgb_to_gray $select_bg]
22-
set inactive_select_fg $select_fg
23-
24-
set color::select_bg $select_bg
25-
set color::select_fg $select_fg
26-
set color::inactive_select_bg $inactive_select_bg
27-
set color::inactive_select_fg $inactive_select_fg
15+
# TODO: only override these if a dark-mode setting is in effect.
16+
17+
set darkest #101010
18+
set darker #242424
19+
set dark #303030
20+
set darkish #404040
21+
set lightish #484848
22+
set light #585858
23+
set lighter #686868
24+
set lightest #808080
25+
set white #e0e0e0
26+
set whiter #f0f0f0
27+
set whitest #ffffff
28+
29+
set scale 18
30+
31+
set base_bg $dark
32+
set unfocused $base_bg
33+
set focused $whiter
34+
35+
set text_bg $darker
36+
set text_fg $white
37+
set text_disabled $light
38+
set text_highlight $whitest
39+
40+
set menu_bg $text_bg
41+
set menu_fg $text_fg
42+
set menu_select_bg $darkish
43+
set menu_select_fg $text_highlight
44+
45+
set field_bg $lightish
46+
set field_fg $whiter
47+
48+
set control_resting $lighter
49+
set control_active $lightest
50+
set control_disabled $darkest
51+
set control_readonly $dark
52+
set control_border $base_bg
53+
54+
set button_bg $darker
55+
set button_text $text_fg
56+
set button_text_disabled $lightest
57+
set button_text_active $text_highlight
58+
59+
set indicator_color $darkish
60+
set indicator_active $control_active
61+
62+
set scroll_resting $control_resting
63+
set scroll_active $control_active
64+
set scroll_disabled $control_disabled
65+
set scroll_border $control_border
66+
set scroll_trough $dark
67+
set scroll_arrow $whiter
68+
69+
set arrow_size $scale
70+
71+
ttk::style theme use alt
72+
73+
ttk::style configure TFrame -background $base_bg \
74+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
75+
76+
ttk::style configure TLabel -background $base_bg -foreground $text_fg \
77+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
78+
ttk::style configure TLabelframe -background $base_bg
79+
ttk::style configure TLabelframe.Label -background $base_bg -foreground $text_highlight
80+
81+
ttk::style configure TPanedwindow -background $base_bg -foreground $text_fg \
82+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
83+
84+
ttk::style configure TScrollbar -background $scroll_resting -bordercolor $scroll_border \
85+
-troughcolor $scroll_trough -arrowcolor $scroll_arrow -arrowsize $arrow_size
86+
ttk::style map TScrollbar -background [list active $scroll_active disabled $scroll_disabled]
87+
88+
ttk::style configure TButton -background $button_bg -foreground $button_text -borderwidth 3 -bordercolor $control_border \
89+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
90+
ttk::style map TButton -background [list active $control_active disabled $control_disabled readonly $control_readonly]
91+
ttk::style map TButton -foreground [list active $button_text_active disabled $button_text_disabled readonly $button_text]
92+
93+
ttk::style configure TEntry -fieldbackground $field_bg -background $base_bg -foreground $field_fg \
94+
-selectbackground $color::select_bg -selectforeground $color::select_fg \
95+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
96+
ttk::style configure EntryFrame -background $control_border \
97+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
98+
99+
ttk::style configure TSpinbox -selectbackground $color::select_bg -selectforeground $color::select_fg \
100+
-fieldbackground $field_bg -arrowcolor $scroll_arrow -arrowsize $arrow_size \
101+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused \
102+
.vpane.lower.commarea.buffer.frame.t configure -background $base_bg -foreground $text_fg \
103+
.vpane.lower.diff.body.t configure -background $base_bg -foreground $button_text \
104+
.vpane.files.workdir.list configure -background $base_bg -foreground $button_text \
105+
.vpane.files.index.list configure -background $base_bg -foreground $button_text \
106+
.about_dialog.git_logo configure -background $base_bg -foreground $button_text
107+
ttk::style map TSpinbox -background [list active $control_active disabled $base_bg readonly $control_readonly]
108+
ttk::style map TCheckbutton -foreground [list active $text_highlight disabled $text_disabled readonly $text_fg]
109+
110+
ttk::style configure TCombobox -selectbackground $color::select_bg -selectforeground $color::select_fg \
111+
-foreground $field_fg -arrowcolor $scroll_arrow -arrowsize $arrow_size \
112+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
113+
ttk::style map TCombobox -background [list active $control_active disabled $base_bg readonly $control_readonly]
114+
ttk::style map TCombobox -fieldbackground [list active $field_bg disabled $field_bg readonly $field_bg]
115+
116+
ttk::style configure TCheckbutton -background $base_bg -foreground $button_text -indicatorcolor $indicator_color \
117+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
118+
ttk::style map TCheckbutton -background [list active $control_active disabled $base_bg readonly $control_readonly]
119+
ttk::style map TCheckbutton -foreground [list active $text_highlight disabled $text_disabled readonly $text_fg]
120+
121+
ttk::style configure TRadiobutton -background $base_bg -foreground $button_text -indicatorcolor $indicator_color \
122+
-highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused
123+
ttk::style map TRadiobutton -background [list active $control_active disabled $base_bg readonly $control_readonly]
124+
ttk::style map TRadiobutton -foreground [list active $text_highlight disabled $text_disabled readonly $text_fg]
28125

29126
proc add_option {key val} {
30127
option add $key $val widgetDefault
31128
}
129+
32130
# Add options for plain Tk widgets
33131
# Using `option add` instead of tk_setPalette to avoid unintended
34132
# consequences.
35133
if {![is_MacOSX]} {
36-
add_option *Menu.Background $base_bg
37-
add_option *Menu.Foreground $base_fg
38-
add_option *Menu.activeBackground $select_bg
39-
add_option *Menu.activeForeground $select_fg
134+
add_option *Menu.Background $menu_bg
135+
add_option *Menu.Foreground $menu_fg
136+
add_option *Menu.activeBackground $menu_select_bg
137+
add_option *Menu.activeForeground $menu_select_fg
40138
}
41139
add_option *Text.Background $text_bg
42140
add_option *Text.Foreground $text_fg
43-
add_option *Text.selectBackground $select_bg
44-
add_option *Text.selectForeground $select_fg
45-
add_option *Text.inactiveSelectBackground $inactive_select_bg
46-
add_option *Text.inactiveSelectForeground $inactive_select_fg
141+
add_option *Text.selectBackground $color::select_bg
142+
add_option *Text.selectForeground $color::select_fg
143+
add_option *Text.inactiveSelectBackground $color::inactive_select_bg
144+
add_option *Text.inactiveSelectForeground $color::inactive_select_fg
145+
146+
add_option *Listbox.Background $field_bg
147+
add_option *Listbox.Foreground $field_fg
148+
149+
add_option *TCombobox*Listbox.background $field_bg
150+
add_option *TCombobox*Listbox.foreground $field_fg
151+
add_option *TCombobox*Listbox.selectBackground $color::select_bg
152+
add_option *TCombobox*Listbox.selectForeground $color::select_fg
47153
}
48154
}
49155

0 commit comments

Comments
 (0)