From 864ea36c62d1e068aef6c52b38190eea4ba41fb3 Mon Sep 17 00:00:00 2001 From: Daira-Emma Hopwood Date: Sun, 3 Nov 2024 21:44:41 +0000 Subject: [PATCH] WIP: dark mode. Based loosely on @birgersp's code at . Limitations: * There is no attempt to make this configurable, yet. * The colour of the border around widgets when they are focused is not consistent; sometimes it is light blue and sometimes dark blue. * I'm forcing a particular underlying theme, 'alt', which might not be to everyone's taste. * Some UI elements are arguably too small on high-resolution screens. * I don't know what that light grey rectangle in the bottom right is. Signed-off-by: Daira-Emma Hopwood --- git-gui.sh | 13 +++-- lib/themed.tcl | 139 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 118 insertions(+), 34 deletions(-) diff --git a/git-gui.sh b/git-gui.sh index 8fe7538..4fce100 100755 --- a/git-gui.sh +++ b/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 \ -cursor $cursor_ptr \ -xscrollcommand {.vpane.files.workdir.sx set} \ -yscrollcommand {.vpane.files.workdir.sy set} \ @@ -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} \ @@ -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 \ @@ -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 @@ -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< \ diff --git a/lib/themed.tcl b/lib/themed.tcl index f43d84e..39801f5 100644 --- a/lib/themed.tcl +++ b/lib/themed.tcl @@ -4,46 +4,131 @@ 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_disabled #585858 + 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 #484848 + set field_fg #f0f0f0 + + set control_resting #686868 + set control_active #808080 + 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 $focused -highlightbackground $unfocused + + ttk::style configure TLabel -background $base_bg -foreground $text_fg \ + -highlightthickness 1 -highlightcolor $focused -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 $focused -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 $focused -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 $focused -highlightbackground $unfocused + ttk::style configure EntryFrame -background $control_border \ + -highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused + + ttk::style configure TSpinbox -selectbackground $color::select_bg -selectforeground $color::select_fg -fieldbackground $field_bg -arrowcolor $scroll_arrow -arrowsize $arrow_size \ + -highlightthickness 1 -highlightcolor $focused -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 map TCheckbutton -foreground [list active $text_highlight disabled $text_disabled readonly $text_fg] + + ttk::style configure TCombobox -selectbackground $color::select_bg -selectforeground $color::select_fg -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] + + ttk::style configure TCheckbutton -background $base_bg -foreground $button_text -indicatorcolor $indicator_color \ + -highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused + ttk::style map TCheckbutton -background [list active $control_active disabled $base_bg readonly $control_readonly] + ttk::style map TCheckbutton -foreground [list active $text_highlight disabled $text_disabled readonly $text_fg] + + ttk::style configure TRadiobutton -background $base_bg -foreground $button_text -indicatorcolor $indicator_color \ + -highlightthickness 1 -highlightcolor $focused -highlightbackground $unfocused + ttk::style map TRadiobutton -background [list active $control_active disabled $base_bg readonly $control_readonly] + ttk::style map TRadiobutton -foreground [list active $text_highlight disabled $text_disabled readonly $text_fg] 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 *Listbox.Background $field_bg + add_option *Listbox.Foreground $field_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 } }