This is an easy online application to create KlipperScreen custom themes. Using the color picker buttons below you can modify the KlipperScreen style.css file and upload it to your Klipper install. Clicking the Download button will download the file contents of the box in a file named style.css for use in your theme.

This is my first version of this tool and it is rudimentary and for basic color theming. Future iterations will allow for more distinct color control. But fear not, you can simply change the hex colors in the css file itself to get more fine control.

Tips

  1. The CSS file is generated from a template, when you select a color change that template is loaded. If you want to edit more than the main colors, you can do so by editing the CSS in the text box, then clicking download. If you change a color, a new template is loaded and any changes you made in the CSS text box will be lost. Future versions will address this issue.
  2. TFT screens do not have very rich colors. Opt to use bright colors so they are more visible on the TFT screen. It is best to upload your style.css file and test it on the machine after you change colors.
  3. In order to see your changes, you will need to restart the machine or switch from the current theme to another in order to load the new styles and Icons.
  4. IMPORTANT: Any malformed CSS will crash Klipper. If you see a screen of command line text and it flashes on and off, it probably means there is an error in the CSS file, even one character that doesn't belong will cause this error. Klipper will not load on KlipperScreen and you will see the login prompt and text flashing on and off.

KlipperScreen CSS Editor