Theming

The board has a light and a dark mode, and 17 color themes. Each color theme has a light and a dark variant.

Light and dark

Press T or click the sun or moon button in the header to switch the mode. Until you pick one, the board follows the mode of your system.

Color themes

Click the palette button in the header and pick a theme:

ID	Name
`nord`	Nord (default)
`ember`	Ember
`gruvbox`	Gruvbox
`catppuccin`	Catppuccin
`tokyo-night`	Tokyo Night
`solarized`	Solarized
`dracula`	Dracula
`rose-pine`	Rosé Pine
`everforest`	Everforest
`kanagawa`	Kanagawa
`one-dark`	One Dark
`night-owl`	Night Owl
`monokai`	Monokai Pro
`github`	GitHub
`ayu`	Ayu
`vitesse`	Vitesse
`synthwave`	Synthwave ’84

A color theme changes the background, text, border, and accent colors. Status colors (success, warning, error) stay the same in every theme.

The terminal takes its colors from the theme too. Show and ask cards read the same colors from CSS variables such as --color-bg, --color-text, and --color-accent.

pi’s theme in the board terminal

pi’s system theme follows the board. pi reads the terminal’s colors at start, and the board tells pi each time you change the mode or the color theme. pi redraws at once, with no restart.

system is pi’s default. If your settings name another theme, set it back:

{
  "theme": "system"
}

A light and dark pair, such as "theme": "light/dark", also works: pi switches between the two when you change the mode. A single named theme, such as "theme": "dark", stays the same in both modes.

Terminal font

The terminal uses the board’s monospace font. To use another font, such as a Nerd Font for pi’s icons, set terminal.fontFamily in pi-kanban’s config file and restart the board:

{
  "terminal": {
    "fontFamily": "'MesloLGM Nerd Font', 'Cascadia Mono', monospace"
  }
}

The value is a CSS font list. The browser draws the terminal, so the font must be installed on the computer that runs the browser. The board ignores a value with characters other than letters, digits, spaces, quotes, commas, dots, hyphens and underscores, and prints a warning. Change the size with Ctrl + and Ctrl - in the terminal, and reset it with Ctrl 0.

Where the choice is kept

The board keeps the mode and the color theme in the browser’s local storage (theme and color-theme). Each browser profile keeps its own choice. Nothing is written to disk on the server.