ashgrowem / dracula.min Goto Github PK

View Code? Open in Web Editor NEW

This project forked from dracula/visual-studio-code

46.0 2.0 3.0 12.04 MB

Dracula theme minified 📦 Less GUI, more code — Minimal 🌙 Dark & 🔆 Light themes for VSCode

Home Page: https://marketplace.visualstudio.com/items?itemName=ashrafhadden.dracula-dot-min

License: MIT License

JavaScript 100.00%

dracula vscode-theme minimal dracula-light flat

dracula.min's Introduction

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 Light

Dracula.min Light Darker

Dracula.min White

Dracula.min White Darker

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

Set theme to Dracula
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.

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);

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!

chroma.contrast()

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

Color contrast checker playground
Accessible color palette generator
Fantastic human-readable article on Contrast and Color Accessibility
Gregor Aisch's articles on his inspiration behind Chroma.js
- How To Avoid Equidistant HSV Colors
- Mastering Multi-hued Color Scales with Chroma.js

Roadmap

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

Special thanks to...

Derek Sifford for dracula/visual-studio-code and his auto-magical build process
Gregor Aisch and his passion for colors that led to Chroma.js

Feedback

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

dracula.min's People

Contributors

Stargazers

Watchers

Forkers

toridoriv juliomsousa dracula-light

dracula.min's Issues

Auto-Updating

It's funny. Today I spent ten hours searching for a light theme for VSCode. I went through the top 50 light themes sorted by amount of downloads, and looked at their development activity and language support... And... They. Are. All. Shit. Almost all (even the popular ones) died 2-3 years ago and get no updates. And almost none of them have comprehensive coverage for programming languages. Only the dark themes have good development ethics.

Out of all dark themes, Dracula is my favorite. They have an active community. Excellent syntax coverage for all programming languages. And their colors have a cohesive pattern which is easy to read and really gives a clear overview of what the code is doing.

So, after completely giving up on Light themes (they are literally all shit; not a single theme has high-quality language syntax highlighting), I started looking into how Dracula was built.

I saw its dracula.yaml file which defines a dozen colors, and then simply uses those color tokens for various language highlights. So I realized how easy it would be to just clone Dracula, edit the dozen colors, and voila a light theme would be built.

Then I found your repo where you have done something brilliant: Using chroma.js to automatically generate new colors with optimized contrast vs the light backgrounds. This preserves the Dracula identity colors while making them dark enough to work on a light background. That's super clever. Great job!

But this makes me think about a glaring issue with your solution: It is already half a year out of date and missing the latest syntax fixes in Dracula. I have an idea for a workaround.

Create a git submodule which pulls directly from the official repo.
Make an update.js script which runs a git pull on the submodule, and then reads its latest dracula.yaml. (Alternatively skip step 1, and make step 2 read the latest official file from "raw" github URLs.)
Transform the yaml file programmatically (adding the BGLighter etc tags and whatever other minor changes you did).
Write the transformed yaml to this repo.
Automatically set this project's version to be identical to the latest Dracula version number.

In other words, a single command to update to the latest Dracula core and transform it to the light variants.

This would let you stay up to date with just a single command and would hopefully make it more fun and easy for you to release new theme versions.

I also have some feedback about your theme in general:

The "Dracula minified" tagline is gibberish. It makes me think of JS minifying and I thought you had made a bunch of changes in the theme, removed JS code from the theme and ran it all through a minifier, and that you would therefore (due to all the custom work) never stay in sync with upstream. So initially your tagline made me avoid your theme because it gave me bad vibes. Now, after a closer look, I saw that minified and the ".min" name had nothing to do with ".min" minifying. Would be better if you clearly state that it is an exact clone of Dracula with flat backgrounds, light backgrounds, and programmatically adjusted colors for perfect contrast.
If this theme is going to thrive, it needs to have better guarantees of updating mentioned in the README. And having an auto-update script as suggested would make such a solution easy to maintain.

All in all, your work is excellent and lets people enjoy Dracula's perfect language syntax support and great colors, but with light backgrounds.

You have thereby created the only Light theme worth having. If only the auto-update issue can be solved, it would be a super easily maintained and long-lived one rather than yet another dead Light theme. Hmm. ;-)

Would you consider porting Light to IntelliJ?

This is such a fantastic theme, would you consider porting it to IntelliJ? It would be the first of its kind as a light mode Dracula theme.

[Question]: It is possible to customize the split view border color ?

It is possible to customize the split view border color ?
It appears in purple. See screenshot.

ashgrowem / dracula.min Goto Github PK

dracula.min's Introduction

Dracula.min

Dracula.min

Dracula.min Light

Dracula.min Light Darker

Dracula.min White

Dracula.min White Darker

Install

Marketplace

Quick Open ⌘ P

Command Line

settings.json

Colors Used

Light Theme Methodology

Chroma.js to the rescue!

Light Theme Darker

Learn more about WCAG

Roadmap

Special thanks to...

Feedback

dracula.min's People

Contributors

Stargazers

Watchers

Forkers

dracula.min's Issues

Recommend Projects

Recommend Topics

Recommend Org

Quick Open `⌘` `P`