Themes #

Marzipan includes beautiful built-in themes and supports custom theming.

Built-in Themes #

Solar (Light Theme) #

import { Marzipan } from '@pinkpixel/marzipan';

new Marzipan('#editor', {
  theme: 'solar'
});

Cave (Dark Theme) #

new Marzipan('#editor', {
  theme: 'cave'
});

ℹ️ You can also use the shorthand aliases light and dark, which map to solar and cave respectively.

Global vs Instance Themes #

// Set theme globally for all instances
Marzipan.setTheme('cave');

// Override for specific instance
new Marzipan('#editor', {
  theme: 'solar'  // This editor uses solar
});

Custom Themes #

Create your own theme:

const myTheme = {
  name: 'ocean',
  colors: {
    bgPrimary: '#1a2332',
    bgSecondary: '#152033',
    text: '#d4e4f7',
    textSecondary: '#9fb4c9',
    h1: '#82aaff',
    h2: '#5fb3d4',
    h3: '#f78c6c',
    link: '#5fb3d4',
    codeBg: 'rgba(95, 179, 212, 0.18)',
    toolbarBg: '#0f172a',
    toolbarIcon: '#d4e4f7',
    toolbarActive: '#1a2d45'
  }
};

Marzipan.setTheme(myTheme);

Color Properties #

All available theme color properties:

• bgPrimary / bgSecondary – Background layers
• text / textSecondary – Primary and secondary copy colors
• h1, h2, h3, strong, em – Typographic accents
• link, code, codeBg – Inline link and code styling
• blockquote, hr, syntaxMarker, listMarker – Markdown structural cues
• cursor, selection – Caret and text selection
• toolbarBg, toolbarBorder, toolbarIcon, toolbarHover, toolbarActive – Toolbar chrome
• border – Generic border color

Accent Swatches #

Use the accent swatch plugin for dynamic color picking:

import { accentSwatchPlugin } from '@pinkpixel/marzipan/plugins/accentSwatchPlugin';

new Marzipan('#editor', {
  plugins: [accentSwatchPlugin()]
});

Learn more in the Accent Swatches Plugin documentation.