I made new VSCode Dracula Theme with high contrast version

evondev — Fri, 16 Jul 2021 17:09:10 +0000

After a long time used Dracula Official theme. I recorgnized that theme color scheme is still not stunning with me. So I decided to create a new one with my own color scheme. And It's successfully with more than 2000 installed. So I wanna share it to everyone to know about my theme. It's name is Evondev Dracula. You guys can open vscode extension and searching it.
Thanks for reading my post.

Share stunning Dracula Official VScode Customization

evondev — Tue, 23 Feb 2021 08:08:14 +0000

Hey guys, this is my very first post. VS Code is amazing editor and have a lot of people installed it. And Theme is the thing that make the code editor look beauty, one of the most installed theme is Dracula Official.

But the default color schema of this theme in my opinion is still can make it look stunning and shining. So today I wanna share my settings for everyone using it. Below are my code in settings.json also some screenshots for all you guys

Screenshots

workbench.colorCustomizations

"workbench.colorCustomizations": {
    "sideBar.background": "#191a2e",
    "editor.background": "#191a2e",
    "terminal.background": "#191a2e",
    "panel.background": "#191a2e",
    "activityBar.background": "#191a2e",
    "tab.activeBorderTop": "#8d92ff",
    "tab.inactiveBackground": "#191A22",
    "panelTitle.activeBorder": "#8d92ff",
    "panel.border": "#8d92ff",
    "tab.activeBackground": "#191a2e",
    "breadcrumb.background": "#191a2e",
    "sideBarSectionHeader.background": "#191a2e",
    "activityBarBadge.background": "#ff6bcb",
    "activityBar.activeBorder": "#ff6bcb",
    "titleBar.activeBackground": "#1E1F35",
    "terminal.ansiGreen": "#20e3b2",
    "terminal.ansiYellow": "#FDE181",
    "terminal.ansiMagenta": "#ff6bcb",
    "editorCursor.foreground": "#9a86fd"
  },

editor.tokenColorCustomizations

"editor.tokenColorCustomizations": {
    "[Dracula]": {
      "textMateRules": [
        {
          "scope": [
            "entity.other.attribute-name",
            "entity.name.function",
            "support.function",
            "support.function.css",
            "support.function.transform.css",
            "entity.other.attribute-name.html",
            "support.type.media-names.css",
            "support.type.property-names.css",
            "entity.other.attribute-name.jsx"
          ],
          "settings": {
            "foreground": "#20e3b2",
            "fontStyle": ""
          }
        },
        {
          "scope": [
            "variable.other.property.js",
            "variable.other.class.js",
            "variable.other.property.static.js",
            "JSXNested",
            "variable.other.readwrite.js",
            "punctuation.definition.tag.jsx",
            "punctuation.semi-colon",
            "punctuation.colon"
          ],
          "settings": {
            "foreground": "#fff"
          }
        },
        {
          "scope": [
            "variable.graphql",
            "string",
            "punctuation.definition.string.begin",
            "punctuation.definition.string.end",
            "meta.attribute-selector.scss",
            "meta.attribute-selector.css"
          ],
          "settings": {
            "foreground": "#EAC394"
          }
        },
        {
          "scope": [
            "entity.name.tag",
            "keyword",
            "storage",
            "constant.length.units.css",
            "source.inside-js.css.styled",
            "keyword.other.unit.percentage.css",
            "keyword.other.unit.px.css",
            "keyword.other.unit.rem.css",
            "constant.length.units.css",
            "constant.percentage.units.css",
            "constant.time.units.css",
            "constant.angle.units.css",
            "constant.numeric.css",
            "punctuation.definition.keyword"
          ],
          "settings": {
            "foreground": "#ff6bcb"
          }
        },
        {
          "scope": [
            "variable.parameter",
            "variable.other.constant",
            "support.variable",
            "constant",
            "support.type.property-name.media.css",
            "meta.property-values.css",
            "support.constant",
            "variable.other.constant"
          ],
          "settings": {
            "foreground": "#9a86fd",
            "fontStyle": ""
          }
        },
        {
          "scope": ["support.class.component"],
          "settings": {
            "fontStyle": ""
          }
        },
        {
          "scope": ["variable.other.constant.object.js"],
          "settings": {
            "foreground": "#bd93f9"
          }
        },
        {
          "scope": ["entity.name.type.parameter"],
          "settings": {
            "foreground": "#ffb86c"
          }
        },
        {
          "scope": [
            "support",
            "entity.name.type",
            "meta.interface.ts",
            "entity.other.inherited-class"
          ],
          "settings": {
            "foreground": "#2cccff"
          }
        },
        {
          "scope": [
            "variable.other.readwrite.js",
            "entity.name.type.class",
            "variable.other.property.js",
            "variable.scss"
          ],
          "settings": {
            "foreground": "#9dbeff"
          }
        }
      ]
    }
  },

Fonts i'm using

I'm currently using SF mono font with ligatures, you can download free here: Click here