sql-workbench-embedded-themes

v0.1.4

Published

4 months ago

Themes for sql-workbench-embedded - CodeMirror themes converted to SQL Workbench format

Downloads

0High
0Medium
0Low

tobilg

sql-workbench-embedded themes sql editor duckdb sql-workbench

SQL Workbench Embedded Themes

A comprehensive collection of themes for sql-workbench-embedded, converted from the popular CodeMirror 5 editor themes.

Features

66 CodeMirror 5 themes converted to SQL Workbench format (50 dark + 16 light)
Type-safe with full TypeScript support
Fully tree-shakeable - each theme is a separate ~1.2-1.5KB chunk (0.5-0.6KB gzipped)
Zero bloat - only import what you use, no unused themes in your bundle
Easy to use with simple import statements
Multiple formats - ESM modules and UMD bundles for maximum compatibility

Installation

npm install sql-workbench-embedded-themes

Usage

Basic Usage

import { dracula, monokai, elegant } from 'sql-workbench-embedded-themes';

// Use with sql-workbench-embedded
const workbench = new SQLWorkbench({
  customThemes: {
    dracula: {
      config: dracula.config
    }
  },
  theme: 'dracula'
});

Using ESM from CDN (Browser)

For modern browsers with ES modules support:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SQL Workbench with Themes</title>
</head>
<body>
  <pre class="sql-workbench-embedded">
    <code>
      SELECT * FROM generate_series(1, 10);
    </code>
  </pre>

  <script type="module">
    // Import SQL Workbench and themes from unpkg
    import SQLWorkbench from 'https://unpkg.com/sql-workbench-embedded/dist/sql-workbench-embedded.esm.js';

    // Create workbench with custom theme
    const workbench = new SQLWorkbench.Embedded(document.querySelector('.sql-workbench-embedded'), {
      customThemes: {
        dracula: {
          config: window.SQLWorkbenchThemes.dracula.config
        },
      },
      theme: 'dracula'
    });
  </script>

  <!-- Load specific theme via CDN (UMD) -->
  <script src="https://unpkg.com/sql-workbench-embedded-themes/dist/umd/themes/dracula.js"></script>
</body>
</html>

Using UMD Bundles (Browser/CDN)

For direct browser usage without a bundler, UMD bundles are available:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SQL Workbench with Themes (UMD)</title>
</head>
<body>
  <pre class="sql-workbench-embedded">
    <code>
      SELECT * FROM generate_series(1, 10);
    </code>
  </pre>

  <!-- Load SQL Workbench -->
  <script src="https://unpkg.com/sql-workbench-embedded/dist/sql-workbench-embedded.js"></script>

  <!-- Load specific themes via CDN -->
  <script src="https://unpkg.com/sql-workbench-embedded-themes/dist/umd/themes/dracula.js"></script>

  <script>
    // Themes are available on window.SQLWorkbenchThemes
    const workbench = new SQLWorkbench.Embedded(document.querySelector('.sql-workbench-embedded'), {
      customThemes: {
        dracula: {
          config: window.SQLWorkbenchThemes.dracula.config
        },
      },
      theme: 'dracula',
    });
  </script>
</body>
</html>

Tree-Shaking

Important Notes on Tree-Shaking:

Tree-shaking only works when using a bundler (Vite, Webpack, Rollup, etc.) in your project:

✅ Tree-shaking works:

# Install via npm
npm install sql-workbench-embedded-themes

# Import in your project
import { dracula } from 'sql-workbench-embedded-themes';

# Build with your bundler
npm run build  # Only dracula theme will be in your final bundle

❌ Tree-shaking does NOT work:

<!-- Loading ESM directly from CDN in browser -->
<script type="module">
  // This downloads the entire ESM bundle, not just dracula
  import { dracula } from 'https://unpkg.com/sql-workbench-embedded-themes/dist/esm/index.js';
</script>

For CDN usage without a bundler, use individual UMD bundles instead to minimize download size:

<!-- Only loads the specific theme you need (~1.4KB) -->
<script src="https://unpkg.com/sql-workbench-embedded-themes/dist/umd/themes/dracula.js"></script>

Using Theme Registry

import { allThemes, getTheme, hasTheme } from 'sql-workbench-embedded-themes';

// Get all themes
console.log(allThemes);

// Get a specific theme
const theme = getTheme('dracula');

// Check if a theme exists
if (hasTheme('monokai')) {
  // Use the theme
}

Theme Structure

Each theme includes:

interface Theme {
  metadata: {
    name: string;
    category: 'dark' | 'light';
    description?: string;
    codeMirrorName?: string;
  };
  config: ThemeConfig;
}

Development

Setup

# Install dependencies
npm install

# Type check
npm run type-check

# Build
npm run build

# Development mode
npm run dev

Project Structure

sql-workbench-embedded-themes/
├── src/
│   ├── types/           # TypeScript type definitions
│   ├── themes/          # Theme implementations
│   │   ├── dark/        # 50 dark themes
│   │   └── light/       # 16 light themes
│   └── index.ts         # Main export
├── dist/                # Build output
│   ├── esm/             # ES modules (tree-shakeable)
│   │   ├── themes/      # Individual theme modules
│   │   └── index.js     # Main ESM entry
│   ├── umd/             # UMD bundles (browser/CDN)
│   │   └── themes/      # 66 standalone UMD bundles
│   └── index.d.ts       # TypeScript declarations
├── package.json
├── tsconfig.json
└── vite.config.ts       # Unified build configuration

Contributing

Contributions are welcome! Areas for improvement:

Theme refinements - Improve color mappings for existing themes
Custom themes - Add new custom themes beyond CodeMirror 5
Documentation - Enhance examples and usage guides
Testing - Visual regression tests for themes

Adding a New Theme

Create a new file in src/themes/dark/ or src/themes/light/
Follow the existing theme structure (see any theme file for reference)
Export the theme in the respective index file (src/themes/dark/index.ts or src/themes/light/index.ts)
Export from main index (src/index.ts)
Run npm run build to generate ESM and UMD bundles
Test the theme in your application

License

MIT

Credits

Original CodeMirror themes from CodeMirror 5
Built for sql-workbench-embedded

Related Projects

sql-workbench-embedded - Embed a SQL Workbench in your web applications