Manual Theming Setup in shadcncraft

Editing variables

You can quickly update the visual theme of components by editing variables in the Theme collection.

Change the primary color

To update your primary color (e.g. from Neutral to a custom blue #297EFF):

1. Open the Variables panel
2. Switch to the Theme collection
3. Locate the colors/light/primary variable in the colors group
4. Enter #297EFF directly in the value field
5. Repeat the process for colors/dark/primary
6. Figma will apply the new color across all primary component references

Watch: Change primary color

Update neutral colors

You can replace default neutral (grey) colors used in background, border, input, and muted elements with your own colors.

1. In the Theme collection, locate the relevant neutral variables
2. Swap out the current values for your own
3. Changes will cascade across any components that rely on these variables

Using opacity variables

Tailwind lets you apply opacity to colours using syntax like bg-blue-600/90. You can replicate this in Figma using alpha variables.

To apply 90% opacity to a primary color on hover:

1. Add your primary color as a Fill in Figma
2. Add a second Fill layer above it
3. In the color picker, switch to Library
4. Search for and apply the alpha/90 variable

In code, this would be used as: bg-primary/90

This approach keeps design and development aligned while avoiding the need to create new colors for each opacity level.

Changing the font family

To update your typeface across the system:

1. Open the Variables panel
2. Go to the Theme collection
3. Find the font-sans variable in the font family group
4. Replace the current value (e.g. Inter) with your preferred font (e.g. Roboto)

Adjusting border radius

Border radius plays a big role in the overall feel of your interface. Whether you're after subtle rounding or bold curves, it's easy to update system-wide:

1. Open the Variables panel
2. Navigate to the Theme collection
3. Find the radius group
4. Edit values like rounded-sm, rounded-md, rounded-lg, and radius-xl to suit your design

Creating new variables and styles

Creating new variables

Custom variables are supported — just be sure they're needed. The existing shadcncraft variable sets cover most use cases, and unnecessary additions can bloat your system.

To create a new color variable that follows the established structure:

1. In the Theme collection, add:
   • your-variable-light (e.g. warning-light)
   • your-variable-dark (e.g. warning-dark)
   • Edit the variables to hide them from publishing
   • You most likely want to de-scope the variable from all supported properties
2. In the Mode collection, add:
   • your-variable referencing the light/dark versions
   • Adjust the scope to control where the variable applies
3. Use your new variable in components as needed

Example – Warning color:

• warning-light: #F59E0B
• warning-dark: #F59E0B
• warning-foreground-light: #451A03
• warning-foreground-dark: #451A03
• Add warning and warning-foreground to the Mode collection
• Apply to UI components where caution or warning states are needed
• Use the Figma to shadcn/ui plugin to add matching variables to your codebase

Creating new themes

The shadcncraft variable system supports fast theme switching, ideal for brand variants or accessibility-focused themes.

To create a new theme:

1. Open the Variables panel
2. Navigate to the Theme collection
3. Click the "+" icon in the top right to create a new mode
4. Rename the new mode (e.g. Brand B, High Contrast)
5. Adjust values to match your brand or visual preferences

You can now toggle between complete themes while keeping all components intact.

Working with styles

Figma Styles (typography and effects) mirror Tailwind's utility classes and are powered by variables from the Theme collection.

Adding a new text style (example: Heading)

1. Use the Text tool to create some text
2. From the design panel, apply these variables:
   • Font family: font-sans
   • Size: text-4xl
   • Weight: weight/font-extrabold
   • Line height: line-height/leading-10
3. Click the Apply styles icon
4. Click the + icon
5. Give the style a meaningful name like text-4xl
6. Click Create style
7. Move the style into the relevant style group

Developers can now apply the style in code using Tailwind classes like:

<h1 class="text-4xl leading-tight font-extrabold">Heading</h1>

This keeps visual language consistent from design to dev.

Dark mode support

One of the most powerful features of variables in shadcncraft is the built-in support for light and dark modes — with no need to duplicate layouts or rebuild anything.

How it works

The Theme collection includes predefined values for both light and dark color modes. Switching between them updates your entire file instantly.

How to switch modes:

1. Select a page or frame
2. In the Layer panel, look for the "Apply variable mode" icon
3. Click to open the dropdown menu
4. Select either Mode → Light or Mode → Dark

Your selection will now adapt to the chosen theme.

Multi-brand systems

To support multiple brands, create additional modes in the Theme collection.

1. Open the Local Variables panel
2. Select the Theme collection
3. Click "+" in the top bar of the variable table
4. Rename the new mode (e.g. Brand A)
5. Update variable values to reflect the brand's color, spacing, and font styles

How to apply a brand theme:

1. Select a page or frame
2. In the Layer panel, look for the "Apply variable mode" icon
3. Select Theme → Brand A to apply the new style