Skip to content

Wallbash

Skerse edited this page Apr 22, 2024 · 32 revisions




Wallbash

Wallbash is a simple, fast and easy to configure bash script that allows you to extract and apply/sync colors from an image to any application powered by Magick!


wallbash_720p.mp4

Note

wallbash has dependency on :

imagemagick
parallel

Input

Wallbash just requires an image file as input,

# example
# ./swwwallbash.sh "~/.config/swww/Catppuccin-Mocha/rain_world1.png"
./swwwallbash.sh "/path/to/image"

currently supported image file formats are : .gif .jpg .jpeg .png


Output

Output for wallbash is a cached .dcol file with the primary wallpaper colors in #rrggbb format.

# example
# cat $HOME/.cache/hyprdots/Catppuccin-Mocha/rain_world1.png.dcol
cat $HOME/.cache/hyprdots/${theme}/${image}.dcol

Where,

  • ${theme} is the current system theme
  • ${image} is the image file name passed as a parameter

Sample output file generated by wallbash,

❯ cat ~/.cache/hyprdots/Catppuccin-Mocha/rain_world1.png.dcol
dcol_pry1="1B1B29"
dcol_txt1="FFFFFF"
dcol_1xa1="00002E"
dcol_1xa2="020252"
dcol_1xa3="06067A"
dcol_1xa4="0E0E8C"
dcol_1xa5="2424B3"
dcol_1xa6="3D3DCC"
dcol_1xa7="5A5AE0"
dcol_1xa8="9090F0"
dcol_1xa9="C0C0FC"
dcol_pry2="272E3C"
dcol_txt2="FFFFFF"
dcol_2xa1="00102E"
dcol_2xa2="021D52"
dcol_2xa3="062D7A"
dcol_2xa4="0E388C"
dcol_2xa5="2453B3"
dcol_2xa6="3D6DCC"
dcol_2xa7="5A87E0"
dcol_2xa8="90B0F0"
dcol_2xa9="C0D4FC"
dcol_pry3="2D4E5C"
dcol_txt3="FFFFFF"
dcol_3xa1="00202E"
dcol_3xa2="023A52"
dcol_3xa3="06587A"
dcol_3xa4="0E678C"
dcol_3xa5="2488B3"
dcol_3xa6="3DA1CC"
dcol_3xa7="5AB8E0"
dcol_3xa8="90D3F0"
dcol_3xa9="C0EAFC"
dcol_pry4="974C4E"
dcol_txt4="FFFFFF"
dcol_4xa1="2E0002"
dcol_4xa2="520205"
dcol_4xa3="7A0609"
dcol_4xa4="8C0E11"
dcol_4xa5="B32428"
dcol_4xa6="CC3D41"
dcol_4xa7="E05A5D"
dcol_4xa8="F09092"
dcol_4xa9="FCC0C1"

Color Variables

Wallbash extracts 4 primary/dominant colors from the input image, 4 text colors and 9 accent colors for each primary color.

Tip

The colors switch between light/dark based on brightness of image, they are also sorted based on it.

Here are the wallbash variables that can be used in your application config file.

Important

To use colors in rgba format, the transparency layer/alpha value is required. for example if you want to use primary color 1 at 50% transparency then wallbash_pry1_rgba(0.5) will reformat the color as rgba(red,green,blue,0.5).

color group 1
<wallbash_pry1> <wallbash_pry1_rgba(1)> primary color 1
<wallbash_txt1> <wallbash_txt1_rgba(1)> text color 1
<wallbash_1xa1> <wallbash_1xa1_rgba(1)> accent color 1
<wallbash_1xa2> <wallbash_1xa2_rgba(1)> accent color 2
<wallbash_1xa3> <wallbash_1xa3_rgba(1)> accent color 3
<wallbash_1xa4> <wallbash_1xa4_rgba(1)> accent color 4
<wallbash_1xa5> <wallbash_1xa5_rgba(1)> accent color 5
<wallbash_1xa6> <wallbash_1xa6_rgba(1)> accent color 6
<wallbash_1xa7> <wallbash_1xa7_rgba(1)> accent color 7
<wallbash_1xa8> <wallbash_1xa8_rgba(1)> accent color 8
<wallbash_1xa9> <wallbash_1xa9_rgba(1)> accent color 9
color group 2
<wallbash_pry2> <wallbash_pry2_rgba(1)> primary color 2
<wallbash_txt2> <wallbash_txt2_rgba(1)> text color 2
<wallbash_2xa1> <wallbash_2xa1_rgba(1)> accent color 1
<wallbash_2xa2> <wallbash_2xa2_rgba(1)> accent color 2
<wallbash_2xa3> <wallbash_2xa3_rgba(1)> accent color 3
<wallbash_2xa4> <wallbash_2xa4_rgba(1)> accent color 4
<wallbash_2xa5> <wallbash_2xa5_rgba(1)> accent color 5
<wallbash_2xa6> <wallbash_2xa6_rgba(1)> accent color 6
<wallbash_2xa7> <wallbash_2xa7_rgba(1)> accent color 7
<wallbash_2xa8> <wallbash_2xa8_rgba(1)> accent color 8
<wallbash_2xa9> <wallbash_2xa9_rgba(1)> accent color 9
color group 3
<wallbash_pry3> <wallbash_pry3_rgba(1)> primary color 3
<wallbash_txt3> <wallbash_txt3_rgba(1)> text color 3
<wallbash_3xa1> <wallbash_3xa1_rgba(1)> accent color 1
<wallbash_3xa2> <wallbash_3xa2_rgba(1)> accent color 2
<wallbash_3xa3> <wallbash_3xa3_rgba(1)> accent color 3
<wallbash_3xa4> <wallbash_3xa4_rgba(1)> accent color 4
<wallbash_3xa5> <wallbash_3xa5_rgba(1)> accent color 5
<wallbash_3xa6> <wallbash_3xa6_rgba(1)> accent color 6
<wallbash_3xa7> <wallbash_3xa7_rgba(1)> accent color 7
<wallbash_3xa8> <wallbash_3xa8_rgba(1)> accent color 8
<wallbash_3xa9> <wallbash_3xa9_rgba(1)> accent color 9
color group 4
<wallbash_pry4> <wallbash_pry4_rgba(1)> primary color 4
<wallbash_txt4> <wallbash_txt4_rgba(1)> text color 4
<wallbash_4xa1> <wallbash_4xa1_rgba(1)> accent color 1
<wallbash_4xa2> <wallbash_4xa2_rgba(1)> accent color 2
<wallbash_4xa3> <wallbash_4xa3_rgba(1)> accent color 3
<wallbash_4xa4> <wallbash_4xa4_rgba(1)> accent color 4
<wallbash_4xa5> <wallbash_4xa5_rgba(1)> accent color 5
<wallbash_4xa6> <wallbash_4xa6_rgba(1)> accent color 6
<wallbash_4xa7> <wallbash_4xa7_rgba(1)> accent color 7
<wallbash_4xa8> <wallbash_4xa8_rgba(1)> accent color 8
<wallbash_4xa9> <wallbash_4xa9_rgba(1)> accent color 9

Application Integration

Integrate your favorite application to wallbash in just 3 steps :  123


// Step 1

Identify Config

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

❯ cat ~/.config/kitty/kitty.conf
font_family      CaskaydiaCove Nerd Font Mono
bold_font        auto
italic_font      auto
bold_italic_font auto

font_size 9.0
window_padding_width 25
include themes/theme.conf

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

❯ cat ~/.config/kitty/themes/theme.conf
foreground         #E7E2C5
background         #181D3A

// Step 2

Create Template

Follow the application config file and create a template as ~/.config/hyprdots/wallbash/<template_name>.dcol. In this template.dcol replace the hard-coded color codes with wallbash color variables as you see fit.

Tip

wallbash only reads files with .dcol extension from ~/.config/hyprdots/wallbash/ path, so you can disable wallbash for a specific application by renaming its corresponding .dcol file.

Then add a pipe | delimited header line (line 1) to template.dcol as,

<path/to/target/config>|<post deploy command or script>

This line informs wallbash to deploy the template.dcol file to the target path (column 1) with wallbash colors and then execute an optional post deployment command/script (column 2).
So for kitty, the template file will look like,

❯ cat ~/.config/hyprdots/wallbash/kitty.dcol
$HOME/.config/kitty/themes/theme.conf|killall -SIGUSR1 kitty
foreground         #<wallbash_txt0>
background         #<wallbash_pry0>

// 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 can integrate your script with ${EnableWallDcol} global variable to toggle the wallbash colors on/off on the fly!

Note

For consistency, please use the common script path ~/.config/hyprdots/scripts/ for your wallbash scripts, also prefix wallbash to the script name, ex. ~/.config/hyprdots/scripts/wallbashkitty.sh

Please refer to the existing wallbash* scripts from here for more ideas.


Current Status

Warning

Using very dark or low contrast image might affect readability in some applications

Category Application Theme Color Wall Color Comment
ide code   themes by extensions (pending wallbash integration)
notification dunst   wallbash only
gtk gtk2   theme only (pending wallbash integration)
gtk gtk3   theme only (pending wallbash integration)
gtk gtk4   theme only (pending wallbash integration)
WM hypr full theme/wallbash support
terminal kitty full theme/wallbash support
qt kvantum full theme/wallbash support
qt qt5ct ✔  full theme/wallbash support
qt qt6ct full theme/wallbash support
launcher rofi full theme/wallbash support
bar waybar full theme/wallbash support
logout wlogout full theme/wallbash support
extra cava   wallbash only
extra spotify   wallbash only
extra discord wallbash only
extra steamgui none (pending wallbash integration)