Theming

To create a custom theme, create a folder in: ${KlipperScreen_Directory}/styles/

The folder name will be the theme name, in that folder create another folder named images this is where the icons should be placed. The icons must be SVG files and they need to have specific names that are defined in the code, use the default theme as a reference for the names or check the code.

To edit colors and styles, create a css file named style.css you can use the contents of another theme as a reference.

Example 1

cd ~/KlipperScreen/styles
mkdir -p mytheme/images
cd mytheme
cp ../z-bolt/images/* images/
echo "window { background-color: red;}" > style.css
sudo service KlipperScreen restart

At this point mytheme should be on the list of themes, and when you select it the background should be red.

Example 2

Creating a custom background from Mainsail sidebar and this css using Z-bolt icons

window { background-image: url("/home/pi/mainsail/img/background.svg");}
button {background-color: rgba(0,0,0,0); border-radius:2em;}