Skip to main content


Themes are an encapsulation of reusable variables for consistent styling, represented as a Theme class.

Registering themes#

Themes can only be accessed within a style sheet when registered into Aesthetic. We can achieve this using the registerTheme() and registerDefaultTheme() methods, both of which require a unique name and an optional theme style sheet. A default theme can only be defined twice, once for a light color scheme, the other for a dark color scheme.

import { registerTheme, registerDefaultTheme } from '@aesthetic/<integration>';
import dayTheme from './system/themes/day';
import nightTheme from './system/themes/night';
import twilightTheme from './system/themes/twilight';
registerDefaultTheme('day', dayTheme);
registerDefaultTheme('night', nightTheme);
registerTheme('twilight', twilightTheme);

Registration should happen near the root of the application, before any Aesthetic styled React component is imported or rendered.

Changing themes#

The currently active theme can be changed programmatically by calling the changeTheme() method within in your application.

import { changeTheme } from '@aesthetic/<integration>';