Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBackground#91B33E
  • activityBar.background#535C69
  • activityBar.foreground#FDFFFE
  • activityBar.inactiveForeground#A5ADB3
  • activityBarBadge.background#3BC8F5
  • button.background#3BC8F5
  • button.foreground#ffffff
  • button.hoverBackground#3EDDFF
  • editor.background#FCFFFE
  • editor.findMatchBackground#ff003366
  • editor.findMatchBorder#00539766
  • editor.findMatchHighlightBackground#2480672f
  • editor.foreground#222222
  • editor.lineHighlightBackground#d1ded3
  • editor.selectionBackground#97b8a7
  • editor.selectionHighlightBackground#0077FF2f
  • editor.wordHighlightStrongBorder#0077FF34
  • editorBracketHighlight.foreground1#ff0033
  • editorBracketHighlight.foreground2#0033ff
  • editorBracketHighlight.foreground3#00D810
  • editorBracketHighlight.foreground4#FF23C6
  • editorBracketHighlight.foreground5#00A4FF
  • editorBracketHighlight.foreground6#39a200
  • editorCursor.foreground#253d24
  • editorGroup.dropBackground#207f4c30
  • editorGroupHeader.tabsBackground#EEF2F4
  • editorIndentGuide.background#c5d6c7
  • editorWhitespace.foreground#404040
  • editorWidget.background#EEF2F4
  • editorWidget.border#207f4c30
  • focusBorder#48b2b6
  • list.activeSelectionBackground#E6F0F2
  • list.activeSelectionForeground#1f2623
  • list.filterMatchBorder#0077FF
  • list.focusBackground#E0F4EE66
  • list.highlightForeground#3BC8F5
  • list.hoverBackground#E0F4EE44
  • list.hoverForeground#333333
  • list.inactiveSelectionBackground#8e9a98
  • list.inactiveSelectionForeground#223e36
  • panel.border#535C69
  • sash.hoverBorder#2FC7F7
  • scrollbar.shadow#aaaaaa99
  • sideBar.background#EEF2F4
  • sideBarTitle.foreground#555555
  • statusBar.background#EEF2F4
  • statusBar.debuggingBackground#207f4c
  • statusBar.debuggingForeground#e4fde8
  • statusBar.foreground#555555
  • statusBar.noFolderBackground#EEF2F4
  • statusBarItem.activeBackground#d7e7d9
  • statusBarItem.hoverBackground#3EDDFF
  • statusBarItem.prominentBackground#535C69
  • tab.activeBackground#FDFFFE
  • tab.activeModifiedBorder#2FC7F7
  • tab.border#EEF2F4
  • tab.hoverForeground#111111
  • tab.inactiveBackground#E0E5E9
  • tab.inactiveForeground#595959
  • tab.inactiveModifiedBorder#2FC7F7
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#EEF2F4
  • terminal.ansiBrightBlack#6c7680
  • terminal.ansiBrightBlue#55b4d4
  • terminal.ansiBrightCyan#39cbcc
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#fe76ff
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ff9940
  • terminal.ansiCyan#207f4c
  • terminal.ansiGreen#43b244
  • terminal.ansiMagenta#a37acc
  • terminal.ansiRed#f51818
  • terminal.ansiWhite#6c7880
  • terminal.ansiYellow#f2ae49
  • terminal.background#EEF2F4
  • terminal.foreground#383838
  • titleBar.activeBackground#EEF2F4
  • widget.shadow#207f4c25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#006600bold
string | punctuation.definition.string#cc33cc
string, entity.other.inherited-class#cc33cc
variable#006600bold
string | punctuation.definition.string#cc33cc
string, entity.other.inherited-class#cc33cc
#3e4b53
console.error#ca0000ff
console.input#3BA776
console.prompt#b651bcffbold
console.warning#cd6600ff
console.debug#5d6666ff
hyperlink#0d1171ff
markup.deleted#ffffffff
markup.inserted#000000ff
markup.changed#f8f8f8ff
markup.underlineunderline
markup.boldbold
markup.italicitalic
property#934b3cff
comment#989898italic
comment.line.number-sign#484848italic bold
comment.block.documentation#484848italic
constant#160c2abold
constant.numeric#e10000
constant.other.placeholder.py#7b0000ff
variablebold
entity#cc3611ff
entity.name.type#6c65b0ff
entity.other.inherited-class#000000ff
entity.name.function#000
entity.name.function.argument#a28d00ff
entity.name.tag#2265adbold
entity.other.attribute-name#cb2d01ff
keyword#762625bold
keyword.control#A9312Fbold
storage#8f200fbold
token.storage.js,token.storage.ts#393135bold
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js#577909bold
meta.selector#577909bold
string | punctuation.definition.string#e10000
string, entity.other.inherited-class#e10000
Number#9f1bf1
#9f1bf1
support#3c7a03ff
variable.parameter#ca7300
keyword.operator#0f95b0
keyword.operator.logical.js,keyword.operator.logical.ts#ca004b
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts#2598da
invalid.deprecated#cb2d01
invalid.illegal#333333ff
string source#080808ff
String constant#696969ff
string variable#234a97ff
string.regexp#cf5628ff
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#cf5628ff
string.regexp constant.character.escape#811f24ff
text source#080808ff
function name#ae7a00ff
function argument#99a600ff
support.function#50001d
support.constant#702d00
support.variable#295502ff
entity.name.type.namespace#b18534
support.class, entity.name.type.class#b18534
entity.name.class.identifier.namespace.type#b18534
entity.name.class#4090f3
entity.name.type#b18534
entity.name.tag.html#881280
entity.other.attribute-name.html#994500
string.quoted.double.html#1A1AA8
punctuation.definition.tag,punctuation.definition.string#881280
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#cf8f3bbold
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#cf8f3bbold
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#499504
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts#b18534
variable.other.readwrite.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,support.variable.property.ts,support.variable.object.process.ts#006600
meta.object-literal.key.js,meta.object-literal.key.ts#3C7A03
support.constant.json.js,support.constant.json.ts#cf8f3b
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#577909
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#577909
support.type.object.console.js,support.type.object.console.ts#499504
keyword.operator.js,keyword.operator.ts#56b6c2
support.type.object.dom.js,support.type.object.dom.ts#56b6c2
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts,#499504
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#1c36b7bold
markup.list#7d451cff
markup.heading | markup.heading entity.name#142b5aff
markup.quote#0b6125ff
Markup.italic#080808ff
markup.bold#080808ffbold
markup.underline#080808ffunderline
markup.link#234a97ffunderline
markup.raw#234a97ff
markup.deleted#47565fff
markup.inserted#cc0000ff
markup.changed#ffffffff
Green paper by Александр Маджугин - VS Code Theme