dbeaver-theming

star 0

Generates DBeaver dark themes from a single primary hex color using Eclipse E4 CSS with SQL editor preference keys in RGB triplet format. Use when asked to "create a DBeaver theme", "generate DBeaver colors", "theme SQL editor", or "port palette to DBeaver". Produces modular E4 CSS files with base, syntax, diagnostics, and UI chrome modules packaged for plugin integration.

awieczork By awieczork schedule Updated 2/26/2026
play_arrow Run Skill in Manus View GitHub

name: 'dbeaver-theming' description: 'Generates DBeaver dark themes from a single primary hex color using Eclipse E4 CSS with SQL editor preference keys in RGB triplet format. Use when asked to "create a DBeaver theme", "generate DBeaver colors", "theme SQL editor", or "port palette to DBeaver". Produces modular E4 CSS files with base, syntax, diagnostics, and UI chrome modules packaged for plugin integration.'

This skill generates DBeaver dark themes from a single primary hex color using OKLCH palette derivation and Eclipse E4 CSS output. The governing principle is modular completeness — every SQL editor preference key and UI chrome selector receives a derived color organized into logical modules. Begin with <step_1_derive_palette> to generate the foundational color scales.

  • Generate a new DBeaver dark theme from a primary hex color with all 22 SQL editor preference keys
  • Port an existing VS Code or RStudio palette to DBeaver format while maintaining cross-editor semantic consistency
  • Add database-specific token colors (table, column, schema highlighting) that have no equivalent in other editors
  • Package a generated theme as a DBeaver plugin with proper plugin.xml and manifest structure
  • Audit an existing DBeaver theme for contrast compliance after converting RGB triplets to OKLCH

DBeaver themes decompose into six logical modules. Each module owns a subset of the 22 SQL editor preference keys or Eclipse E4 CSS selectors — no key or selector appears in more than one module.

Module Scope Count
base Core editor surface 3 preference keys
syntax-core Core SQL syntax tokens 6 preference keys
syntax-database Database-specific tokens (DBeaver-unique) 7 preference keys
syntax-extended Extended tokens 3 preference keys
diagnostics Error and AI features 3 preference keys
ui-chrome Eclipse E4 CSS for DBeaver UI surfaces CSS selectors only

Module: base

Key Purpose
background Editor background (R,G,B)
foreground Default text color
disabled.background Disabled text background

Module: syntax-core

Key Purpose
keyword.foreground SQL keywords (SELECT, FROM, WHERE)
string.foreground String literals
number.foreground Numeric literals
comment.foreground Comments
command.foreground SQL commands
delimiter.foreground Statement delimiters

Module: syntax-database

Key Purpose
table.foreground Table name references
table.alias.foreground Table alias references
column.foreground Column name references
column.derived.foreground Derived column references
schema.foreground Schema name references
composite.field.foreground Composite field references
datatype.foreground Data type names

Module: syntax-extended

Key Purpose
parameter.foreground Query parameters
function.foreground Function calls
sqlVariable.foreground SQL variables

Module: diagnostics

Key Purpose
semanticError.foreground Semantic error highlighting
aiSuggestion.foreground AI suggestion text
aiSuggestion.background AI suggestion background

Module: ui-chrome — Eclipse E4 CSS selectors for DBeaver UI surfaces beyond the SQL editor. These use standard E4 CSS syntax, not preference keys:

  • Shell — top-level window background
  • CTabFolder — tab folder containers (navigator, editor, results)
  • CTabItem — individual tab styling (active, inactive, hover)
  • .MPartStack — part stack containers for view grouping
  • .MTrimBar — toolbar trim areas (main toolbar, status bar)
  • Table, Tree — navigator tree and result set grid
  • .MToolBar — toolbar button containers
  • Composite — general composite containers

Seven of the 22 preference keys represent database-specific semantic roles with no direct equivalent in VS Code or RStudio. These tokens distinguish DBeaver theming from general-purpose code editors.

DBeaver key Semantic meaning VS Code equivalent RStudio equivalent
table.foreground Table name references in SQL N/A N/A
table.alias.foreground Table alias references N/A N/A
column.foreground Column name references N/A N/A
column.derived.foreground Derived/computed column references N/A N/A
schema.foreground Schema name references N/A N/A
composite.field.foreground Composite type field references N/A N/A
datatype.foreground SQL data type names (INT, VARCHAR) N/A N/A

Color assignment guidance: Database-specific tokens should use distinct hue rotations from the primary palette to create visual separation between structural SQL elements (tables, columns, schemas) and syntactic elements (keywords, strings, comments). Assign related tokens to the same hue family — tables and table aliases share one hue, columns and derived columns share another.

DBeaver has no user-facing theme import mechanism. Custom themes must be packaged as Eclipse plugins and installed into DBeaver's plugin directory.

Plugin project structure:

org.dbeaver.theme.custom/
├── META-INF/
│   └── MANIFEST.MF
├── css/
│   └── e4-dark-custom-theme.css
├── plugin.xml
└── build.properties

plugin.xml — registers the theme via the org.eclipse.e4.ui.css.swt.theme extension point:

<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
   <extension point="org.eclipse.e4.ui.css.swt.theme">
      <theme id="org.dbeaver.theme.custom.dark"
             label="Dark — Custom"
             basestylesheeturi="css/e4-dark-custom-theme.css"/>
   </extension>
</plugin>

META-INF/MANIFEST.MF — plugin manifest with theme dependency:

Manifest-Version: 1.0
Bundle-ManifestVersion: 2
Bundle-Name: Custom Dark Theme
Bundle-SymbolicName: org.dbeaver.theme.custom;singleton:=true
Bundle-Version: 1.0.0
Require-Bundle: org.eclipse.e4.ui.css.swt.theme

build.properties — includes CSS and plugin descriptor:

bin.includes = plugin.xml,\
               css/,\
               META-INF/

Installation: Copy the plugin folder into DBeaver's plugins/ directory and restart. The theme appears in Preferences → User Interface → Appearance → Theme.

Execute steps sequentially. Each step produces output that feeds the next — palette feeds semantic mapping, semantic mapping feeds module generation, modules combine into the final E4 CSS file.

Generate six 12-step Radix scales from the primary hex using OKLCH color space via coloraide.

Load color-derivation.instructions.md for: OKLCH-first derivation rules, Radix 12-step architecture, coloraide usage patterns, and contrast enforcement requirements.

Required scales:

Scale Purpose Hue derivation
primary Accents, keywords, active states Primary hex hue (constant)
neutral Backgrounds, borders, text, surfaces Primary hue with chroma 0.005–0.02
red Errors, semantic error highlighting Hue rotation to ~25°
amber Warnings, parameters, numeric literals Hue rotation to ~70°
green String literals, column tokens Hue rotation to ~145°
blue Table tokens, schema tokens, functions Hue rotation to ~245°

Derivation rules:

  • Hold hue constant within each scale — vary only L and C across the 12 steps
  • Dark mode lightness range: step 1 ~L 0.13–0.15, step 12 ~L 0.93–0.97
  • Chroma curve: low (steps 1–2), rising (steps 3–8), peak (steps 9–10), moderate (steps 11–12)
  • Apply coloraide gamut mapping (fit('srgb')) on every OKLCH→sRGB conversion
  • Output all colors as RGB triplets (0–255 integers) for DBeaver preference keys

Assign palette scale steps to DBeaver semantic roles following the cross-editor mapping.

Load theme-conventions.instructions.md for: the <semantic_mapping> table and DBeaver-specific format constraints.

Core role assignments (all 22 keys):

Semantic role Scale/step DBeaver key
Editor background neutral/1 background
Default text neutral/12 foreground
Disabled background neutral/3 disabled.background
SQL keywords primary/9 keyword.foreground
String literals green/9 string.foreground
Numeric literals amber/9 number.foreground
Comments neutral/11 comment.foreground
SQL commands primary/11 command.foreground
Delimiters neutral/11 delimiter.foreground
Table names blue/9 table.foreground
Table aliases blue/11 table.alias.foreground
Column names green/11 column.foreground
Derived columns green/10 column.derived.foreground
Schema names blue/10 schema.foreground
Composite fields amber/11 composite.field.foreground
Data types primary/11 datatype.foreground
Parameters amber/10 parameter.foreground
Functions blue/9 function.foreground
SQL variables amber/9 sqlVariable.foreground
Semantic errors red/9 semanticError.foreground
AI suggestion text neutral/11 aiSuggestion.foreground
AI suggestion bg neutral/3 aiSuggestion.background

Constraint: Every foreground/background pair must pass dual-check contrast before proceeding — verify in <step_7_audit_contrast>.

Generate the base module containing core editor surface colors.

Keys to produce (3): background, foreground, disabled.background

RGB conversion: Convert each OKLCH-derived sRGB hex value to integer R,G,B triplet. Parse hex #rrggbb → int(rr, 16), int(gg, 16), int(bb, 16). Verify each channel is 0–255.

Output format:

background=R,G,B
foreground=R,G,B
disabled.background=R,G,B

Generate the three syntax modules: core, database, and extended.

Syntax-core (6 keys): keyword.foreground, string.foreground, number.foreground, comment.foreground, command.foreground, delimiter.foreground

Syntax-database (7 keys): table.foreground, table.alias.foreground, column.foreground, column.derived.foreground, schema.foreground, composite.field.foreground, datatype.foreground

Syntax-extended (3 keys): parameter.foreground, function.foreground, sqlVariable.foreground

Color differentiation: Database-specific tokens use distinct hues from syntax-core tokens. Tables and schemas use the blue family, columns use the green family, composites and parameters use the amber family. This creates a visual hierarchy: structural elements (database objects) are visually distinct from syntactic elements (keywords, strings).

Generate the diagnostics module for error and AI features.

Keys to produce (3): semanticError.foreground, aiSuggestion.foreground, aiSuggestion.background

Color guidance:

  • semanticError.foreground — red/9, high visibility against editor background
  • aiSuggestion.foreground — neutral/11, subtle secondary text
  • aiSuggestion.background — neutral/3, subtle surface distinction from editor background

Contrast constraint: semanticError.foreground vs background must achieve WCAG AA 4.5:1 and APCA Lc 75 minimum — errors must be immediately visible.

Generate Eclipse E4 CSS for DBeaver UI surfaces beyond the SQL editor.

E4 CSS selectors and color assignments:

Selector Property Scale/step
Shell background-color neutral/1
Shell color neutral/12
CTabFolder background-color neutral/2
CTabFolder swt-selected-tabs-background neutral/2 to neutral/3 gradient
CTabItem color neutral/11 (inactive)
CTabItem:selected color neutral/12
.MPartStack background-color neutral/2
.MTrimBar background-color neutral/1
Table, Tree background-color neutral/2
Table, Tree color neutral/12

E4 CSS format note: E4 CSS uses space-separated RGB integers (R G B) for background-color and color properties — NOT comma-separated and NOT hex. This differs from the SQL editor preference keys which use comma-separated (R,G,B).

Run WCAG 2.1 AA + APCA dual-check on all foreground/background pairs generated in steps 3–6.

Load contrast-audit/SKILL.md for: the complete pair collection, classification, calculation, and reporting workflow.

RGB→OKLCH conversion for contrast: DBeaver uses RGB triplets (0–255), but contrast calculations require sRGB normalized values. Convert: R/255, G/255, B/255 → sRGB → WCAG relative luminance. Use coloraide for all conversions — NEVER manually compute luminance.

Threshold quick reference:

Context WCAG minimum APCA minimum
Body text (code tokens) 4.5:1 Lc 75
Large text (headings) 3:1 Lc 60
UI components (tabs, toolbar) 3:1 Lc 60
Sub-text (comments, hints) 3:1 Lc 45

Required pairs to verify:

  • All 19 foreground keys vs background (editor background)
  • semanticError.foreground vs background — must pass body text thresholds
  • aiSuggestion.foreground vs aiSuggestion.background
  • UI chrome text colors vs their respective backgrounds

Remediation: When a pair fails contrast, adjust lightness (L) in OKLCH — NEVER adjust hue or chroma. Increase foreground L or decrease background L until both thresholds pass.

Validate all generated content for correctness before assembly.

RGB value validation:

  • Every R,G,B triplet has exactly three comma-separated integers
  • Each integer is in range 0–255
  • No floating-point values, no hex values, no named colors

Key completeness:

  • All 22 preference keys present — cross-reference against the module tables in <module_architecture>
  • No duplicate keys
  • No keys outside the documented 22

CSS syntax validation (ui-chrome module):

  • E4 CSS parses without errors — no missing semicolons, no unclosed braces
  • Color values in E4 CSS use space-separated integers (R G B), not commas
  • No invalid property names or values

Convention compliance:

  • All colors trace to the OKLCH pipeline — no hardcoded values
  • OKLCH→sRGB gamut mapping applied on every conversion
  • RGB integers derived from gamut-mapped sRGB values

Merge all modules into the final E4 CSS file with proper plugin structure.

E4 CSS file structure:

/* Theme: Dark — {Name}
 * Primary: {primary_hex}
 * Version: {version}
 * Generated: {date}
 */

/* === SQL Editor Preferences === */
IEclipsePreferences#org-eclipse-ui-workbench:dbeaver-sql-editor {
  preferences:
    'background=R,G,B\n
     foreground=R,G,B\n
     keyword.foreground=R,G,B\n
     ...all 22 keys...\n';
}

/* === UI Chrome === */
Shell { ... }
CTabFolder { ... }
CTabItem { ... }
.MPartStack { ... }
.MTrimBar { ... }
Table, Tree { ... }

Assembly order: Metadata comment header → SQL editor preferences block (all 22 keys from base, syntax-core, syntax-database, syntax-extended, diagnostics merged into a single IEclipsePreferences rule) → UI chrome CSS selectors.

Preference encoding: All 22 key=value pairs are encoded as a single preferences property value. Each pair is separated by \n within a single-quoted string. Key order follows module order: base → syntax-core → syntax-database → syntax-extended → diagnostics.

Plugin packaging: After CSS generation, place the file in the plugin project structure defined in <plugin_integration>. Generate plugin.xml, MANIFEST.MF, and build.properties alongside the CSS file.

Critical rules that govern all DBeaver theme generation. Violations cause broken themes or silent color fallbacks.

  • RGB triplet format — SQL editor preference keys use comma-separated integers R,G,B (0–255). E4 CSS properties use space-separated integers R G B. NEVER use hex values, named colors, or floating-point values. NEVER mix the two formats
  • All 22 keys required — DBeaver falls back to default colors for any missing preference key. Partial definitions produce inconsistent themes with mixed dark/light surfaces. ALWAYS include all 22 keys
  • OKLCH-only derivation — All colors derive from the primary hex via OKLCH. Cross-reference color-derivation.instructions.md for pipeline rules. No hardcoded RGB values anywhere
  • Plugin packaging required — DBeaver has no user-facing theme import. ALWAYS generate the complete plugin structure (plugin.xml, MANIFEST.MF, build.properties, CSS file). NEVER instruct users to import a standalone CSS file
  • Cross-editor consistency — Semantic roles shared with VS Code and RStudio (background, foreground, keywords, strings, comments, functions, constants) must use the same palette steps. Cross-reference theme-conventions.instructions.md for the <semantic_mapping> table
  • Gamut mapping — ALWAYS apply coloraide gamut mapping (fit('srgb')) before converting to RGB integers. OKLCH values outside sRGB gamut produce invalid channel values if clamped manually
  • If a contrast check fails on a foreground/background pair, then adjust the foreground lightness (L) in OKLCH — increase L for light-on-dark. Never adjust hue or chroma to fix contrast. Re-run dual-check after adjustment
  • If an RGB channel value falls outside 0–255 after conversion, then the OKLCH→sRGB gamut mapping was skipped — apply fit('srgb') before extracting RGB channels. Never clamp manually
  • If a preference key is missing from the assembled output, then cross-reference the 22-key list in <module_architecture> and add the missing key to its owning module
  • If E4 CSS fails to parse, then check for missing semicolons, unclosed braces, or malformed preferences string escaping — the \n separators within the single-quoted value are a common error source
  • If the theme does not appear in DBeaver after installation, then verify: plugin.xml extension point is org.eclipse.e4.ui.css.swt.theme, MANIFEST.MF has singleton:=true, plugin folder is in DBeaver's plugins/ directory, and DBeaver was restarted
  • If database-specific tokens show default colors, then verify the preference key names match exactly — DBeaver is case-sensitive on key names within the preferences property

P1 — Blocking (must pass before delivery):

  • All 22 SQL editor preference keys present in the assembled CSS
  • All RGB triplets contain exactly three comma-separated integers in range 0–255
  • E4 CSS parses without syntax errors
  • All foreground/background pairs pass WCAG 2.1 AA + APCA dual-check
  • All colors trace to the OKLCH pipeline — no hardcoded values
  • Plugin structure complete: plugin.xml, MANIFEST.MF, build.properties, CSS file
  • IEclipsePreferences selector uses correct identifier: org-eclipse-ui-workbench:dbeaver-sql-editor

P2 — Quality (should pass):

  • Database-specific tokens use distinct hues from syntax-core tokens
  • Cross-editor semantic roles use consistent palette steps per <semantic_mapping> table
  • UI chrome selectors cover Shell, CTabFolder, CTabItem, MPartStack, MTrimBar, Table, Tree
  • Metadata comment header present with theme name, primary hex, version, and date
  • E4 CSS background-color and color properties use space-separated format (R G B)

P3 — Polish (nice to have):

  • Table and table alias share a hue family; column and derived column share another
  • AI suggestion colors create a subtle but visible distinction from normal text
  • Body text pairs reach preferred APCA Lc 90 (not just minimum Lc 75)
  • Plugin MANIFEST.MF includes Bundle-Version matching theme version
Install via CLI
npx skills add https://github.com/awieczork/theme-framework --skill dbeaver-theming
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator
awieczork
awieczork Explore all skills →