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.background#c8e6c9
  • activityBar.border#5196576a
  • activityBar.foreground#053f0a
  • activityBarBadge.background#519657
  • activityBarBadge.foreground#eeeeee
  • badge.background#519657
  • badge.foreground#ffffff
  • button.background#519657
  • button.foreground#eeeeee
  • button.hoverBackground#519657
  • debugToolBar.background#a5d6a7
  • dropdown.background#c8e6c9
  • dropdown.border#c5e1a5
  • editor.background#c8e6c9
  • editor.lineHighlightBackground#338a3f1b
  • editor.selectionBackground#338a3f23
  • editorBracketHighlight.foreground1#006db3
  • editorBracketHighlight.foreground2#388e3c
  • editorBracketHighlight.foreground3#c77800
  • editorGroup.border#5196576a
  • editorGroupHeader.tabsBackground#c8e6c9
  • editorGroupHeader.tabsBorder#5196576a
  • editorHoverWidget.background#c8e6c9
  • editorHoverWidget.border#a5d6a7
  • editorIndentGuide.activeBackground#205423
  • editorIndentGuide.background#388e3c9d
  • editorLineNumber.activeForeground#519657
  • editorLineNumber.foreground#519657dc
  • editorSuggestWidget.background#c8e6c9
  • editorSuggestWidget.border#a5d6a7
  • editorSuggestWidget.foreground#338a3e
  • editorSuggestWidget.highlightForeground#338a3e
  • editorSuggestWidget.selectedBackground#a5d6a7
  • editorWhitespace.foreground#b4dcb4
  • editorWidget.background#c8e6c9
  • extensionButton.prominentBackground#3BBA54
  • extensionButton.prominentHoverBackground#4CC263
  • focusBorder#338a3f6b
  • foreground#519657
  • gitDecoration.modifiedResourceForeground#00600f
  • icon.foreground#519657
  • input.background#c8e6c9
  • input.border#338a3f6b
  • list.activeSelectionBackground#338a3f35
  • list.activeSelectionForeground#244470
  • list.dropBackground#338a3f35
  • list.focusBackground#dcedc8
  • list.highlightForeground#519657
  • list.hoverBackground#338a3f35
  • list.inactiveFocusBackground#dcedc8
  • list.inactiveSelectionBackground#338a3f35
  • list.inactiveSelectionForeground#244470
  • menu.foreground#284b2b
  • menu.separatorBackground#a5d6a7
  • minimapSlider.activeBackground#51965749
  • minimapSlider.background#51965749
  • minimapSlider.hoverBackground#51965749
  • peekView.border#6faf71
  • peekViewEditor.background#bfdabf73
  • peekViewResult.background#bfdabf73
  • peekViewTitle.background#bfdabf
  • profileBadge.background#519657
  • profileBadge.foreground#ffffff
  • scrollbar.shadow#a5d6a700
  • scrollbarSlider.activeBackground#338a3f5a
  • scrollbarSlider.background#338a3f1a
  • scrollbarSlider.hoverBackground#338a3f5a
  • sideBar.background#c8e6c9
  • sideBar.border#5196576a
  • sideBar.foreground#244427
  • sideBarSectionHeader.background#c8e6c9
  • sideBarSectionHeader.border#5196576a
  • statusBar.background#c8e6c9
  • statusBar.border#5196576a
  • statusBar.debuggingBackground#b0cbb1
  • statusBar.debuggingForeground#3b6e3f
  • statusBar.focusBorder#5196576a
  • statusBar.foreground#3b6e3f
  • statusBar.noFolderBackground#c8e6c9
  • statusBarItem.hoverBackground#6d8a6f16
  • statusBarItem.prominentBackground#6d8a6fc7
  • statusBarItem.prominentForeground#eeeeee
  • statusBarItem.remoteBackground#6d8a6fc7
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#b5d0b6
  • tab.activeBorder#519657
  • tab.activeForeground#519657
  • tab.border#c8e6c9
  • tab.inactiveBackground#c8e6c9
  • tab.inactiveForeground#97b498
  • terminal.background#c8e6c9
  • titleBar.activeBackground#c8e6c9
  • titleBar.activeForeground#519657
  • titleBar.border#5196576a
  • titleBar.inactiveBackground#c8e6c9
  • titleBar.inactiveForeground#519657

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#3e4b53—
console.error#ca0000ff—
console.input#00ae50ff—
console.prompt#b651bcffbold
console.warning#cd6600ff—
console.debug#5d6666ff—
hyperlink#0d1171ff—
markup.deleted#ffffffff—
markup.inserted#000000ff—
markup.changed#f8f8f8ff—
markup.underline—underline
markup.bold—bold
markup.italic—italic
property#934b3cff—
comment#666
constant#864bff—
constant.other.placeholder.py#7b0000ff—
entity#cc3611ff—
entity.name.type#6c65b0ff—
entity.other.inherited-class#000000ff—
entity.name.function#db7800ff—
entity.name.function.argument#a28d00ff—
entity.name.tag#2265adbold
entity.other.attribute-name#cb2d01ff—
keyword#577909bold
keyword.control#d0104cbold
storage#DC1376bold
token.storage.js,token.storage.ts#DC1376bold
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#14909D—
string, entity.other.inherited-class#14909D—
Number#9f1bf1—
#9f1bf1—
support#3c7a03ff—
variable#20814D—
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#ca004bff—
support.constant#c44f00ff—
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—
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,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts#126bb2—
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—
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts#1D79EC—
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#41aeb6—
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—
vsc-soft-theme by ikx12333 - VS Code Theme