Skip to content

Dracula theme minified πŸ“¦ Less GUI, more code β€” Minimal πŸŒ™ Dark & πŸ”† Light themes for VSCode

License

Notifications You must be signed in to change notification settings

AshGrowem/Dracula.min

Β 
Β 

Repository files navigation

Dracula.min

Dracula minified πŸ“¦ Less GUI, more code.

Minimal πŸŒ™ Dark & πŸ”† Light themes for VSCode

  • Flat
  • Borderless
  • All-one-color

Dracula.min is a minimal version of Dracula Official for VSCode. I was inspired by the beautiful seamless style of Material Theme which I fell in love with for its immersive feeling and distraction-free UI.

Dracula.min

Dracula.min Screenshot

Dracula.min Light

Dracula.min Light Screenshot

Dracula.min Light Darker

Dracula.min Light Darker Screenshot

Dracula.min White

Dracula.min White Screenshot

Dracula.min White Darker

Dracula.min White Darker Screenshot

Install

Marketplace

Go to this theme's VSCode Marketplace extension page and click install

Quick Open ⌘ P

ext install ashrafhadden.dracula-dot-min

Command Line

code --install-extension ashrafhadden.dracula-dot-min

settings.json

For those who prefer tweaking themes via settings.json, here are all the settings you need to mimic this theme. This has the added advantage of automatically including the latest Dracula Official theme updates.

Enable/Disable: surround and Toggle Block Comment ⇧ βŒ₯ A

  1. Set theme to Dracula
  2. Paste the following into your settings.json...
// settings.json
// ...

  "workbench.colorCustomizations": {
    "[Dracula]": {
      // Dracula.min
      // https://github.com/ashrafhadden/dracula.min#settingsjson
      "breadcrumb.background": "#282a36",
      "editor.background": "#282a36",
      "editorGroupHeader.tabsBackground": "#282a36",
      "panel.background": "#282a36",
      "sideBar.background": "#282a36",
      "sideBar.border": "#282a36",
      "sideBarSectionHeader.background": "#282a36",
      "sideBarSectionHeader.border": "#282a36",
      "statusBar.background": "#282a36",
      "statusBar.border": "#282a36",
      "statusBar.noFolderBackground": "#282a36",
      "tab.activeBackground": "#282a36",
      "tab.border": "#282a36",
      "tab.inactiveBackground": "#282a36",
      "terminal.background": "#282a36",
      "terminal.border": "#282a36",
      "titleBar.activeBackground": "#282a36",
      "titleBar.inactiveBackground": "#282a36"
    }
  }

Colors Used

https://github.com/ashrafhadden/dracula.min/blob/master/colors-used-table.md

Light Theme Methodology

When I first attempted to create a Dracula Light theme I simply switched the background #282a36 and foreground #f8f8f2 colors to see what would hapen.

Dracula.min Light (no contrast adjust) Screenshot

As it turns out, most dark theme colors only work for dark themes πŸ€·β€β™‚οΈ When you only switch the background and foreground, the syntax hightlighting colors are often left with very poor contrast. In the screenshot above, Yellow is nearly invisible.

Chroma.js to the rescue!

Thanks to the powerful color manipulation library Chroma.js, I was able to darken all the syntax colors using it's color.darken() method.

currentColor = chroma(currentColor).darken(1.5);

Dracula.min (darken equally) Screenshot

However as you can see, darkening all the syntax colors equally doesn't quite cut it. The yellows are still a bit too light and the file explorer selection highlight on the left is difficult to see. Darkening each color manually and checking by eye seemed like hard work πŸ‘€, so being the lazy programmer that I am, I decided to try and automate it!

patrick technology GIF

Using Chroma's .contrast method I was able to create a while loop that darkened each syntax color indefinitely until it's contrast ratio reached 4.5. 4.5:1 is the WCAG's "Contrast (Minimum)" recommendation for text.

while (chroma.contrast(currentColor, foregroundColor) < 4.5) {
    currentColor = chroma(currentColor).darken(0.001);
}

While the contrast ratio between currentColor and foregroundColor is less than 4.5, darken the currentColor by 0.1%

Which results in Dracula.min Light.

Light Theme Darker

The WCAG also has a AAA or "Contrast (Enhanced)" recommendation of 7:1. Using the same method as above we can do the following to create a slightly darker syntax variant of the Light Theme:

while (chroma.contrast(currentColor, foregroundColor) < 7) {
    currentColor = chroma(currentColor).darken(0.001);
}

Which results in Dracula.min Light Darker. This provides an even darker color syntax for those who prefer it.

Learn more about WCAG

Roadmap

  • Settings to control which themes are visible and registered (declutter themepicker menu)

Special thanks to...

Feedback

Let me know what you think! Feel free to open issues and PR's over at https://github.com/ashrafhadden/dracula.min

About

Dracula theme minified πŸ“¦ Less GUI, more code β€” Minimal πŸŒ™ Dark & πŸ”† Light themes for VSCode

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%