Themes

Note

Theming support has been added with 2.1.0, older versions do not support this

Using Themes

Every theme consists of one .tar file, place this file (without extracting it) in the theme directory in your panels web files (usually /var/www/pufferpanel/) The next time you visit your panel the dark mode button will have turned into a theming button which, when clicked, will bring up both the dark mode switch and all the themes available on your panel

Creating Themes

As mentioned in the previous section, every theme consists of one .tar file, the name of this file is also the name of the theme as displayed on the panel

This .tar file can be created with the command tar -cf <theme name>.tar theme.json theme.css [...]

A theme always needs to contain a theme.json file, in this file you’ll specify the color schemes of your theme for both light and dark mode

Additionally you can include a theme.css which you can use to include custom CSS with which you can take control of the panels looks beyond changing the colors If you want to change the colors of some element using CSS it is advised to use the CSS variables that are automatically generated using the colors in your theme.json

Sometimes you might want to use additional resources like images in your CSS To do so you simply add those resources to the tar file and refer to them in your CSS by their path in the tar file If for example your tar file contains an img directory in which you have a file called bg.png you would refer to this file in your CSS as img/bg.png

The following is an example of a theme.json as it would look for the panels default theme defining all colors used by the panel

{
  "colors": {
    "light": {
      "primary": "#07a7e3",
      "anchor": "#07a7e3",
      "accent": "#65a5f8",
      "info": "#2196f3",
      "success": "#4caf50",
      "warning": "#fb8c00",
      "error": "#ff5252"
    },
    "dark": {
      "primary": "#3b8db8",
      "anchor": "#07a7e3",
      "accent": "#65a5f8",
      "info": "#2196f3",
      "success": "#4caf50",
      "warning": "#fb8c00",
      "error": "#ff5252"
    }
  }
}