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) |
Typography | Configure the text styles for your app |
