Theming

Summary

Neura ships four built-in brand themes on top of the default indigo palette. A theme is a set of --neura-* token overrides selected by a data-neura-theme attribute: server-renderable, cascade-scoped, and switchable at runtime. Everything brand-colored follows: buttons (incl. gradients, hover, disabled and the dialog-footer variant), header chrome, links, focus rings, and the info-message accent.

Click a palette; it recolors the whole sandbox live (the choice sticks across pages while you browse).

Sample surface

A normal link A visited link

Info message

Uses the info accent color.

Complete Current Success

HTML

Set the attribute declaratively on the root (or any subtree):

<html data-neura-theme="teal">          <!-- whole page -->

<div data-neura-theme="legacy">         <!-- just this subtree -->
  …
</div>

JavaScript API

Neura.theme();          // → current theme name ('default' if unset)
Neura.theme('teal');    // switch - built-ins: legacy, teal, violet, graphite
Neura.theme('default'); // back to Neura indigo (null does the same)

Unknown names are allowed: Neura.theme('acme') simply sets the attribute, so a custom theme needs no JS registration. A custom theme is just a CSS block overriding the brand tokens (src/css/_themes.scss is the reference):

[data-neura-theme='acme'] {
  --neura-color-primary: #7c2d12;
  --neura-color-link: #c2410c;
  --neura-button-primary-bg-top: #f97316;
  /* … */
}

The tokens a palette can override (all optional; anything omitted keeps the indigo default): --neura-color-primary, --neura-color-hero, --neura-color-focus, --neura-color-link, --neura-color-link-visited, --neura-header-border, and the primary-button set --neura-button-primary-bg-top / -bg-bottom / -border / -hover-top / -hover-bottom / -active / -disabled-top / -disabled-bottom / -disabled-border / -text-shadow.

AUI compatibility

AUI had no theming; there is no AJS.* equivalent. The legacy theme is the compatibility story: the exact AUI 5.4 palette (Atlassian #205081 blues, original button gradient stops) for consumers that want the classic look while migrating markup.