Share stunning Dracula Official VScode Customization
Tags: vscode, draculatheme, customization, settings
Published: 2021-02-23 08:08:14

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](https://draculatheme.com/visual-studio-code/). 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcdvac151ypjpo8p5kdl.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91dk3uks9c6l3088p2a1.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruihgmfmous6puahpik0.png)
## workbench.colorCustomizations

```json
"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

```json
"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](https://github.com/kube/sf-mono-ligaturized)

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.