Theming

Theme Structure

To create/add new theme (for ex. Synth-Wave), here are the files required to theme the base applications

Important

The theme name Synth-Wave should be consistent for all config file name

~
|⟼ /.config/
|    |
|    |⟼ hypr/themes/
|    |       ⮡ Synth-Wave.conf
|    |
|    |⟼ kitty/themes/
|    |       ⮡ Synth-Wave.conf
|    |
|    |⟼ Kvantum/Synth-Wave/
|    |       ⮡ Synth-Wave.kvconfig
|    |       ⮡ Synth-Wave.svg
|    |
|    |⟼ qt5ct/colors/
|    |       ⮡ Synth-Wave.conf
|    |
|    |⟼ qt6ct/colors/
|    |       ⮡ Synth-Wave.conf
|    |
|    |⟼ rofi/themes/
|    |       ⮡ Synth-Wave.rasi
|    |
|    |⟼ swww/
|    |       ⮡ Synth-Wave/*               # place wallpapers here
|    |
|    |⟼ waybar/themes/
|            ⮡ Synth-Wave.css
| 
|⟼ /.icons/
|       ⮡ <icon-pack>/                    # for icons
|       ⮡ <cursor-pack>/                  # for cursors
| 
|⟼ /.themes/
        ⮡ Synth-Wave/                     # main theme for GTK apps

Theming Applications

 
gtk apps

    
qt apps

   
flatpak

   
hypr 

   
kitty 

   
rofi 

   
walls 

   
waybar 

   
wlogout 

 

Tip

Please keep the color palette for your theme consistent across all the config files

GTK apps

# target files
~/.themes/Synth-Wave/

Most applications like firefox follows GTK system theme.
Download GTK3/4 theme pack and extract it to ~/.themes/.
Themes are available in https://www.gnome-look.org/browse?cat=135&ord=rating.
You can also make your own gtk theme if you have time!

QT apps

# target files
~/.config/Kvantum/Synth-Wave/Synth-Wave.kvconfig
~/.config/Kvantum/Synth-Wave/Synth-Wave.svg
~/.config/qt5ct/colors/Synth-Wave.conf
~/.config/qt6ct/colors/Synth-Wave.conf

Theming for QT applications are handled by kvantum, qt5ct and qt6ct

• for kvantum,
  • refer this file and modify the color codes as required
  • refer this file and modify the color codes as required using a vector tool like inkscape
• for qt5 apps the colors and kvantum theme is applied by qt5ct,
  • refer this file and modify the color codes as required
• for qt6 apps the colors and kvantum theme is applied by qt6ct,
  • this is just a copy of qt5ct conf file

Flatpaks

# target files
~/.themes/Synth-Wave/

Flatpaks GTK apps automatically follows the GTK3/4 system theme, so no configuration is required.

Note

Flatpak QT apps currently does not support theming

Hypr

# target files
~/.themes/Synth-Wave/
~/.icons/<icon-pack-name>
~/.icons/<cursor-pack-name>
~/.config/hypr/themes/Synth-Wave.conf

Refer this file and set the following in ~/.config/hypr/themes/Synth-Wave.conf

• set gtk theme as exec = gsettings set org.gnome.desktop.interface icon-theme 'Synth-Wave'
• set icons as exec = gsettings set org.gnome.desktop.interface icon-theme '<icon-pack-name>'
• set cursor as exec = gsettings set org.gnome.desktop.interface cursor-theme '<cursor-pack-name>'
• modify the window properties like gaps, border colors, shadows, rounding, blur etc.

Kitty

# target files
~/.config/kitty/themes/Synth-Wave.conf

refer this file and modify the color codes as required

Rofi

# target files
~/.config/kitty/themes/Synth-Wave.conf

refer this file and modify the color codes as required

Wallpapers

# target files
~/.config/swww/Synth-Wave/

Place all wallpapers that fits the theme in ~/.config/swww/Synth-Wave/* directory
Currently *.gif, *.jpg, *.jpeg, *.png image formats are supported

Waybar

# target files
~/.config/waybar/themes/Synth-Wave.css

refer this file and modify the color codes as required

Wlogout

# target files
~/.config/waybar/themes/Synth-Wave.css

For wlogout, it imports the same colors from waybar

Activating Theme

Once you have the config files in place for all the applications, add an entry to theme control file as below,

0|Synth-Wave|robbowen.synthwave-vscode~SynthWave '84|~/.config/swww/Synth-Wave/beach.jpg

here the theme.ctl file is a | delimited file where column

• 1 indicates current theme in use
• 2 is the theme name
• 3 is vscode extension name and theme in <extension name>~<theme name> format
• 4 is the /path/to/theme/wallpaper

The theme switcher ( super + shift + T ) should now show your new theme in the menu, just select it to apply!

Theme Patcher

Once you have the config files for all the applications ready, you can either place them in a local directory or maintain it in a git repo.

themepatcher_720p.mp4

Local Structure

Create a local directory for example $HOME/Patch and structure it as below

Execute themepatcher as below to patch it,

cd ~/Hyprdots/Scripts # hyprdots clone directory
./themepatcher.sh "Synth-Wave" "$HOME/Patch/Synth-Wave" "robbowen.synthwave-vscode~SynthWave '84"

Git Structure

you can follow this repo structure or fork it

          

Execute themepatcher as below to patch it,

cd ~/Hyprdots/Scripts # hyprdots clone directory
./themepatcher.sh "Synth-Wave" "https:/prasanthrangan/hyprdots-mod/tree/Synth-Wave" "robbowen.synthwave-vscode~SynthWave '84"