Skip to main content
Coding Theme

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#7b977c
  • activityBar.background#c2ddc2
  • activityBar.foreground#a2d2b1
  • activityBar.inactiveForeground#393733
  • activityBarBadge.background#98a099
  • button.background#98a099
  • button.foreground#ffffff
  • button.hoverBackground#3BA776
  • editor.background#EDF8EE
  • editor.findMatchBackground#ff003366
  • editor.findMatchBorder#00539766
  • editor.findMatchHighlightBackground#2480672f
  • editor.foreground#222222
  • editor.lineHighlightBackground#d1ded3
  • editor.selectionBackground#20B2AA
  • 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#E4ECDC
  • editorIndentGuide.background1#c5d6c7
  • editorWhitespace.foreground#404040
  • editorWidget.background#E4ECDC
  • editorWidget.border#207f4c30
  • focusBorder#48b2b6
  • list.activeSelectionBackground#E0F8ED
  • list.activeSelectionForeground#1f2623
  • list.filterMatchBorder#0077FF
  • list.focusBackground#E0F4EE66
  • list.highlightForeground#98a099
  • list.hoverBackground#E0F4EE44
  • list.hoverForeground#333333
  • list.inactiveSelectionBackground#8e9a98
  • list.inactiveSelectionForeground#223e36
  • panel.border#657b69
  • sash.hoverBorder#3BA776
  • scrollbar.shadow#aaaaaa99
  • sideBar.background#E4ECDC
  • sideBarTitle.foreground#555555
  • statusBar.background#E4ECDC
  • statusBar.debuggingBackground#207f4c
  • statusBar.debuggingForeground#e4fde8
  • statusBar.foreground#555555
  • statusBar.noFolderBackground#E4ECDC
  • statusBarItem.activeBackground#d7e7d9
  • statusBarItem.hoverBackground#cdeac0
  • statusBarItem.prominentBackground#657B69
  • tab.activeBackground#F8FBF1
  • tab.activeModifiedBorder#3BA776
  • tab.border#E4ECDC
  • tab.hoverForeground#111111
  • tab.inactiveBackground#c6d2c7
  • tab.inactiveForeground#595959
  • tab.inactiveModifiedBorder#3BA776
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#E4ECDC
  • 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#E4ECDC
  • terminal.foreground#383838
  • titleBar.activeBackground#E4ECDC
  • widget.shadow#207f4c25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#3e4b53
console.error#ca0000ff
console.input#3BA776
console.prompt#b651bcff
console.warning#cd6600ff
console.debug#5d6666ff
hyperlink#0d1171ff
markup.deleted#ffffffff
markup.inserted#000000ff
markup.changed#f8f8f8ff
markup.underlineunderline
markup.bold#080808ff
markup.italicitalic
property#934b3cff
comment#989898italic
constant#160c2a
constant.numeric#e10000
constant.other.placeholder.py#7b0000ff
entity#cc3611ff
entity.name.type#6c65b0ff
entity.other.inherited-class#000000ff
entity.name.function#000
entity.name.function.argument#a28d00ff
entity.name.tag#2265ad
entity.other.attribute-name#cb2d01ff
keyword#762625
keyword.control#A9312F
storage#8f200f
token.storage.js,token.storage.ts#393135
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#577909
meta.selector#577909
string | punctuation.definition.string#cc33cc
string, entity.other.inherited-class#cc33cc
Number#9f1bf1
#9f1bf1
support#3c7a03ff
variable#006600
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#cf8f3b
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#cf8f3b
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#1c36b7
markup.list#7d451cff
markup.heading | markup.heading entity.name#142b5aff
markup.quote#0b6125ff
Markup.italic#080808ff
markup.bold#080808ff
markup.underline#080808ffunderline
markup.link#234a97ffunderline
markup.raw#234a97ff
markup.deleted#47565fff
markup.inserted#cc0000ff
markup.changed#ffffffff
pale-green-paper by Ken Okabe - VS Code Theme