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
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:
| Setting | Description |
|---|---|
| Default mode | Choose 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. |
| Typeface | Font family and style (Roboto, Inter, Poppins, Noto Sans, Work Sans, DM Sans) |
| Border radius | Roundedness of corners for components like containers, inputs, buttons, and more |
| Padding | The space between components and their container border |
| Primary color | Main color used in the design system. All other colors from the theme are based on this color automatically (configurable for light and dark mode) |
| Background | The background color of the application canvas (configurable for light and dark mode) |
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.
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.
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.
Applying an org-wide theme (coming soon)
Within an application, users can apply a specific saved theme from the Selected theme dropdown.
