Themes
Themes are standalone stylesheets that re-point semantic channels, component slots, and utility tokens at different palette tokens. A themed screen still renders through its device mode: dither patterns on 1-bit, palette images on limited color, solids on full color.
Usage
Each theme ships as a standalone stylesheet alongside plugins.css.
Include the theme file and add screen--theme-<id> to your screen element.
Themes remap which tokens paint each surface; the screen's device mode (bit depth, palette)
still decides how those tokens render: dither patterns on 1-bit, solids on full color.
Themes are light/dark agnostic: a theme is a complete color statement, so
screen--dark-mode has no effect on a themed screen.
A theme that wants a dark variant can style
.screen--theme-<id>.screen--dark-mode in its own stylesheet.
Monochrome plugin icons follow the theme automatically when they carry the
image--adaptive class. See
Image
Image
Optimize images using dithering techniques for 1-bit rendering
Place images on a screen and control their size, object fit, and inversion. On 1-bit displays, dithering arranges black and white pixels so an image still reads as shades of gray.
.
<link rel="stylesheet" href="plugins.css">
<link rel="stylesheet" href="themes/black-and-yellow-theme.css">
<div class="screen screen--theme-black-and-yellow">...</div>To preview any docs example with a theme, pick a Style in the screen picker. It applies to every example on the page and persists across pages.
Available Themes
The framework ships these themes. Apply one in your own markup with its
screen--theme-<id> class:
- Black and Yellow:
screen--theme-black-and-yellow - Dark:
screen--theme-dark - White and Red:
screen--theme-white-and-red
Dark is how you render a plugin dark. Add
screen--theme-dark to the screen element
and every surface recolors through the slot system, the same mechanism the other themes use.
The plugin's own markup stays as written.
To see them in action, open the screen picker (top right) and choose a Style. The example below carries no theme of its own, so it follows both the device mode and the Style you select, exactly as your plugin would on a themed screen.
Dunder Mifflin
Sales
Themes in JavaScript
Themes never ship JavaScript. A theme is only CSS, and that CSS is the single source of truth, so a theme is readable from JS without any extra authoring:
-
TRMNLPaint: resolves every color and tile pattern straight from the live cascade, so charts and other JS-driven visuals follow the active theme. -
TRMNLPaint.cssVar(): reads back the public--*custom properties a theme publishes on the screen. This is the documented extension path for a theme that wants to expose its own values to plugin code, and it needs no framework changes.
See Paint API Paint API TRMNLPaint: read the live CSS cascade from JavaScript to resolve framework colors and tile patterns TRMNLPaint is the framework's public JavaScript paint API. It reads the live CSS cascade (bit depth, dark mode, theme, limited palette, and tiles all resolved) and hands back a canonical Fill, so token mappings are never duplicated in JavaScript. Charts are just one consumer; any plugin can resolve framework colors from JS for any purpose. .
The Themes API
Themes are authored against a fixed contract: slot mixins map framework surfaces to different tokens, and the paint pipeline stays untouched. The two pages below carry the workflow and the full slot vocabulary.
Authoring Themes
The contract and workflow: start from the boilerplate, map slots, register the id, and lint.
Theme Slots
Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp.