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.underline—underline
markup.bold#080808ff—
markup.italic—italic
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