Themes

Themes in Nordcraft provide a centralized way to manage design tokens across your entire project. By defining colors, spacing, typography and other visual elements in one place, you can ensure styles are consistent across your project. All theme variables are available to use in the style panel.

To access the theme editor, open the project sidebar and find the Themes section. You can also open the theme dialog from the bottom bar when editing a component. Here you can edit your theme with a live view of your changes in context.

Theme

Live

Use theme variables to declare CSS variables at a global level for your project. You can then use these variables in your project for styling.

When creating a new theme variable, you define:

Picking the correct syntax type for theme variables is important as it determines how the variable can be used in your project. Below are the available syntax types and their use cases.

The Any(*) syntax type allows you to create theme variables that can hold any CSS value. This is useful for properties that may require different types of values depending on the context or complex CSS values that are not yet supported as specific syntax types.

Note that when using Any(*) variables, the variable will show up in all style property dropdown menus in the style panel, which could be confusing if the variable is not compatible with the selected property.

Angle variables are useful for defining rotation values in transformations or gradient angles. This helps maintain consistency in visual effects that involve angular measurements.

Color variables can be used for backgrounds, gradients, borders, shadows, text colors, and more throughout your application. Editing a color variable will provide a color picker.

Using variables for layout and spacing properties such as gap, margins and padding helps you create consistently-presented page and component layouts across your project. You can use this syntax type to define font-size variables for consistent typography scaling, or for defining sizes, paddings, margins, and other dimensional properties.

Percentage variables are a subset of length-percentage variables where only percentage values are allowed. These are useful for defining relative sizes, such as widths or heights based on parent elements.

Numbers are useful for defining values that require decimal precision, such as opacity levels, scaling factors, or other numeric properties that benefit from fractional values.

Time variables are used for defining durations in animations and transitions. By standardizing time values, you can ensure consistent timing across various interactive elements in your application.

Integers are mostly used for handling z-index throughout your interface, but can also be used for font-weight management. A well-structured z-index system prevents unintended overlapping issues in complex interfaces.

Select and manage typography for your project:

• Choose and install fonts from available Google fonts
• Change font families based on the active theme

Defined font-family variables are available in the font dropdown menu in the style panel.

For fonts not available natively in Nordcraft, you can add them in your page configuration. Navigate to the head assets section to set up custom fonts.

For each theme variable you add, you can define different values for that variable across multiple themes. This allows you to create light and dark themes, different color schemes for various contexts, or any type of theme switching you like.

To create and manage multiple themes:

1. 1

   Open the theme editor from the project sidebar
2. 2

   Click the + button next to your themes row to add a new theme, or duplicate an existing theme using the context menu of an existing theme
3. 3

   Define different values for your theme variables in each theme

You can preview themes in the editor by using the context menu in the theme editor and selecting Emulate theme. You can also mark a theme as the default theme for your project using the same context menu or set it as the default Dark or Light theme.

Multiple themes

Live

The default theme is applied to your project unless a different theme is explicitly selected. You can change the default theme at any time in the theme editor by opening the context-menu of a theme (see screenshot above) and checking "Default theme", but you can only have one default theme per project.

All other themes will fall back to the default theme for any variables not explicitly defined in that theme. If a variable is not defined in either the selected theme or the default theme, the variable's initial value will be used instead.

You can optionally mark one theme as the default Dark theme and one as the default Light theme. This allows you to set up automatic theme switching based on user preferences or system settings.

Nordcraft automatically detects whether a user has a preference for dark or light mode based on their operating system or browser preferences, and selects the either the dark or light theme on page load based on those preferences. This happens automatically and requires no extra configuration. If no dark or light theme is set, the default theme will be used.

You can set themes programmatically using the Set theme action in workflows. Similarly, you can read the current theme using the Theme formula.

By default, the Set theme action will reactively (immediately) update the theme when triggered and store the selected theme in a cookie (this ensures SSR compatibility). You can override the default behavior in any page's page configuration under the Themes section to read the theme from local storage, variable or an API for example.

Themes are set at the page level, but you can also set themes on individual elements. To do this, add the special data-nc-theme attribute to an element using the attributes panel, specifying the theme name you wish to use as the value of that attribute. Theme names are case-sensitive and must match exactly.

This allows you to create components or sections of your application that use a different theme than the rest of the page. The element and all its children will use the specified theme.

Nordcraft themes are static by default, meaning that theme variables cannot be set using formulas or dynamic values. However, you can create dynamic themes using data from an API, for example, by creating a custom theme-provider component that overrides your theme variables using those dynamic values. This is an advanced use case and requires knowledge of building components.

All theme variables are available throughout your project:

• Access variables in the style panel of any element
• Select from dropdowns in the relevant property fields (e.g., color picker, spacing inputs)
• Override theme variables in components using static values or dynamic formulas

This approach ensures that changes to the theme automatically propagate throughout your application, maintaining design consistency with minimal effort.