Page 1 of 1

Basic Dark Mode Theme

Posted: Fri Jan 27, 2023 6:32 pm
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 6966 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.


Re: Basic Dark Mode Theme

Posted: Fri Jan 27, 2023 6:36 pm
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..


Re: Basic Dark Mode Theme

Posted: Fri Jan 27, 2023 8:30 pm
by MaxHunter

I like it! Very cool!