Theming

Color Palette

wallbash generates a color palette from your wallpaper based on Material Design guidelines. The theming system lets you use these dynamic colors to theme any text-based configuration file on your system.

Important

The palette switches between light/dark based on the brightness of your wallpaper.

Color Variables

Here are the 28 color variables grouped based on its role, that can be used in your application config files. These variables will adapt to colors in HEX format [::...::] → #RRGGBB. For more details on roles and how to use it, please refer material design guide here.

4 Primary Colors

[::Primary::] Main accent color [::On Primary::] Text/icons on primary [::Primary Container::] Primary variant for surfaces [::On Primary Container::] Text on primary container

4 Secondary Colors

[::Secondary::] Secondary accent [::On Secondary::] Text on secondary [::Secondary Container::] Secondary variant [::On Secondary Container::] Text on secondary container

4 Tertiary Colors

[::Tertiary::] Tertiary accent [::On Tertiary::] Text on tertiary [::Tertiary Container::] Tertiary variant [::On Tertiary Container::] Text on tertiary container

4 Error Colors

[::Error::] Error color [::On Error::] Text on error [::Error Container::] Error variant [::On Error Container::] Text on error container

7 Surface Colors

[::Surface::] Main background [::On Surface::] Text/icons on surface [::Surface Variant::] Alternate background [::On Surface Variant::] Text on variant [::Outline::] Borders/dividers [::Outline Variant::] Alternative borders [::Shadow::] Shadow color

2 Background Colors

[::Background::] Background surface [::On Background::] Text on background

3 Inverse Colors

[::Inverse Surface::] Inverted surface [::Inverse On Surface::] Text on inverse surface [::Inverse Primary::] Inverted primary

Color Formats

Each color variable supports alpha values (transparency) in 2 different formats.

HEX Format: use values from 0 to 100 (percentage)

[::Primary::50::] #C6BDFF80 50% opacity [::Primary::85::] #C6BDFFD9 85% opacity

RGBA Format: use values from 0.0 to 1.0 (decimal)

[::Primary::0.5::] rgba(198,189,255,0.50) 50% opacity [::Primary::0.85::] rgba(198,189,255,0.85) 85% opacity

Application Integration

Integrate your favorite application to wallbash in just 3 steps :  1 2 3

// Step 1

Identify Config

Identify the config file that applies colors to your application. For example consider kitty, its using ~/.config/kitty/kitty.conf file.

font_family      CaskaydiaCove Nerd Font Mono
bold_font        auto
italic_font      auto
bold_italic_font auto
font_size        9.0
include          theme.conf

Here you can identify the colors codes for kitty in ~/.config/kitty/theme.conf file.

foreground   #E7E2C5
background   #181D3A

// Step 2

Create Template

Copy the application config file to create a template .t2 file.

cp ~/.config/kitty/theme.conf ~/.config/wallbash/kitty.t2 

Tip

wallbash does a recursive scan for *.t2 files in $XDG_CONFIG_HOME/wallbash directory.

Then replace the hard-coded colors with wallbash variables as you see fit.

background   [::Surface::]
foreground   [::On Surface::]

Finally, add a pipe delimited header line (line 1) to the template file, that provides runtime parameters.

Important

[::HyDE::]|path/to/target/config|post deploy command or script

• 1 static tag [::HyDE::] - mandatory for template validation
• 2 target file path - mandatory to deploy the resolved content, skip if target file does not exist
• 3 post deployment command or script - optional for advanced actions

Your wallbash template file ~/.config/wallbash/kitty.t2 is now ready!

[::HyDE::]|$HOME/.config/kitty/themes/theme.conf|killall -SIGUSR1 kitty
background   [::Surface::]
foreground   [::On Surface::]

// Step 3

Advanced Scripts ^(optional)

You can develop your own post deploy script if you want wallbash to execute any complex actions.

For example, you could create a script that:

• Restarts multiple applications at once
• Sends notifications
• Reloads your compositor

Warning

Using heavy post deployment scripts will affect performance.