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

~
|⟼ /.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

# 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!

# 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,
  • just copy the qt5ct config file for your theme to qt6ct/colors

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

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

# 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.

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

refer this file and modify the color codes as required

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

refer this file and modify the color codes as required

# 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

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

refer this file and modify the color codes as required

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

For wlogout, it imports the same colors from waybar, so no configuration is required

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!

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.

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

Execute themepatcher as below to patch it from local directory:

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

you can follow this repo structure or fork it

Execute themepatcher as below to patch it from git repo:

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