"Official" Dark Mode for Git GUI

[Sashank999]

Is there dark mode for Git GUI ? No, I am not asking for ways to edit those .tcl files. I tried that. Got myself comfortable with the whole page. But still, the menu bar and the window title bar remain white. And that frustates me a bit.

I have searched in Github Issues and Google Groups for the keyword dark but got no results I hoped so I'm posting this.

I'm a JS developer. But, I know a little bit of TCL and Tk and happily customised the About page like this. So, I think I can help. Just give me the Ok and I will go ahead.

[Sashank999]

Original issue here git-for-windows/git#3433 .

[Sashank999]

Discussion happening in Git Mailing List here: https://marc.info/?l=git&m=163266898221849&w=2 .

[birgersp]

Hey @Sashank999 ,

I tried replying to you in the git mailing list but I think gmail is messing it up so I'll write here instead.

First of all just a BIG +1 to this issue. I'm on windows and opening git-gui sometimes literally hurts my eyes. I even noticed I've started squinting a little before opening it, then I move it to my side monitor and open my IDE (which ofc is dark theme) on my main.

Secondly, I would really appreciate it if you could explain how you managed to make git-gui look like that (referring to your screenshot, below).

What do I need to do, exactly?

And how (if anything) can I help out with this issue? I want dark theme as soon as possible <3

Your screenshot:

[prati0100]

@birgersp You need to set the Tcl/Tk theme and make sure gui.usettk config is true. I am not quite sure how to set the Tk theme on windows though. It is hard enough on Linux, and for that you need to play around with X server settings.

If you are willing to run a custom build, you can try this patch: https://lore.kernel.org/all/20211006180348.22e5c2z4pqkwtokx@yadavpratyush.com/ it adds a menu in the options dialog to choose the theme.

[birgersp]

@prati0100 thanks. I tried the patch to get the menu, but none of the selectable themes actually makes git-gui dark. They look different but all the themes are light.

(btw if my workplace let me use Linux I definitely would)

[prati0100]

@birgersp Then it looks like you don't have a dark theme installed. See https://wiki.tcl-lang.org/page/List+of+ttk+Themes.

You need to source the theme file. Placing it in the lib/ directory should do the trick I think, but I haven't tried that out myself.

[birgersp]

Okay. Trying to get this to work but I'm a little lost.

But perhaps more on topic: what about getting a dark theme installed (packed) with the git-gui for windows installation? How would that work? Would that be something to implement here (in this repo), or in git-for-windows?

[prati0100]

@birgersp That is what I suggested @Sashank999 should do. I think Tk theming is very difficult to set up for the average user and we should start shipping themes with the git-gui repo. I didn't see any patches though. I also didn't get time myself to do this.

[birgersp]

@prati0100 so where does this issue belong? Here, or in the git-for-windows project (i.e. repo)?

[prati0100]

@birgersp It should belong here.

[birgersp]

Okay, thanks! I'll try to contribute this weekend

[Sashank999]

@birgersp I'm really sorry. I check Gmail really often so I missed it. As I said in the mailing list, I'm working on making the title bar black on Windows. There is a way to make the content black on the mailing list itself. Check it out: https://marc.info/?l=git&m=164010323505120&w=2 .

[birgersp]

So if I'm not mistaken this is the code as it should be copy-pasted into the console.

ttk::style theme use default
ttk::style configure TFrame -background #333
ttk::style configure TLabelframe -background #333
ttk::style configure TLabelframe.Label -background #333 -foreground #fff
ttk::style configure TPanedwindow  -background #333
ttk::style configure EntryFrame -background #333
ttk::style configure TScrollbar -background #666 -troughcolor #444 -arrowcolor #fff -arrowsize 15
ttk::style map TScrollbar -background [list active #333 disabled #000]
ttk::style configure TLabel -background #333 -foreground #fff
ttk::style configure TButton -background #333 -foreground #fff -borderwidth 2 -bordercolor #fff
ttk::style map TButton -background [list active #555 disabled #111 readonly #000]
ttk::style configure TCheckbutton -background #333 -foreground #fff -indicatorbackground #666 -indicatorcolor #fff
ttk::style map TCheckbutton -background [list active #555 disabled #111 readonly #000]
ttk::style configure TEntry -fieldbackground #333 -background #333 -foreground #fff -insertcolor #fff
ttk::style configure TRadiobutton -background #333 -foreground #fff
ttk::style map TRadiobutton -background [list active #555 disabled #111 readonly #000]
option add *TCombobox*Listbox.background #333 interactive
option add *TCombobox*Listbox.foreground #fff interactive
option add *TCombobox*Listbox.selectBackground blue interactive
option add *TCombobox*Listbox.selectForeground #fff interactive
option add *Listbox.Background #333 interactive
option add *Listbox.Foreground #fff interactive
option add *Text.Background #333 interactive
option add *Text.Foreground #fff interactive
ttk::style configure TSpinbox -fieldbackground #333 -background #333 -foreground #fff -insertcolor #fff -arrowcolor #fff \
    .vpane.lower.commarea.buffer.frame.t \
    configure -background #0d1117 -foreground #fff -insertbackground #fff \
    .vpane.lower.diff.body.t configure -background #0d1117 -foreground #fff \
    .vpane.files.workdir.list configure -background #0d1117 -foreground #fff \
    .vpane.files.index.list configure -background #0d1117 -foreground #fff \
    .about_dialog.git_logo configure -background #333

So for anyone that wants this changed look for git-gui on Windows here what you can do:

1. Open the file C:\Program Files\Git\mingw64\libexec\git-core\git-gui.tcl (you need to be admin to edit this file)
2. At line 869, just after the pave_toplevel . line you add the code from @Sashank999 (the code at the top of this comment).

It's hacky, but at least git-gui no longer burns my eyes.

[birgersp]

How can we change the color of the white border/outline of frames?

I tried this but it didn't change anything:

ttk::style configure TFrame -background #333 -bordercolor #333

[Sashank999]

How can we change the color of the white border/outline of frames?

I tried this but it didn't change anything:

ttk::style configure TFrame -background #333 -bordercolor #333

@birgersp

Thanks to: https://stackoverflow.com/a/57528809 .

These lines of code should be enough for Unstaged Files, Staged Files, Diff Area and Commit Message Buffer: .vpane.files.index.list configure -background #333 -highlightbackground #333 -highlightthickness 1 .vpane.files.workdir.list configure -background #333 -highlightbackground #333 -highlightthickness 1 .vpane.lower.diff.body.t configure -background #333 -highlightbackground #333 -highlightthickness 1 .vpane.lower.commarea.buffer.frame.t configure -background #333 -highlightbackground #333 -highlightthickness 1

From this to this: .

[birgersp]

Where do I put this code?

[Sashank999]

Where do I put this code?

After the selection of repository. In git-gui.tcl, line 3486. .

[birgersp]

There seems to be a problem with this line:

.vpane.lower.diff.body.t configure -background #333 -highlightbackground #333 -highlightthickness 1

EDIT: Yeah it seems line 3486 is too soon for that command. I added them to 3961 (probably not the same line as it would be for others, but heres a screenshot)

[Sashank999]

There seems to be a problem with this line:

.vpane.lower.diff.body.t configure -background #333 -highlightbackground #333 -highlightthickness 1

I actually didn't test the location but I did test the code. If it works, thats great.

[jcummings2]

The additions neatly formatted with detailed instructions by @birgersp above worked for me at the location indicated. Since I did a local install, my git-gui.tcl file was located in %userprofile%\AppData\Local\Programs\Git\mingw64\libexec\git-core instead of C:\Program Files\Git\mingw64\libexec\git-core.

The additions to change the border/outline originally mentioned by @Sashank999 above work. As @birgersp said, however, they needed to be just before the "Load window state" comment further down in the file. Here are the lines reformatted into one block for easier copying:

.vpane.files.index.list configure -background #333 -highlightbackground #333 -highlightthickness 1
.vpane.files.workdir.list configure -background #333 -highlightbackground #333 -highlightthickness 1
.vpane.lower.diff.body.t configure -background #333 -highlightbackground #333 -highlightthickness 1
.vpane.lower.commarea.buffer.frame.t configure -background #333 -highlightbackground #333 -highlightthickness 1

Although personally I don't mind the white border/outline of the frames. I actually would like the overall window to have one as so many dark themed windows simply blend into one another when they overlap such that I can't tell which window is which.

[macks2008]

thank you all you beautiful people, with the help of your comments thus far, I got both of the provided patches working on my instance. While I wouldn't say the default light theme was burning my eyes (...literally, anyway. I do think it's an apt hyperbole), it was certainly proving to be adverse enough to their proper functioning that I was having trouble focusing on GIT GUI when darker windows, especially with text (like my IDE) were behind it. I don't know anything about Tck/tk, and I'm not a very effective programmer on the whole yet (as you can see from the few repositories that are public on my account vs. the many I've hidden out of shame. Though at times I wonder if impostor syndrome is contributing), so in place of contributing code to resolve this issue officially, I'll just have to settle for urging anyone capable to work on this issue. On top of basic functionality, it would be very nice if you could also get it to reflect the OS's light/dark appearance?

[hadrianhu888]

In the most recent 2.45.1 of git scm, to get dark theme add the modified lines after line 882:

[domWalters]

I tried to get a tokyonight style scheme working in git-gui and have gotten to this so far:

Things I haven't worked out or tried to do yet:

• Changed the green, red, and yellow to the right shades.
• Remove the remaining border around the diff box.
• Remove the borders on the menu bar and the menu item categories.
• Fix the initial highlight from being grey.

---

Update 1:

Worked out how to change the bar colours.

At the location mentioned in this comment you can edit the following:

• .vpane.files.index.title
• .vpane.files.workdir.title
• .vpane.lower.diff.header.status
• .vpane.lower.diff.header.file
• .vpane.lower.diff.header.path

And for the menu bar buttons:

• .mbar
• .mbar.repository
• .mbar.edit
• .mbar.branch
• .mbar.commit
• .mbar.merge
• .mbar.remote
• .mbar.tools
• .mbar.help

[domWalters]

I've made a public repository for this config: https://github.com/domWalters/git-gui-tokyonight

There is an issue that gives rough install instructions, but it will require some understanding of the content of this thread.