Skip to main content
SPRby Supernetworks

Themes & Appearance

SPR ships with a set of built-in themes and lets you build your own. You can switch between light and dark, pick from named color themes, or open the Theme Builder to design a custom look from four colors, a base mode and a font. Your choice applies live across the whole admin UI.

Switch themes​

Every admin page has a palette icon in the top navigation bar. Click it to open the theme menu, which lists:

  • Default Light and Default Dark — the stock theme in either mode.
  • The built-in named themes, each pinned to its own light or dark mode.
  • Any custom themes you have saved.
  • Customize… — opens the Theme Builder.

Selecting an entry applies it immediately. The active theme is marked with a check. Because named and custom themes carry their own color mode, choosing one also switches the interface to light or dark as appropriate.

Theme Builder​

Open the Theme Builder from the theme menu's Customize… item, or navigate directly to /admin/theme.

A custom theme is defined by a name, a base mode, an optional font and four colors. The accent ramp, borders and secondary text are derived automatically from those choices, so you only set the essentials.

Name​

Give the theme a name (for example, Sunset). The name appears in the theme menu once saved.

Base​

Choose Light or Dark. This sets the base color mode the theme applies when selected.

Font​

Pick a font for the interface. The choices are:

  • System (the default)
  • Technical
  • Terminal
  • Serif
  • Inter
  • JetBrains Mono
  • Sci-Fi
  • Chakra

Each button previews its own typeface.

Colors​

Set four colors, either by typing a #RRGGBB hex value or picking from the preset swatches under each field:

  • Accent — buttons, links and active items.
  • Background — the app canvas behind cards.
  • Card surface — panels, list rows and the navbar.
  • Text — primary text and headings.

A live preview panel shows how the combination looks as you edit.

Save and manage custom themes​

Click Apply & Save to store the theme and apply it live; it is added to the theme menu right away. Reset returns the builder to its starting values. Share my theme opens a pre-filled GitHub issue containing your theme's JSON so you can share it with others.

Saved themes are listed at the bottom of the builder with a swatch and an active marker on the current one. Use Delete next to a theme to remove it.

You can save up to 32 custom themes. All four colors must be valid #RRGGBB hex values and the name cannot be blank; otherwise saving is blocked.

Themes apply across the UI and to plugins​

The selected theme applies throughout the admin interface. Plugin UIs that render inside SPR also receive the current theme information — the active theme name, its effective color mode and colors — so plugin pages can match the look of the rest of the app.