PANELITH DOCS Open the interactive docs ↗

Guide · Panelith 0.1.0 · plain HTML edition; the interactive edition has search and live examples

Theme

On this page 3 sections
  1. Schemes
  2. Tokens
  3. Families

Every colour and size in the shell is a CSS custom property with a --pl- prefix, and the app overrides any of them from Python. There are two colour schemes, dark and light, sharing one stylesheet; the translucent washes and backdrops go through --pl-wash-rgb and --pl-backdrop, so a token override works in both.

Schemes#

Theme(scheme=...) picks the scheme the shell starts in: "dark" (the default), "light", or "auto" to follow the operating system and track its changes. The built-in command Theme: Toggle Light / Dark (app.theme, no hotkey unless the app gives it one) flips the scheme and remembers the visitor's choice per app in local storage, where it wins over Theme.scheme on the next visit.

class Docs(App):
    theme = Theme(scheme="auto")
    builtin_hotkeys = {"app.theme": "t"}      # alt+shift+t
Toggled. These docs start in auto and remember your choice.
class Light(App):
    theme = Theme(scheme="light")

Tokens#

Theme(tokens={...}) overrides any token; the keys are the names without the --pl- prefix. The reference lists every token with its dark and light value.

Token Colours
bg the app background: the gaps between panes; the top bar bleeds into it
pane-bg, pane-border, divider, divider-hover a pane's surface and outline, the resize handles
focus, focus-outline, drop the active command-bar row, the focused pane's outline, a drop target
text, text-dim, white the text colours
accent the one accent: links, active controls, the spotlight ring
ok, warn, bad, danger, collected tones for widget content and destructive affordances
code-bg, code-keyword, code-string, code-number, code-function, code-class, code-comment, code-operator, code-punct, code-decorator fenced code in the markdown widget
family-<id> the four tether families (set through families= instead)
sans, mono the two typefaces
topbar-h, pane-gap, collapsed-px, cmdbar-width sizes 
class Tokens(App):
    theme = Theme(
        tokens={"accent": "#ff7a59", "bg": "#101418", "pane-bg": "#18212b", "pane-border": "#2b3a4a",
                "text": "#e6edf3", "text-dim": "#8aa0b6", "mono": "'JetBrains Mono', Consolas, monospace"},
        families={"independent": "#ff7a59", "problem": "#ffd166", "author": "#06d6a0", "assessment": "#118ab2"},
    )

Families#

A kind's family names a colour used for its glyph, its launcher tile and the tether marks of its children. Four exist by default (independent blue, problem amber, author violet, assessment teal); Theme(families={...}) recolours them or adds names of your own, emitted as --pl-family-<id>.

class Report(Pane):
    family = "assessment"