Basic Dark Mode Theme

Discussions about research, Faceswapping and things that don't fit in the other categories here.


Locked
User avatar
couleurs
Posts: 9
Joined: Fri Jan 13, 2023 3:09 am
Has thanked: 10 times
Been thanked: 6 times

Basic Dark Mode Theme

Post by couleurs »

I was also looking for a dark mode like this post

I don't know Python/Tk very well but I was able to hack together a nowhere-near-perfect-but-satisfactory dark theme for myself, and I figured it might be of interest to other users. Screenshot of the theme:

darkmode.jpg
darkmode.jpg (203.21 KiB) Viewed 4191 times

Installation is a bit tricky since it involves modifying some of the actual python code, but shouldn't be an issue if you follow this procedure exactly:

  1. Back up your old default.json in {faceswap directory}/lib/gui/.cache/themes

  2. Download this theme file (would have attached it but can't upload .json here) and save it to
    {faceswap directory}/lib/gui/.cache/themes/default.json

  3. Add this snippet in {faceswap directory}/lib/gui/theme.py at the end of the _set_styles function
    (note that in python indentation matters, make sure you match the indentation level of the rest of the code in the function when pasting in)

    Code: Select all

    ### 
    # BEGIN couleurs' hacky theme
    ###
        cht_background = "#161412"
        cht_text = "#EAE0D5"
        cht_accent = "#22333B"
    
        self._style.configure("Treeview", 
                              background=cht_background, 
                              fieldbackground=cht_background, 
                              foreground=cht_text)
        self._style.configure("TFrame",
                              background=cht_background,
                              foreground=cht_text)
        self._style.configure("TLabel",
                              background=cht_accent,
                              foreground=cht_text)
        self._style.configure("TCheckbutton",
                              background=cht_background,
                              foreground=cht_text)
        self._style.configure("TCombobox",
                              background=cht_background,
                              foreground=cht_text,
                              selectforeground=cht_text,
                              selectbackground=cht_background)
    ###
    # END couleurs' hacky theme
    ###
    
  4. To fix the settings window menu, in {faceswap directory}/lib/gui/popup_configure.py, replace this part in the _build_tree function

    Code: Select all

            tree.tag_configure('category', background='#DFDFDF')
            tree.tag_configure('section', background='#E8E8E8')
            tree.tag_configure('option', background='#F0F0F0')
    

    with

    Code: Select all

            tree.tag_configure('category', background='#161412')
            tree.tag_configure('section', background='#2a2724')
            tree.tag_configure('option', background='#3a3734')
    
  5. Optionally, to make the graph also 'dark mode', in {faceswap directory}/lib/gui/display_graph.py change line 46

    Code: Select all

    style.use("ggplot")

    to

    Code: Select all

    style.use("dark_background")

Eventually I hope to do this 'properly' and match the rest of the theming convention in the app and submit a PR, but for now at least this kludge lets our eyes take a bit of a break :)

I haven't tested this super extensively but so far so good - would love your feedback!
I'll update this post as I make improvements to the theme.

User avatar
torzdf
Posts: 2649
Joined: Fri Jul 12, 2019 12:53 am
Answers: 159
Has thanked: 128 times
Been thanked: 622 times

Re: Basic Dark Mode Theme

Post by torzdf »

As you found, I did start to make configuration for themes, but tkinter is quite fiddly in some areas (some parts are easy to theme, others just want to stay at stock OS colours), so I abandoned it for other priorities.

If you do make more progress on this though, I would be more than happy to add it to the code or help work towards a PR..

My word is final

User avatar
MaxHunter
Posts: 193
Joined: Thu May 26, 2022 6:02 am
Has thanked: 176 times
Been thanked: 13 times

Re: Basic Dark Mode Theme

Post by MaxHunter »

I like it! Very cool!

Locked