This specification is a work in progress (WIP). We recommend using this one for now.

§Dracula Syntax Highlighting Specification

Official syntax highlighting and design specification for the Dracula Theme ecosystem.

§Overview

Dracula is a comprehensive dark/light color scheme designed for code editors, terminal emulators, and applications across multiple platforms. The project delivers a unified visual experience that minimizes context switching and enhances productivity.

Available Variants:

• Dracula Classic: Original dark theme (Dracula Theme);
• Alucard Classic: Complementary light theme.

§Color Palette

Dracula Classic:

Alucard Classic:

§ANSI Color Palette

For terminal applications, Dracula also defines ANSI colors.

Dracula Classic:

Alucard Classic:

§UI Color Palette

Dracula Classic:

Alucard Classic:

§Functional Colors

UI-specific colors for interactive elements, borders, and indicators. Do not use in editor or terminal applications.

§Syntax Highlighting Rules

§Token Classification

Following TextMate scoping conventions for consistent highlighting across editors.

§Primary Tokens

Keywords & Storage → Pink

• Language Keywords: if, else, return, function, class;
• Storage Modifiers: static, public, private, const, let, var;
• Control Flow: try, catch, throw, break, continue.

Functions & Methods → Yellow

• Function Declarations and Calls;
• Method Invocations;
• Built-in Functions.

Classes & Types → Purple

• Class Names and Constructors;
• Type Annotations: int, string, boolean;
• Interfaces and Enums;
• Generic Type Parameters.

Strings & Text → Green

• String Literals: "Dracula", 'Dracula', template;
• Markup Text Content;
• Attribute Values in HTML/XML;
• Escape Sequences.

Numbers & Constants → Orange

• Numeric Literals: 42, 3.14, 0xFF, 1e5;
• Boolean Values: true, false;
• Language Constants: null, undefined, NaN.

Comments → Comment

• Single-Line: //, #, --;
• Multi-Line: /* */, <!-- -->;
• Documentation Blocks;
• Annotations and Decorators.

Support & Built-ins → Cyan

• Built-in Classes and Functions;
• Regular Expressions;
• CSS Properties and Units;
• HTML/XML Tag and Attribute Names;
• Library Functions.

Variables & Identifiers → Foreground

• Variable Names and Parameters;
• Object Properties;
• Default Text Content.

Errors & Warnings → Red

• Syntax Errors;
• Deprecated Code;
• Invalid Tokens;
• Diff Deletions.

§Styling Modifiers

• Italic: Comments, type parameters, documentation;
• Bold: Strong emphasis (use sparingly);
• Underline: Links, misspelled words.

§Language-Specific Examples

§JavaScript/TypeScript

/**
 * @param {string} foo - Some string parameter.
// ^^^^^^ --------------------------------------- Pink
//        ^^^^^^^^ ------------------------------ Cyan Italic
//                 ^^^ -------------------------- Orange Italic
//                     >* ----------------------- Comment
 */

§CSS

/* Pink - White */
body {
  /* Cyan - Pink - Purple */
  background: #000;
}

/* Green - White */
#dracula {
  display: none;
  visibility: hidden;
  height: calc(var(--deathDate) - var(--birthDate));
  /* Cyan - Pink - Yellow */
  font-family: "Transylvania";
  /* Cyan - Pink - Purple */
  opacity: 0;
}

§Special Rules

1. Braces and Parentheses: Should match the foreground color of the currently scoped position:

   • Purple for headings;
   • Foreground for regular text.

2. Instance Reserved Words: Words that interact with the instance (this, self, super) should be highlighted consistently;

3. Generic Templates: Generic type declarations should use Orange Italic.

§Implementation Guidelines

§Accessibility Standards

• Maintain 4.5:1 minimum contrast ratio (WCAG 2.1 Level AA);
• Ensure color is not the sole means of conveying information;
• Test with common color vision deficiencies.

§Consistency Requirements

1. Priority Order: Follow token classification hierarchy;
2. Fallback Handling: Use foreground color for unrecognized tokens;
3. Semantic Consistency: Same meaning = same color across languages;
4. Reference Implementation: dracula/cursor.

§Testing Methodology

Use the standard test snippet to validate implementations:

/**
 * Once upon a time...
 */
class Vampire {
  constructor(props) {
    this.location = props.location;
    this.birthDate = props.birthDate;
    this.deathDate = props.deathDate;
    this.weaknesses = props.weaknesses;
  }

  get age() {
    return this.calcAge();
  }

  calcAge() {
    return this.deathDate - this.birthDate;
  }
}

// ...there was a guy named Vlad
const Dracula = new Vampire({
  location: "Transylvania",
  birthDate: 1428,
  deathDate: 1476,
  weaknesses: ["Sunlight", "Garlic"]
});

Our official Template for submissions includes a sample folder containing numerous code examples in various languages to assist with theme development.

§UI Design Guidelines

§Visual Hierarchy

Apply colors based on functional importance and user interaction patterns:

• High Priority: Interactive elements, errors, primary actions;
• Medium Priority: Secondary content, navigation, labels;
• Low Priority: Decorative elements, dividers, backgrounds.

§Component Guidelines

Borders and Separators

• Subtle borders: Use Current Line color;
• Interactive borders: Use functional colors;
• Focus rings: Functional Purple or appropriate accent.

Shadows and Depth

• Shadow color should harmonize with background;
• Avoid shadows darker than supporting surface;
• Use elevation sparingly to maintain theme coherence.

State Indicators

• Success: Functional Green;
• Warning: Functional Orange;
• Error: Functional Red;
• Info: Functional Cyan.

§Community and Maintenance

Core Team:

• Zeno Rocha (Creator);
• Lucas de França (Maintainer).

Special thanks to Derek Sifford, creator of the first version of this specification on May 28, 2017.

Resources:

• GitHub: github.com/dracula;
• Template: github.com/dracula/template;
• Samples: github.com/dracula/template/tree/main/sample.

§Contributing

"We learn big things from small experiences" - Bram Stoker

Dracula Theme is an open-source project driven by and for the community. Most apps that support the theme are contributions from our community.

As much as the team is responsible for the core theme and wants to support all available applications, we can only do some of it ourselves.

That's why the community is essential for this project to keep evolving.

§Creating New Implementations

1. Fork the template repository

   git clone https://github.com/dracula/template.git
   

2. Follow the specification

   • Use exact color values from this specification;
   • Implement syntax highlighting rules consistently;
   • Test with provided code samples.

3. Submit for review

   • The repository must contain the following files, as in the template:
     • README.md: introduction and guide for GitHub users;
     • screenshot.png: displays your Dracula-themed theme on the website;
     • INSTALL.md: installation instructions to display on the website;
     • sample: code samples in various languages to aid theme creation. (Consider removing this folder before submission.);
   • Submit an issue with repository link.

4. Organization transfer

   • Accepted repositories move under Dracula organization;
   • Maintain consistency with other official implementations.

§Quality Standards

• Color Accuracy: Use exact hex values from specification;
• Coverage: Support all major syntax categories;
• Documentation: Clear installation and usage instructions;
• Testing: Validate against multiple code samples;
• Maintenance: Respond to issues and keep updated.

This specification is the authoritative reference for Dracula Theme implementations. For updates and community resources, visit draculatheme.com.

See something that could be improved in this documentation? Contribute by editing this page on GitHub.