Skip to content

Commit

Permalink
WIP: dark mode.
Browse files Browse the repository at this point in the history 
Based loosely on @birgersp's code at
<prati0100/git-gui#64 (comment)>.

Limitations:
* There is no attempt to make this configurable, yet.
* I couldn't get the spinboxes to be entirely consistent with other
  UI elements.
* There's a blueish border around some widgets when they are focused.
  Its colour is supposed to be `$color::active`.
* Some widgets (e.g. buttons) don't have the focused border. They should
  all have it to improve keyboard accessibility.
* The white border around panes of a panedwindow is too bright.
* I don't know what that light grey rectangle in the bottom right is.

Signed-off-by: Daira-Emma Hopwood <[email protected]>
  • Loading branch information
@daira
daira committed Nov 3, 2024
1 parent 2864e85 commit 918f6c4
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 34 deletions.
13 changes: 6 additions & 7 deletions git-gui.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
-cursor $cursor_ptr \
-xscrollcommand {.vpane.files.workdir.sx set} \
-yscrollcommand {.vpane.files.workdir.sy set} \
Expand All @@ -3294,7 +3294,7 @@ ttext $ui_index \
-borderwidth 0 \
-width 20 -height 10 \
-wrap none \
-takefocus 1 -highlightthickness 1\
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
-cursor $cursor_ptr \
-xscrollcommand {.vpane.files.index.sx set} \
-yscrollcommand {.vpane.files.index.sy set} \
Expand Down Expand Up @@ -3441,8 +3441,7 @@ ttext $ui_comm \
-undo true \
-maxundo 20 \
-autoseparators true \
-takefocus 1 \
-highlightthickness 1 \
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
-relief sunken \
-width $repo_config(gui.commitmsgwidth) -height 9 -wrap none \
-font font_diff \
Expand Down Expand Up @@ -3569,7 +3568,7 @@ ttext $ui_diff \
-borderwidth 0 \
-width 80 -height 5 -wrap none \
-font font_diff \
-takefocus 1 -highlightthickness 1 \
-takefocus 1 -highlightthickness 1 -highlightcolor #f0f0f0 -highlightbackground #303030 \
-xscrollcommand {.vpane.lower.diff.body.sbx set} \
-yscrollcommand {.vpane.lower.diff.body.sby set} \
-state disabled
Expand Down Expand Up @@ -3606,13 +3605,13 @@ $ui_diff tag conf d_+s \
-foreground {#00a000} \
-background {#e2effa}
$ui_diff tag conf d_-s \
-foreground red \
-foreground darkred \
-background {#e2effa}
$ui_diff tag conf d_s+ \
-foreground {#00a000} \
-background ivory1
$ui_diff tag conf d_s- \
-foreground red \
-foreground darkred \
-background ivory1

$ui_diff tag conf d< \
Expand Down
136 changes: 109 additions & 27 deletions lib/themed.tcl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,128 @@

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

proc sync_with_theme {} {
set base_bg [ttk::style lookup . -background]
set base_fg [ttk::style lookup . -foreground]
set text_bg [ttk::style lookup Treeview -background]
set text_fg [ttk::style lookup Treeview -foreground]
set select_bg [ttk::style lookup Default -selectbackground]
set select_fg [ttk::style lookup Default -selectforeground]
set inactive_select_bg [convert_rgb_to_gray $select_bg]
set inactive_select_fg $select_fg

set color::select_bg $select_bg
set color::select_fg $select_fg
set color::inactive_select_bg $inactive_select_bg
set color::inactive_select_fg $inactive_select_fg
set base_bg #303030
set unfocused $base_bg
set focused #f0f0f0

set text_bg #242424
set text_fg #e0e0e0
set text_highlight #ffffff

set menu_bg #242424
set menu_fg $text_fg
set menu_select_bg #404040
set menu_select_fg $text_highlight

set field_bg #e0e0e0
set field_fg #101010
set spinbox_bg #505050

set control_resting #707070
set control_active #909090
set control_disabled #101010
set control_readonly #303030
set control_border #303030

set button_bg #242424
set button_text $text_fg
set button_text_active $text_highlight

set indicator_color #404040
set indicator_active $control_active

set scroll_resting $control_resting
set scroll_active $control_active
set scroll_disabled $control_disabled
set scroll_border $control_border
set scroll_trough $base_bg
set scroll_arrow #f0f0f0

set arrow_size 18

ttk::style theme use alt

ttk::style configure TFrame -background $base_bg \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused

ttk::style configure TLabel -background $base_bg -foreground $text_fg \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused
ttk::style configure TLabelframe -background $base_bg
ttk::style configure TLabelframe.Label -background $base_bg -foreground $text_highlight

ttk::style configure TPanedwindow -background $base_bg -foreground $text_fg \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused

ttk::style configure TScrollbar -background $scroll_resting -bordercolor $scroll_border -troughcolor $scroll_trough -arrowcolor $scroll_arrow -arrowsize $arrow_size
ttk::style map TScrollbar -background [list active $scroll_active disabled $scroll_disabled]

ttk::style configure TButton -background $button_bg -foreground $button_text -borderwidth 3 -bordercolor $control_border \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused
ttk::style map TButton -background [list active $control_active disabled $control_disabled readonly $control_readonly]
ttk::style map TButton -foreground [list active $button_text_active disabled $button_text readonly $button_text]

ttk::style configure TEntry -fieldbackground $field_bg -background $base_bg -foreground $field_fg -selectbackground $color::select_bg -selectforeground $color::select_fg \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused
ttk::style configure EntryFrame -background $control_border \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused

ttk::style configure TSpinbox -fieldbackground $spinbox_bg -selectbackground $color::select_bg -selectforeground $color::select_fg -arrowcolor $scroll_arrow -arrowsize $arrow_size \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused \
.vpane.lower.commarea.buffer.frame.t configure -background $base_bg -foreground $text_fg \
.vpane.lower.diff.body.t configure -background $base_bg -foreground $button_text \
.vpane.files.workdir.list configure -background $base_bg -foreground $button_text \
.vpane.files.index.list configure -background $base_bg -foreground $button_text \
.about_dialog.git_logo configure -background $base_bg -foreground $button_text
ttk::style map TSpinbox -background [list active $control_active disabled $base_bg readonly $control_readonly]

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

ttk::style configure TCheckbutton -background $base_bg -foreground $button_text -indicatorcolor $indicator_color \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused
ttk::style map TCheckbutton -background [list active $control_active disabled $base_bg readonly $control_readonly]
ttk::style map TCheckbutton -foreground [list active $button_text_active disabled $button_text readonly $button_text]

ttk::style configure TRadiobutton -background $base_bg -foreground $button_text -indicatorcolor $indicator_color \
-highlightthickness 1 -highlightcolor $color::active -highlightbackground $unfocused
ttk::style map TRadiobutton -background [list active $control_active disabled $base_bg readonly $control_readonly]
ttk::style map TRadiobutton -foreground [list active $button_text_active disabled $button_text readonly $button_text]

proc add_option {key val} {
option add $key $val widgetDefault
}

# Add options for plain Tk widgets
# Using `option add` instead of tk_setPalette to avoid unintended
# consequences.
if {![is_MacOSX]} {
add_option *Menu.Background $base_bg
add_option *Menu.Foreground $base_fg
add_option *Menu.activeBackground $select_bg
add_option *Menu.activeForeground $select_fg
add_option *Menu.Background $menu_bg
add_option *Menu.Foreground $menu_fg
add_option *Menu.activeBackground $menu_select_bg
add_option *Menu.activeForeground $menu_select_fg
}
add_option *Text.Background $text_bg
add_option *Text.Foreground $text_fg
add_option *Text.selectBackground $select_bg
add_option *Text.selectForeground $select_fg
add_option *Text.inactiveSelectBackground $inactive_select_bg
add_option *Text.inactiveSelectForeground $inactive_select_fg
add_option *Text.selectBackground $color::select_bg
add_option *Text.selectForeground $color::select_fg
add_option *Text.inactiveSelectBackground $color::inactive_select_bg
add_option *Text.inactiveSelectForeground $color::inactive_select_fg

add_option *TCombobox*Listbox.background $field_bg
add_option *TCombobox*Listbox.foreground $field_fg
add_option *TCombobox*Listbox.selectBackground $color::select_bg
add_option *TCombobox*Listbox.selectForeground $color::select_fg
add_option *Listbox.Background $field_bg
add_option *Listbox.Foreground $field_fg
}
}

Expand Down

0 comments on commit 918f6c4

Please sign in to comment.