Skip to main content

Themes

Superblocks Themes give you the full power of a design system, with simple control to alter themes that give you stunning applications every time.

Changing the theme of an app

Users can select the theme icon from the left navigation and view a preview of all components using that theme.

Primary Color: The color used in the design systems, all other colors from the theme are based on this color automatically.

Default Mode: All themes come with Light and Dark modes. The default mode is the one your end users will see when opening the application.

Typeface: Select the typeface from beautiful web fonts.

Border Radius: This will apply to all containers, inputs, buttons, and more.

Configure a theme from the theme pane

Users can apply a specific saved theme from the Selected theme dropdown.

Toggle the theme from the selected theme dropdown

Managing themes for your organization

Admins can add themes from the Organization Settings -> Themes page. You can create, update, delete, clone and make default themes for all new apps from here.

Create, update, clone, or delete themes from the theme page

Creating a new theme

Click Create New to create a new theme with its own name and properties. Simultaneously preview the theme in the panel on the right.

Create a new theme and set the theme properties

Overriding themes at the component level

Each theme comes with a generated set of color swatches matching the design system. Users can change the color of a specific component from the Styles section of the Component Properties Panel.

Override a theme at the component level