Skip to main content


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

Select the Theme icon from the left navigation inside an application to open up the theme settings and preview panel. The following settings are configurable:

Default modeChoose between Light, Dark, or Auto (match user OS settings) modes. The default mode is the one your end users will see when opening the application.
TypefaceFont family and style (Roboto, Inter, Poppins, Noto Sans, Work Sans, DM Sans)
Border radiusRoundedness of corners for components like containers, inputs, buttons, and more
PaddingThe space between components and their container border
Primary colorMain color used in the design system. All other colors from the theme are based on this color automatically (configurable for light and dark mode)
BackgroundThe background color of the application canvas (configurable for light and dark mode)
Configure a theme from the theme pane

Overriding themes at the component level

To override theme settings at the component level, users can configure styles for a component in the properties panel. For example, here a button inside a table has a Background color set separately from the application's primary color.

Override a theme at the component level

Using themes in embedded applications

When embedding a Superblocks application into another site, set the Background and Primary color of your theme to match the host app's style guide. Once updated, your Superblocks app will seamlessly match the theme colors of the parent application.

Use the Superblocks embed SDK to programmatically change the current color scheme of the app when a user toggles between light and dark mode in the host application. For details on how to configure this, see the embed docs for changing the color scheme.

Managing themes for your organization (coming soon)

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 org-wide theme (coming soon)

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

Applying an org-wide theme (coming soon)

Within an application, users can apply a specific saved theme from the Selected theme dropdown.

Toggle the theme from the selected theme dropdown