Skip to content

Theming

Jump to bottom
Tittu edited this page Feb 26, 2024 · 12 revisions




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


Clone this wiki locally