Customize SQL Workbench Embedded to match your website's design
SQL Workbench Embedded comes with three built-in themes that you can use out of the box.
Ideal for websites with light backgrounds. Features clean, bright colors optimized for readability.
Perfect for dark mode websites. Reduces eye strain with carefully chosen dark colors.
Automatically adapts to the user's system preference (prefers-color-scheme).
Extend built-in themes or create completely custom themes to match your brand.
DuckDB-inspired theme with warm yellow and amber accents.
For complete control, define all theme properties including typography and spacing.
Experience the dark ocean theme with this interactive example.
Complete list of all available theme properties you can customize.
| Property | Description | Example |
|---|---|---|
| bgColor | Main background color | #ffffff |
| textColor | Primary text color | #1e293b |
| borderColor | Border and divider color | #e2e8f0 |
| editorBg | SQL editor background | #f8fafc |
| editorText | SQL editor text color | #0f172a |
| editorFocusBg | Editor background when focused | #f1f5f9 |
| controlsBg | Controls background | #ffffff |
| primaryBg | Primary button background | #3b82f6 |
| primaryText | Primary button text color | #ffffff |
| primaryHover | Primary button hover state | #2563eb |
| secondaryBg | Secondary button background | #f1f5f9 |
| secondaryText | Secondary button text color | #1e293b |
| secondaryHover | Secondary button hover state | #e2e8f0 |
| mutedText | Muted/secondary text color | #64748b |
| errorText | Error message text color | #dc2626 |
| errorBg | Error message background | #fee2e2 |
| errorBorder | Error message border color | #fca5a5 |
| tableHeaderBg | Result table header background | #f1f5f9 |
| tableHeaderText | Result table header text color | #0f172a |
| tableHover | Table row hover background | #f8fafc |
These properties control SQL syntax highlighting colors in the editor.
| Property | Description | Example |
|---|---|---|
| syntaxKeyword | SQL keywords (SELECT, FROM, WHERE, etc.) | #7c3aed |
| syntaxString | String literals | #059669 |
| syntaxNumber | Numeric values | #dc2626 |
| syntaxComment | Comment text | #64748b |
Customize fonts and sizes for different UI components to match your design system or improve accessibility.
| Property | Description | Example |
|---|---|---|
| fontFamily | Font family for container and UI elements | Inter, system-ui, sans-serif |
| editorFontFamily | Font family for the SQL editor (monospace) | JetBrains Mono, monospace |
| fontSize | Base font size for UI elements | 14px |
| editorFontSize | Font size for the SQL editor | 13px |
| buttonFontSize | Font size for buttons | 14px |
| metadataFontSize | Font size for metadata text | 12px |
Note: All color properties accept hexadecimal color values (e.g., '#0ea5e9'). Font sizes can be specified in px, rem, or em units. You can extend existing themes and only override the properties you need.
Use the extends property to build on top of 'light' or 'dark' themes. Only override the properties you need to change.
Ensure sufficient contrast between text and backgrounds for readability. Use tools like WebAIM's contrast checker.
If your site supports dark mode, create custom themes for both light and dark variants to maintain consistency.
Consider using CSS custom properties from your design system for consistent theming across your entire site.
Don't customize every property. Keep your theme focused on brand colors and key visual elements.
Get inspired by these pre-built custom theme examples.
Popular dark theme with vibrant colors. Inspired by the CodeMirror Dracula theme.
Precision colors for readability. Based on the acclaimed Solarized color scheme.
Dark variant of Solarized with carefully chosen contrasts for extended coding.
Warm dark theme with earthy tones. Inspired by the CodeMirror Ambiance theme.