Skip to main content

Themes

Modify the look and feel of any plugin, code free.

Written by Ryan Kulp

A theme changes how a plugin looks, without changing the layout. From typeface to backgrounds, colors, the title bar, spacing, corners, and beyond. You can build themes once, then apply them to your whole device or to single playlist items.

Here's the Hacker News plugin in six different themes.

Step 1 - Open the theme builder

Visit your Account, find the Developer section and click Manage themes. You can also head straight to trmnl.com/user_themes.

Click New theme and give it a nickname.

Step 2 - Start from a preset

The Start from menu loads a ready-made look that you can change: Dark, White and red, Black and yellow, High contrast, Cards, Cards ramp, Soft and Editorial. Or skip it and build from the stock look.

A preset replaces every setting you have made so far, font included. Pick one first, then fine-tune.

Step 3 - Make it yours

Each control on the left updates the preview on the right as you change it. Controls are grouped like this:

  • Typeface: 16 fonts across sans, serif, mono and condensed styles, or the device's own font. A weight slider runs from light to bold.

  • Screen: colors for the paper, text, muted text, borders and fills, how much whitespace there is, and how round the corners are.

  • Title bar: its color, the ink of the title and instance name, outlines, height, padding, letter case and letter spacing.

  • Items: fill, border (outline or corner brackets) and padding for the boxes that hold values and labels, plus the case and spacing of each kind of text.

  • Tables, Progress, Dividers and Chips: table header style, progress bar color and thickness, divider color (or no dividers at all), and filled or outlined chips.

  • Color remap: invert the whole screen, or move each color a plugin paints to a different one. The Dark preset is built this way.

  • Advanced: overrides written as YAML, for the parts of the screen the controls above do not reach.

The menu at the top switches the preview between a few sample plugins, and the device menu next to it shows other screen sizes and palettes. Enable Compare palettes along the top to see the theme on black and white, 4 grays, 16 grays and a 6-color screen at once.

It's worth checking on this comparison before you save. A color that is bold on a color screen becomes a pattern of dots on a grayscale one. On a screen that shows color, it stays color.

Click Save theme when you're done.

Step 4 - Apply it to a device or individual plugin

Open your device settings, visit the Color Palette section and choose your theme from the Theme menu. This will apply the theme to plugin on that device. The same menu has three built-in themes you can use without building anything: Dark, White and Red, and Black and Yellow.

To give one playlist item a different look, open its three-dot menu in your playlist, then Presentation, then pick a theme. Device Default puts it back on the device's theme.

Step 5 - You're done!

Each screen picks up the new look the next time it refreshes. Edit the theme later and every device using it follows.

Share a theme

Open a theme and click Share. You'll see two options:

  • Public link: a trmnl.com/t/ address you can post anywhere.

  • Snippet: a block of text, handy for a chat message or a GitHub issue.

Both carry the theme's settings and font. Your custom nickname and other personal settings are never included. Nothing is stored on TRMNL's side either, so a link keeps working even after you delete the theme.

Import a theme

Open a share link while signed in to TRMNL, or click Import in the theme builder, paste a link or snippet and click Apply.

With either approach the builder opens with the theme loaded but not saved. Give it a name and click Save theme to keep it, otherwise it will disappear.

Export a theme

A saved theme can be used outside TRMNL, too. In the Share window:

  • Download as a framework theme gives you an .scss file.

  • Download theme gives you a .zip with that .scss, the compiled CSS, a manifest and the font files the theme uses.

Use exported themes to style your own projects with the TRMNL Framework, or as a starting point for a theme you write by hand. Note that themes require Framework 3.4 or later. The download buttons only show on a theme you have saved.

Themes in the API and MCP

You can list, create, update, delete and import themes with the TRMNL API (under User Themes) and an account API key. AI agents connected through the MCP server can do the same, so you can ask one to build a theme for you.

Going further with the Framework

Themes are built on the TRMNL Framework. These pages explain what is underneath:

  • Themes: how a theme recolors a whole screen.

  • Authoring Themes: write a theme by hand, from the boilerplate to the linter.

  • Theme Slots: every part of a screen a theme can recolor. Useful when you write Advanced overrides.

  • Tokens: the full list of CSS variables.

  • Color Palettes: what each kind of screen can show.

Troubleshooting

My theme does not show on one plugin.
Private plugins pinned to a Framework version older than 3.2 keep their own look. Move the plugin to a newer version, see UI Framework Versioning. If no plugin has changed yet, wait for the next refresh.

The font menu is grayed out and says "Set by" and a theme name.
The theme sets its own font, and that wins over the device and playlist item font. To pick fonts per device again, edit the theme and set Font to Device font.

My colors show up as dotted gray.
Your screen is grayscale, so each color is drawn as a pattern of dots. Use Compare palettes in the builder to see how a theme lands, and use gray shades for grayscale devices.

The theme list says "Renders the default look until its settings are fixed."
One of the theme's settings is no longer valid, so devices using it show the stock look until you fix it. Open the theme, change the setting the error names, and save.

"That snippet could not be read."
Part of the link or snippet went missing on the way. Copy it again with the Copy button in the Share window.

The Advanced field shows an error and the theme will not save.
Advanced overrides must be YAML, one key and value per line. Fix the line the error points to. Nothing saves while the error is there.

I deleted a theme that was in use.
Devices that used it go back to the default look, and playlist items that used it follow their device's theme again. If you kept a share link, import it to get the theme back.

Did this answer your question?