Dracula

A high-contrast, vibrant palette of purples, pinks and greens — the most ported theme in the Linux world, rebuilt for Bootstrap 5.

Palette

Dracula is eleven colours: three surfaces, a foreground, a comment grey and seven vibrant accents. Two modes only — dark (below) and light via data-bs-theme="light". The softened counterpart lives in its own theme.

Backgrounds & foregrounds

background#282a36
current line#44475a
foreground#f8f8f2
comment#6272a4

Palette

cyan#8be9fd
green#50fa7b
orange#ffb86c
pink#ff79c6
purple#bd93f9
red#ff5555
yellow#f1fa8c

Colour utilities

cyan green orange pink purple red yellow

Neon layer

Toggle data-neon to add a soft accent glow to primary buttons, cards, focus rings and anything marked .dr-glow.

Prefer the softer take? → Dracula Soft

Code block

// main.js
const theme = 'dracula';
const accent = { purple: '#bd93f9', pink: '#ff79c6' };

function apply(name) {
    return { theme, accent: accent[name] ?? 0 };
}

Navbar

Buttons & Button Groups

Contextual variants

Outline variants

Sizes & states

Button groups

Typography

h1. The quick brown fox

h2. Jumps over the lazy dog

h3. Pack my box with five dozen

h4. Dozens of liquor jugs

h5. How vexingly quick daft zebras
h6. Jump!

A lead paragraph set at a larger size for introductory content.

Body copy stays neutral so the palette can shout; monospace carries all the chrome.

Inline elements like links, bold text, emphasis, inline code, Ctrl + K and highlighted text.

Palette inline: cyan green orange pink purple red yellow

Small print, footnotes and legal text.

Display headings

Display 6

Display 5

Blockquote

I'm a friendly fellow, most evenings I sit by the fire and read my grammar books.

Dracula

Lists

  • Eleven colours, everything else derived
  • Blocky geometry with square corners and sharp spinners
  • Ported to virtually every editor and Linux app

Tables

Ports
Application Toolkit Status
Neovimterminal native
Codeelectron official
GNOMEgtk third-party
iTerm2macos community
Style Background Accent Mode
Dracula#282a36#bd93f9dark
Dracula Light#f8f8f2re-mixedlight

Forms

We'll never share your address.
Name is available.
Slugs cannot contain spaces.

Search & input groups

@
$ .00

Checks, radios & switches

Range

Floating labels

Navs & Tabs

General

Session and account settings.

Display

Resolution, scaling and night light.

Storage

Disks, partitions and cleanup.

Hidden

You should not see this.

Pills & underline

Breadcrumbs

Pagination

Alerts

Badges

primary secondary native failed outdated info light dark pill
mail 12+

Progress & Spinners

Basic & contextual

Striped & animated

Stacked

Spinners

List Groups

Default & active

  • Overview
  • Buffers
  • Registers
  • Archived

Linked & actions

files symbols search

Flush

  • Flush item
  • Flush item

Inset

  • README.md
  • CHANGELOG.md

Cards

Basic

Flat surface, no blur.

Primary

Contextual card.

Success

Contextual card.

with header
Monospace header

Terminal chrome.

Header
Header, body & footer

Cards compose with the surface hierarchy.

updated 2 minutes ago
Bordered card

Square corners and hairline borders keep it terminal-flavoured.

wallpaper.png
Card with list group
Backgrounds
Accent colour
Icons
config synced.

Accordions

Default

An 11-colour palette with high contrast, designed to be easy on the eyes across long sessions.

Because eleven colours are easy to honour in almost every UI toolkit.

Add data-neon for accent glow on focus rings, buttons and cards.

Flush

Flush variant removes the outer border.

Each item keeps the style's surface colours.

Carousel

Dialogs

Offcanvas

Sidebar
  • overview
  • buffers
  • registers
Inspector
Panel content goes here.
Toolbar
A top drawer, handy for filters.

Popovers & Tooltips

Hover me

Toasts

Placeholders

Misc

Close buttons

Menus

Usage

Dark: <html data-bs-theme="dark"> · Light: data-bs-theme="light" · Glow: data-neon · Softer look: Dracula Soft