SquibView Themes Example

This example demonstrates SquibView's theming system with three built-in themes and shows how to create custom themes.

SquibView Theme System

SquibView supports theming through CSS custom properties. Choose a theme below or create your own.

Built-in Themes

Applying a Theme

// Method 1: Add class to body or container
document.body.classList.add('dark-theme');

// Method 2: Add data attribute
editor.container.setAttribute('data-theme', 'dark');

// Method 3: Override CSS variables directly
editor.container.style.setProperty('--squibview-background-color', '#1a1a1a');

Creating a Custom Theme

/* Define your theme with CSS custom properties */
.my-custom-theme {
  --squibview-primary-color: #ff6b6b;
  --squibview-background-color: #f8f9fa;
  --squibview-border-color: #dee2e6;
  --squibview-input-background-color: #ffffff;
  /* ... more properties */
}

Current Theme Colors

Available CSS Variables

--squibview-primary-color
--squibview-primary-text-color
--squibview-secondary-color
--squibview-secondary-text-color
--squibview-border-color
--squibview-background-color
--squibview-input-background-color
--squibview-output-background-color
--squibview-table-header-bg
--squibview-code-block-bg
--squibview-gutter-bg
--squibview-gutter-fg
--squibview-gutter-border