Themes
Themes are a simple way to visually customize any TRMNL plugin. A theme adjusts the framework's colors (backgrounds, text, borders, chart colors) without touching plugin markup, and gracefully adapts to every supported device, from 1-bit ePaper to full color.
Usage
Include the theme stylesheet and add screen--theme-<id> to your screen element.
Theme stylesheets ship with every framework release, next to plugins.css.
A theme already decides every color, so
screen--dark-mode has no effect on a themed screen.
A theme that wants its own dark variant can style
.screen--theme-<id>.screen--dark-mode in its stylesheet.
Monochrome plugin icons follow the theme automatically when they carry the
image--adaptive class. See
Image
Image
Place images with size, object fit, dithering, inversion, and adaptive icon utilities
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>Available Themes
The framework ships these themes:
- Black and Yellow:
screen--theme-black-and-yellow - Dark:
screen--theme-dark - White and Red:
screen--theme-white-and-red
To see them in action, pick a Style in the screen picker (top right). It applies to every example on the page and persists across pages.
Dunder Mifflin
Sales
Themes in JavaScript
JavaScript can read everything it needs from a theme's CSS:
-
TRMNLPaint: reads every color and pattern from the CSS itself, so charts and other JS-drawn visuals follow the active theme. -
TRMNLPaint.cssVar(): reads any--*variable a theme sets on the screen. A theme that wants to hand its own values to plugin code declares them; no framework changes needed.
See Paint API Paint API TRMNLPaint: read the exact colors and patterns CSS paints right now, from JavaScript TRMNLPaint is the framework's JavaScript API for its paint: colors, border lines, and text styles. Ask it for any framework color and it returns what CSS would actually paint right now, with the device and the active theme already applied. Use it wherever JavaScript draws: charts, canvases, or your own rendering. .
Build Your Own Theme
A theme changes colors and nothing else: layout, spacing, and markup stay as they are. The two pages below cover the workflow and every part a theme can recolor.
Authoring Themes
The workflow: start from the boilerplate, point each part of the screen at new colors, register the id, and lint.
Theme Slots
Every surface a theme can recolor, from semantic colors and components to utilities, borders, and chart series.