Share stunning Dracula Official VScode Customization
evondev
Posted on February 23, 2021
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
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.
Posted on February 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related