Theming and Icons

Light and dark

MainWindow.set_theme("dark") (or "light") sets data-wapyt-theme on <html>. Layouts, tabs, forms, tables, trees, modals and card panels follow it. Chat has its own ChatConfig(theme=...) and chat.set_theme().

Font

Layouts and modals take their typeface from the --wapyt-font-family custom property, a system-UI stack by default. They do not inherit from body, so change it on :root:

style = js.document.createElement("style")
style.textContent = ':root { --wapyt-font-family: "Inter", system-ui, sans-serif; }'
js.document.head.appendChild(style)

Forms, tables, trees, the context menus, Chat and CardPanel still set their own system-ui stack and ignore the property.

Colours

wapyt.css defines --wapyt-bg, --wapyt-surface, --wapyt-text, --wapyt-border, --wapyt-divider (separators) and -dark variants. Coverage is uneven: Chat uses its own palette (Sidebar moved onto the tokens on 2026-10-06), and CardPanel and ResourceBoard keep private variable sets. Unifying them is on the Roadmap.

Icons

Use Material Design Icons classes: icon="mdi-server" (or "mdi mdi-server"). pyTincture serves MDI from its own origin on every page. Material Symbols names such as "dashboard" or "settings" are mapped onto MDI by wapyt.icons; an unmapped name falls back to a small dot.

Never add a ligature icon font (a Material Icons or Material Symbols <link>). pyTincture's CSP blocks the stylesheet, and the icon spans then typeset their names as text, so buttons overlap one another.

To add a name mapping, add a LIGATURE_TO_MDI entry in assets/icons.js and check the MDI class exists (see Development).