Summernote with Bootswatch themes

Switch between the public Bootswatch 5.3.8 themes and keep the same compiled Summernote Bootstrap 5 assets. The editor follows each theme's card radius, colors, and utility classes automatically.

Bootswatch 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 swaps only the Bootswatch CDN stylesheet. Summernote continues to use the same compiled summernote-bs5.css and summernote-bs5.js assets.

Bootswatch theme demo

Use the selector above to compare toolbar chrome, borders, radius, buttons, and shadows across themes.

The editor frame follows the active Bootstrap card styling.
The toolbar and status bar inherit card cap colors and edges.
The editor keeps using the standard public Summernote API.

Example configuration - Bootswatch

<link id="bootswatch-theme" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8dist/yeti/bootstrap.min.css" rel="stylesheet">

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

themeSelect.addEventListener('change', (event) => {
  themeLink.href = `https://cdn.jsdelivr.net/npm/bootswatch@5.3.8dist/${event.target.value}/bootstrap.min.css`;
});