Optimized Dracula Theme

A color theme inspired by dracula color theme.

This color theme is not based on dracula color theme. The color styles are similar with dracula color theme but all highlighting configurations are redesigned. All color configs are designed for a better looking in details.

This color theme extension is aimed to provide a better dev experience. It cannot support all those commonly used languages, but once it supports a language, this color theme will help you to be more comfortable and productive. The project is still under development.

There's a special version for vue development, if you are develop with vue framework, you can consider using Optimized Dracula Theme (vue).

Supported languages and frameworks.

Some of the languages or frameworks requires some extensions for code parsing. Without those extensions, the code highlighting theme will not work normally. Support status of the languages are listed as follows.

lang	basic	comment doc	special	require extension
dart	✔	✔	✔	Dart-Code.dart-code
go	✔	---	✔	golang.go
ts/js	✔	✔	✔	---
rust	❌	❌	❌	---
c/cpp	❌	❌	❌	---
c#	❌	❌	❌	---
swift	❌	❌	❌	---
python	❌	❌	❌	---
java	❌	❌	❌	---
html	✔	---	---	---
vue	✔	✔	✔	Vue.volar
react	❌	---	❌	---
css	✔	---	---	---
scss	✔	---	✔	---
sass	❌	---	❌	---
less	✔	---	✔	---
json	✔	---	---	---
jsonc	✔	---	---	---
yaml	✔	---	---	---
markdown	✔	---	✔	---

• basic means basic keywords, class/type, method/function highlighting.
• comment doc means highlighting of variables in documentation comment.
• special means special optimization for the language, such as readonly variables in ts/js, namespace in ts, and property names in dart.
• required extension means the highlighting might not be normal without those extensions.

Comment documentation for golang is not supported by vscode golang.go extension yet. If comment doc of golang is necessary for your project, please consider Goland by JetBrains. Or if you find an available golang comment doc extension, please notice the developer on Github Issues.

Cancel italic style of comments.

If you do not like italic style comments, just add those code into your .vscode/settings.json config file.

{
  // Use workspace config to cancel comments italic style.
  "editor.tokenColorCustomizations": {
    "[Optimized Dracula Theme]": {
      "textMateRules": [
        {
          "scope": ["comment.line", "comment.block"],
          "settings": {
            "fontStyle": ""
          }
        }
      ]
    }
  }
}

Related recommendations.

This extension only config color themes. The following recommendations can provide a better dev experience along with this color theme.

Font family recommendations.

This extension uses Iosevka as the default font face for debug. CJK users can consider Sarasa Mono, which is based on Iosevka.

Icon theme recommendations.

JonathanHarty.gruvbox-material-icon-theme.

Config recommendations.

You can add those code into your .vscode/settings.json file.

{
  // Workbench basic configs.
  "workbench.iconTheme": "gruvbox-material-icon-theme",
  "editor.bracketPairColorization.enabled": false,

  // Font size configs.
  "editor.lineHeight": 1.5,
  "editor.fontSize": 15,
  "editor.fontLigatures": true,

  // Minimap configs.
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "editor.minimap.scale": 2,
  "editor.minimap.size": "proportional",
  "editor.minimap.renderCharacters": false,
  "editor.minimap.showSlider": "always",

  // workbench display configuration
  "workbench.tree.indent": 18,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.tree.expandMode": "doubleClick"
}

Developers read.

This repo requires vsce globally installed, or the npm scripts will not be available. See vsce npm homepage.