# Make a theme of your own

> Restyle every Rolly screen with one theme asset: start from a preset, edit its tokens with a live preview, and let the checks tell you when a colour or a text...

Product: Rolly Save 1.0.0 | Sheet: guide | Updated: 2026-10-31 | HTML: https://rolly-docs.pages.dev/save/guides/themes/

Every screen, row, dialog and prompt draws with the Rolly UI design system. Widgets ask the theme for roles (Surface, Accent, the Title text role), never for literal colours or sizes, so one theme asset restyles the whole interface, live.

## The built-in presets

Six themes are built in, in code:

- **Ember**, the default: near-black panels, off-white text and controls, and an orange accent kept small (the focus ring, the primary button, the selected tab's underline, the picked key cell, progress bars). Its text passes 4.5:1 contrast on every panel (WCAG AA), controls and the focus ring 3:1, and its High Contrast Colours 7:1 with a 3-unit ring. Focus never relies on colour alone: the focused row has a ring and a fill.
- **Paper**: warm light surfaces, ink text, a teal accent, a bar for focus; for cozy, casual, strategy and mobile games.
- **Tactical**: olive near-black, a lime accent, square corners, condensed capitals, monospaced values, corner brackets for focus; shooters and simulations.
- **Neon**: indigo with a magenta accent, a cyan focus ring with a glow, round shapes, a gradient backdrop; arcade, party and rhythm games.
- **Glass**: translucent panels over the dimmed game, a white ring, a cyan accent; background blur off by default, one token turns it on.
- **High Contrast**: black, white outlines everywhere, a yellow 3-unit ring, no transparency.

Every preset passes the contrast checks below, and so does every disabled control's text (3:1 against what is under it, 7:1 in high contrast).

![The preset picker](https://rolly-docs.pages.dev/save/_files/Images/CreateThemeFromPreset.png "Create Theme from Preset: the six presets side by side, each with what it suits.")

## Create a theme

1. In the Content Browser: Add > **Rolly** > **Rolly Save Core UI Theme**. The editor asks for a preset: the six presets side by side, each drawn as a screen with its name and what it suits. The new asset is an exact copy of the one you pick; name it as any new asset. (A Data Asset of class Rolly Save Core UI Theme starts as Ember.)
2. Edit its tokens; each has a tooltip.
   - **Colours:** the 22 colour roles (Backdrop, Scrim, Surface, Surface Raised, Surface Sunken, Outline, Outline Strong, Text, Text Muted, Text Disabled, Accent, On Accent, Control, Focus, Focus Fill, Hover Fill, Pending, Warning, Danger, Success, Key Cap, Key Cap Text), and **High Contrast Colours**, used while high contrast is on.
   - **Typography:** a Display, a Primary and a Mono font (empty: the engine's built-in Roboto), and ten text roles (Display, Title, Heading, Tab, Label, Value, Button, Body, Caption, Key Cap), each with its font slot, size, letter spacing, case and line height.
   - **Layout** and **Density** (in Look): the layout and the density screens use unless Project Settings pick others (see [Choose a layout](https://rolly-docs.pages.dev/save/guides/layouts/)).
   - **Spacing and Sizes** (advanced): the spacing steps, the row, control and glyph heights, the value, detail and dialog widths, the screen margins and the widest content.
   - **Shape:** corner radii, hairline and outline widths, **Focus Style** (Ring, the default, Bar, Brackets or Fill), **Focus Width** and **Focus Glow** (a soft glow around the ring).
   - **Elevation and Backdrop:** shadow colour, the backdrop's gradient, vignette and blur (off by default; where blur cannot run the backdrop draws more opaque instead).
   - **Motion:** durations, easings, the enter distance and **Motion Scale** (0 stops movement).
   - **Sounds:** Navigate, Change, Accept, Back, Error, Open, Close and Notify, none by default. Give them the Sound Class your effects or interface volume controls.
   - **Glyphs and Icons:** **Glyph Tints** draws face buttons in their family colours (**Glyph Tint Colors**; a colour below 3:1 on the key cap is never drawn); **Glyph Overrides** relabel a key or a button per family (keyboard and mouse, Xbox, PlayStation, Nintendo, generic), draw it round or show your own image (a new label is the key's name everywhere: on its cap, in its Default fact, in refusals and questions); **Icon Overrides** replace a built-in icon with a brush of yours.
   - **Behaviour:** **Wrap Navigation** (lists go around from the last row to the first), **Hover Moves Focus**, **Show Option Dots** and **Toast Seconds**.
   - **Players:** the four split-screen player colours and **Player Badge Text**, the colour of the "P2" on them.
3. Right-click the asset > **Use as the Rolly UI Theme for All Rolly Products** (or the same button above its preview). Every installed Rolly product now draws with it. To give one product a look of its own instead, set its Project Settings > Plugins > **Rolly Save Core UI** > **Theme Source** to Asset and pick the theme in **Theme** (see [Share one look across Rolly products](https://rolly-docs.pages.dev/save/guides/shared-look/)). Either way the theme is always cooked.

## Check the theme

Saving the theme checks it and says what to fix:

- a colour pair below its contrast: text 4.5:1, controls and focus 3:1, high contrast 7:1; a see-through backdrop is checked over a white and a black game frame (25 pairs in each palette);
- a text role that would read too small (18 px at 1080p, 26 px at Large density);
- a focus width under 2;
- capitals on long text;
- a sound without a Sound Class.

The fixes name a colour to try ("Lighten TextMuted (try 7F8186) or darken Surface"). A theme that cannot be loaded in the game falls back to Ember with a setup error.

## Edit with the live preview

Open the theme asset. A **Preview** category at the top of its details shows the product's screen drawn with your theme (in a project without such a product, a sample), live: every edit and every undo restyles it. Its current row (on the couch hub's first level, its current tile) shows the theme's focus look, so a change of the focus colour, fill, width or style shows at once; touch prompts hide it, as in the game.

![The theme's preview](https://rolly-docs.pages.dev/save/_files/Images/ThemePreview.png "The theme's details: the live preview with its toolbar, and the checks strip under it.")

- **Toolbar:** **Layout** (Tabs, Side Rail, Centered Panel, Couch Hub, Side Drawer), **Prompts** (keyboard, Xbox, PlayStation, Nintendo, generic, touch), **Size** (1920 x 1080, the Steam Deck, a player of a 2- or 4-player split, 21:9), **Contrast** and **Motion** (with **Play Enter** to watch the entrance), **Open Preview Window**, **Use for All Rolly Products** and **Reset to Preset** (one undo step). The choices are remembered per theme for the editor session.
- **Checks strip:** under the preview, one line sums up the checks ("All 25 contrast checks pass, in the High Contrast Colours too. Smallest text 20.5 px (18 needed at Standard).") and every problem follows with its fix, led by its severity in a word (Error, Warning, Note) and an icon. They are the same messages Data Validation gives when you save.
- **Preview window:** a resizable window with the same toolbar and the screen as large as the window allows, up to real size, driven by your keyboard and mouse. Its current row keeps its focus look while you edit in the details panel.
- **Thumbnails:** Content Browser thumbnails show each theme as a small screen in its colours and shapes, drawn again after each edit.
- **Shared theme:** the details of the theme every product shares show a banner saying so, with **Stop Sharing**.

The preview never calls a setting, never touches the game's settings, the viewport or a subsystem, and never changes the game's look, a player's choice or a shared console variable.

## Change the look while the game runs

Editing the theme asset during Play In Editor restyles the open screens at once. What the game sets while it runs applies to every local player, and open screens restyle in place: focus, scroll position and waiting changes stay as they were. It lasts for the session: when a Play In Editor session ends, the theme of Project Settings comes back with high contrast and reduced motion off.

### Blueprint

The **Rolly Save Core UI Theme Subsystem** (an engine subsystem, category Rolly Save Core|UI) has:

- **Set Theme** (empty goes back to the theme of Project Settings), **Set Preset**, **Make Preset Theme** (a preset as a new theme object to adjust);
- **Set Layout** and **Set Density** (see [Choose a layout](https://rolly-docs.pages.dev/save/guides/layouts/));
- **Set High Contrast** (the High Contrast Colours, a 3-unit ring and outlined panels) and **Set Reduced Motion** (no movement, fades of 100 ms or less);
- the event **On Theme Changed**.

High contrast and reduced motion are kept in the console variables `rolly.ui.contrast` and `rolly.ui.motion`, which every installed Rolly product follows, whoever sets them (a player's setting, Set High Contrast, the console). On Windows they start from the system's own preferences (high contrast mode; Show animations off).

### C++

```cpp
#include "Templates/RollySaveCoreUILayouts.h"
#include "Theme/RollySaveCoreUIPresets.h"
#include "Theme/RollySaveCoreUIThemeSubsystem.h"

void UMyOptions::UseCouchLook(bool bHighContrast)
{
	if (URollySaveCoreUIThemeSubsystem* Themes = URollySaveCoreUIThemeSubsystem::Get())
	{
		Themes->SetPreset(FRollySaveCoreUIPresets::Neon); // or SetTheme(MyThemeAsset); null goes back to Project Settings
		Themes->SetLayout(FRollySaveCoreUILayouts::Hub);
		Themes->SetHighContrast(bHighContrast);
	}
}
```

## Make your own widgets follow the theme

### Blueprint

In a Widget Blueprint of your own:

1. Call **Listen To Rolly Theme** in Event Pre Construct (or add the **Rolly Theme Listener** extension).
2. Add the **Rolly Theme Aware** interface in Class Settings and implement **On Rolly Theme Changed**.
3. Restyle there with **Get Rolly Theme Color**, **Get Rolly Theme Font**, **Make Rolly Surface Brush** and **Get Rolly Motion Scale**.

The event runs when the widget shows and on every theme, contrast or motion change while it is on screen. The Rolly widgets in the palette's Rolly Save Core category (Rolly Text, Surface, Icon, Glyph, Progress Bar, List, Button, Tab Strip, Prompt Bar and the others) follow the theme by themselves.

### C++

A widget with parts that are not Rolly widgets derives from `URollySaveCoreUIUserWidget` and overrides `ApplyStyle(const FRollySaveCoreUIStyle& Style)`, setting them from roles, for example `Style.Color(ERollySaveCoreUIColorRole::Surface)`, `Style.Font(ERollySaveCoreUITextRole::Title)`, `Style.Scale(Token)` and `Style.Duration(Seconds)`. It runs before the widget shows and again on every theme, contrast or motion change while it is on screen; nothing is rebuilt, so focus and state stay. A focusable widget with a focus look of its own should also draw it while `IsShownAsFocused` is true, so theme previews show it.

## Limits

- The preview window is driven by the keyboard and mouse; gamepad input in editor windows was not verified.
- High contrast and reduced motion follow the system's preferences on Windows only; elsewhere they start off.