Waiting for engine...
Skip to main content

Customizing your styling and themes

The plugin maps these CSS variables to ready-made utility classes (For example, .boomi-btn-primary, .boomi-input, .boomi-card), ensuring consistent overrides across all UI components.

Built-in themes​

ThemeLook and feel summaryWhen to use
lightNeutral, accessible light palette with subtle shadows.Standard web apps with light mode are the primary experience.
darkHigh-contrast dark palette tuned for low-light environments.Developer tools, dashboards, night-friendly apps.
boomiBoomi-branded accents and backgrounds, polished styling.When you want Boomi’s brand language out of the box.

You can do the following operations using Boomi EmbedKit:

  • Enable theme switching for users.
  • Pick a default theme at startup.
  • Create your own themes by defining CSS variables under cssVarsByTheme in boomi.config.js.

Configuration file (boomi.config.js) at a glance​

boomi.config.js 
// boomi.config.js
export default {
  theme: {
    allowThemes: true,       // let users or your app toggle themes
    defaultTheme: 'dark',    // 'light' | 'dark' | 'boomi' | '<your-custom>'
  },
  integrationsMain: {                               // default key for integrations component Note: you can create your own
    integrations: {                                 // integrations component
      title: 'My Integrations',                     // optional: title for the integrations page 
      description: 'This is a sample description',  // optional: description for the integrations page 
    }
  },
  
  // Define overrides per theme using CSS custom properties (design tokens)
  cssVarsByTheme: {
    // example custom theme
    sepia: {
      '--boomi-root-bg-color': '#A0E8AF',
      '--boomi-btn-primary-bg': '#FFDE59',
      '--boomi-btn-primary-fg': '#2B2B2B',
      // ...any other design CSS classes you want to override
    },
  },
};

Creating a custom theme​

To create a new theme, add a new key under cssVarsByTheme and define the CSS variables you want to override. The plugin’s CSS uses these classes throughout buttons, inputs, cards, menus, tables, modals, wizards, mapping canvas, schedules, etc. This example shows you how to create a new one.

  1. In the root directory of your project, create a new file named boomi.config.js.

  2. Copy the following code snippet into your boomi.config.js file. This example sets up a theme named sepia and designates it as the defaultTheme by passing the variable cssVarsByTheme.

    boomi.config.js 
      // boomi.config.js (excerpt)
      export const boomiConfig = {
        theme: {
          allowThemes: true,
          defaultTheme: 'sepia', // switch to your custom theme by default
        },
        cssVarsByTheme: {
          sepia: {
          },
        },
      };

  3. Add the specific CSS variables you want to override inside the sepia object. These variables control the colors, borders, and shadows of elements such as buttons, cards, and notices. Your complete boomi.config.js file should now look like this:

    boomi.config.js 
      // boomi.config.js (excerpt)
      export const boomiConfig = {
        theme: {
          allowThemes: true,
          defaultTheme: 'sepia', // switch to your custom theme by default
        },
        cssVarsByTheme: {
          sepia: {
            /* Brand & Surface */
            '--boomi-root-bg-color': '#A0E8AF',
            '--boomi-page-bg-color': '#A0E8AF',
            '--boomi-header-bg-color': '#5CD4F0',
            '--boomi-header-fg-color': '#000000',

            /* Buttons */
            '--boomi-btn-primary-bg': '#FFDE59',
            '--boomi-btn-primary-fg': '#2B2B2B',
            '--boomi-btn-primary-border': '#000000',
            '--boomi-btn-primary-shadow': '4px 4px 0 #000000',
            '--boomi-btn-primary-bg-hover': '#FFD633',

            /* Inputs */
            '--boomi-input-bg': '#FFFFFF',
            '--boomi-input-fg': '#2B2B2B',
            '--boomi-input-border': '#000000',
            '--boomi-input-shadow': '3px 3px 0 #000000',

            /* Cards */
            '--boomi-card-bg': '#FFFFFF',
            '--boomi-card-border': '#000000',
            '--boomi-card-shadow': '4px 4px 0 #000000',

            /* Notices */
            '--boomi-notice-success-bg': '#6EEB83',
            '--boomi-notice-success-fg': '#111111',
            '--boomi-notice-success-border': '#000000',
          },
        },
      };

  4. After saving your changes, reinitialize the plugin so that the new styling and theme take effect in your application.

    The new styling will automatically cascade across all plugin UI elements that use the overridden classes (For example, .boomi-btn-primary, .boomi-input, .boomi-card).

How do the UI components map to CSS styles?​

The plugin’s stylesheet wires CSS variables to utility classes you apply or the components use internally.

UI componentsCSS styles
Primary Button--boomi-btn-primary-bg, --boomi-btn-primary-fg, --boomi-btn-primary-border, --boomi-btn-primary-shadow
Secondary Button--boomi-btn-secondary-bg, --boomi-btn-secondary-fg, --boomi-btn-secondary-border, --boomi-btn-secondary-shadow
Inputs--boomi-input-bg, --boomi-input-fg, --boomi-input-border, --boomi-input-shadow, --boomi-input-border-focus
Cards / Panels--boomi-card-bg, --boomi-card-border, --boomi-card-shadow, --boomi-card-hover-shadow
Menus--boomi-menu-bg, --boomi-menu-fg, --boomi-menu-border, --boomi-menu-item-bg-hover
Modals--boomi-modal-bg, --boomi-modal-fg, --boomi-modal-border, --boomi-modal-shadow
Notices / Alerts--boomi-notice-*-bg, --boomi-notice-*-fg, --boomi-notice-*-border, --boomi-notice-shadow
Wizard--boomi-wizard-step-dot-*, --boomi-wizard-card-*, --boomi-wizard-link-*
Tables--boomi-table-header-*, --boomi-table-row-odd-bg, --boomi-table-row-even-bg
Mapping Canvas--boomi-map-line, --boomi-map-card-*, --boomi-map-pin-*, --boomi-accent, --boomi-muted
Schedule UI--boomi-sched-card-*, --boomi-sched-header-*, --boomi-sched-input-*, --boomi-sched-action-*

You can override only the CSS styles you need; everything else inherits from the active theme (light, dark, boomi, or your custom theme).

Best practices for styling and theming​

  • Start your theme customization with the boomi for a polished look, then adjust a few CSS styles to align with your brand.
  • For accessibility, ensure enough contrast for text in inputs, buttons, and tables.
  • Scope overrides per theme in cssVarsByTheme so you can switch safely without leaking styles.
  • You can omit the ai block if your app doesn't use AI features, as AI settings are optional.
On this Page