Skip to content

Theming

Jump to bottom
Khing edited this page Aug 4, 2024 · 12 revisions




🚧 This Wiki is outdated. 🚧

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

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

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, so no configuration is required


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 from local directory:

cd ~/HyDE/Scripts # HyDE 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 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"
Clone this wiki locally