DEV Community

loading...
Cover image for Share stunning Dracula Official VScode Customization

Share stunning Dracula Official VScode Customization

trananhtuan400 profile image evondev ・2 min read

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

Alt Text
Alt Text
Alt Text

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"
  },
Enter fullscreen mode Exit fullscreen mode

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"
          }
        }
      ]
    }
  },
Enter fullscreen mode Exit fullscreen mode

Fonts i'm using

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

And that's it! I hope my customization is useful for you. Feel free to share other customization and give me some comments. Thanks and have a nice day.

Discussion (0)

pic
Editor guide