Theme API

Register Theme

Use registerTheme when a companion module needs to add a selectable HUD theme. The theme is added to the same registry used by the Configure HUD theme dropdown.

Hooks.once("stylish-action-hud.apiReady", (api) => {
  api.registerTheme("my-theme", {
    label: "My Theme",
    defaults: {
      scale: 1,
      format: "box",
      nameZ: 5,
      barsZ: 5,
      dotsZ: 5,
      numbersZ: 5,
      badgesZ: 150,
    },
    sounds: {
      click: "sounds/notify.wav",
      hover: "sounds/click.wav",
    },
  });
});

The key becomes the theme class name. For the example above, write CSS against .theme-my-theme for the Party HUD, Action Menu, context menu, and any other HUD surface your theme changes. Include that CSS file in your module's styles array.

After the registering module is active, GMs can select the theme from Configure HUD > Global Settings > Common > Theme. If your theme does not appear, confirm your module loads after Stylish Action HUD is active and that registration runs after stylish-action-hud.apiReady.

Get Themes

Use getThemes when your module needs to inspect the current registry before adding or debugging themes.

Hooks.once("stylish-action-hud.apiReady", (api) => {
  const themes = api.getThemes();
  console.log(Object.keys(themes));
});