Summernote with built-in example themes

Switch between built-in theme presets and keep the same compiled summernote-next-classic assets. The editor follows each preset's color, border, and surface tokens automatically.

Example theme

What changes

Theme card radii, cap backgrounds, borders, shadows, and color tokens flow into the Summernote frame, toolbar, and status bar. Try square themes like Yeti or Sketchy versus softer themes like Minty.

Theme source

The page updates local CSS variables only. Summernote continues to use the same compiled summernote-next-classic.css and summernote-next-classic.js assets.

Theme preset demo

Use the selector above to compare toolbar chrome, borders, buttons, and shadows across the built-in presets.

The editor frame follows the active preset surface and border styling.
The toolbar and status bar inherit the active preset colors and edges.
The editor keeps using the standard public Summernote API.

Example configuration - Theme presets

const themePresets = {
  brite: {
    accent: '#6d5efc',
    accentContrast: '#ffffff',
    surface: 'rgba(255, 255, 255, 0.94)',
    surfaceColor: '#212529',
    mutedSurface: 'rgba(238, 242, 255, 0.94)',
    mutedColor: '#6c757d',
    border: 'rgba(109, 94, 252, 0.24)',
    shadow: 'rgba(76, 29, 149, 0.12)',
    radius: '0.375rem',
    mode: 'light'
  },
  darkly: {
    accent: '#7dd3fc',
    accentContrast: '#082f49',
    surface: 'rgba(15, 23, 42, 0.96)',
    surfaceColor: '#f8f9fa',
    mutedSurface: 'rgba(30, 41, 59, 0.96)',
    mutedColor: '#adb5bd',
    border: 'rgba(125, 211, 252, 0.22)',
    shadow: 'rgba(0, 0, 0, 0.28)',
    radius: '0.375rem',
    mode: 'dark'
  },
  sketchy: {
    accent: '#dc2626',
    accentContrast: '#ffffff',
    surface: 'rgba(255, 251, 235, 0.94)',
    surfaceColor: '#212529',
    mutedSurface: 'rgba(254, 242, 242, 0.94)',
    mutedColor: '#6c757d',
    border: 'rgba(220, 38, 38, 0.18)',
    shadow: 'rgba(127, 29, 29, 0.12)',
    radius: '0',
    mode: 'light'
  }
};

function applyThemePreset(themeName) {
  const preset = themePresets[themeName];
  Object.entries(preset).forEach(([key, value]) => {
    const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
    document.documentElement.style.setProperty(`--example-theme-${cssKey}`, value);
  });
}

summernote.create('#bootswatch-editor', {
  height: 360,
  dialogsInBody: true
});