Themes

9 themes. One attribute.

Set data-jb-theme on your <html> tag and every component updates instantly. Build your own with a single CSS block.

Build your own theme Token reference
How it works

One line changes everything

Every DivDrop component reads from CSS custom properties — --jb-bg, --jb-brand, --jb-text etc. A theme is simply a block of overrides for those properties.

When you set data-jb-theme="forest" on <html>, the browser re-evaluates all those var() calls instantly. No JavaScript required for the visual change.

To build your own theme, copy the token block below, rename it, and adjust the values. Add one attribute to your HTML and it works.

<!-- Built-in: just set the attribute -->
<html data-jb-theme="midnight">

<!-- Custom: add a style block + attribute -->
<style>
[data-jb-theme="mybrand"] {
  --jb-bg:      #1a1a2e;
  --jb-brand:   #7c3aed;
  --jb-nav-bg:  #7c3aed;
  --jb-nav-color: #fff;
  /* ... other tokens */
}
</style>
<html data-jb-theme="mybrand">
Built-in themes

Click Preview to see the page change

Default grey

The default DivDrop palette. Warm grey surfaces with a clean black brand.

<html data-jb-theme="light">
Near-black

Deep dark surfaces with pure white as the brand accent. Easy on the eyes.

<html data-jb-theme="dark">
Deep navy

Midnight blue backgrounds with an electric blue accent. Developer favourite.

<html data-jb-theme="midnight">
Dark moss green

Deep forest green surfaces with a fresh emerald accent.

<html data-jb-theme="forest">
Desert sunset

Warm burnt sienna backgrounds with a terracotta orange accent.

<html data-jb-theme="sand">
Soft blush

Delicate pink-tinted surfaces with a deep red accent.

<html data-jb-theme="rose">
Cool blue-grey

Professional cool-toned surfaces with a deep ocean blue brand.

<html data-jb-theme="slate">
Black + red

Pure black surfaces with a bold red-coral accent. Maximum contrast.

<html data-jb-theme="carbon">
Clean white

Crisp white surfaces with pure black. Like a well-designed document.

<html data-jb-theme="paper">
Token reference

What to set in your theme block

These are the tokens that control visual theming. Everything else (radius, spacing, font) stays consistent across themes by default.

[data-jb-theme="mytheme"] {
  /* Backgrounds */
  --jb-bg:             #ffffff;   /* Page background */
  --jb-surface:        #f5f5f5;   /* Panel / card surface */
  --jb-surface-soft:   #efefef;   /* Slightly darker surface */
  --jb-surface-muted:  #e5e5e5;   /* Table headers, muted areas */

  /* Text */
  --jb-text:           #000000;   /* Primary text */
  --jb-text-muted:     #333333;   /* Secondary text, paragraphs */
  --jb-text-faint:     #666666;   /* Labels, hints, metadata */

  /* Brand / accent */
  --jb-brand:          #000000;   /* Buttons, links, active states */
  --jb-border:         rgba(0,0,0,.15);  /* Visible borders */
  --jb-border-soft:    rgba(0,0,0,.08);  /* Subtle borders */
  --jb-brand-soft:     rgba(0,0,0,.06);  /* Soft badge/highlight bg */

  /* Header bar */
  --jb-header-bg:      #000000;   /* Header background */
  --jb-header-color:   #ffffff;   /* Header text */

  /* Nav pill */
  --jb-nav-bg:         #000000;   /* Nav pill background */
  --jb-nav-color:      #ffffff;   /* Nav pill text */
}

Ready to use a theme?

Add the CDN link, set your theme attribute, and start building with the full component library.

Get started View components