Themes

Paid Feature

This feature is only available in paid plans. Learn More

This feature allows you to customize the overall look and feel of the drag-and-drop builder interface. We offer four out-of-the-box themes that can be easily applied to the builder, giving you the flexibility to choose between light and dark modes as well as different design styles. You can also pass a custom theme object to override the editor colors with your own.

Available Themes

Modern Light – Default

modern_light

A more contemporary design with light tones, providing a fresh and minimalist feel while maintaining clarity and usability. This is the default theme.

Modern Dark

modern_dark

A darker, modern interface that combines a sleek design with a minimalistic feel, ideal for users who prefer dark mode with a modern touch.

Classic Light

classic_light

A clean, traditional interface with a light background, designed for clarity and simplicity.

Classic Dark

classic_dark

A darker version of the classic theme, ideal for users who prefer a low-light interface or want a more modern, sleek look.

---

Setting a Theme

You can configure the theme for the builder during initialization using the unlayer.init() method. By default, the builder is set to the Classic (Light) theme, but you can easily switch to any of the available themes.

Example of setting a theme:

unlayer.init({
  appearance: {
    theme: 'modern_light',
  },
});

Or you can change the theme on the fly like this:

unlayer.setTheme('modern_dark');

Built-in Theme Options

• modern_light (default)
• modern_dark
• classic_light
• classic_dark

---

Custom Themes

Instead of passing a string with the theme name, you can pass an object overriding the editor colors. Here's how you create a custom Modern Dark Purple theme:

unlayer.init({
  appearance: {
    theme: {
      name: 'custom_modern_dark_purple',
      extends: 'modern_dark',
      isClassic: false,
      isDark: true,
      mapping: {
        borderRadius: {
          none: '0',
          min: '2px',
          mid: '8px',
          max: '12px',
          full: '50%',
        },
        colors: {
          accent_01: '#9632a0',
          accent_02: '#ae70b4',
          accent_03: '#bf87c4',
          accent_04: '#d9b4dc',
          accent_05: '#eed5f0',
          primary_01: '#ffffff',
          primary_02: '#f2ebf4',
          primary_03: '#e8dded',
          primary_04: '#d2c2d6',
          primary_05: '#9c95a6',
          primary_06: '#906994',
          primary_07: '#5d425c',
          primary_08: '#4f344d',
          primary_09: '#3c263d',
          primary_10: '#4e2e51',
          primary_11: '#441e42',
        },
      },
    },
  },
});

Or you can change the theme on the fly like this:

unlayer.setTheme(myCustomThemeObject);

Custom JS / CSS

If the out-of-the-box themes don't fully meet your needs, or you want to customize some very specific UI element, you can use the Custom JS / CSS options. This gives you further control to tweak the existing themes or create a completely new look that fits your brand.

---

Best Practices

• Consistency with Your Brand: Choose the theme that best aligns with your platform's overall design and user experience. You can also apply custom branding elements via CSS to make the builder interface feel more integrated with your application.
• Light vs. Dark Mode: Offering both light and dark themes provides users with a more personalized experience. You can also allow users to switch between themes based on their preferences, enhancing accessibility and comfort, especially in low-light environments.

By utilizing this feature, you can create a visually appealing and cohesive environment for your users, ensuring that the builder interface matches your application's aesthetic while providing a comfortable and flexible design experience.