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#eee3e0
  • activityBar.dropBackground#F9CEC380
  • activityBar.foreground#06060CE6
  • activityBarBadge.background#E84A72
  • activityBarBadge.foreground#06060C
  • badge.background#F9CBBE
  • badge.foreground#06060C
  • breadcrumbPicker.background#FADAD1
  • button.background#F9CBBE
  • button.foreground#06060C
  • debugToolBar.background#FDF0ED
  • diffEditor.insertedTextBackground#07DA8C1A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#FADAD1
  • dropdown.listBackground#F9CBBE
  • editor.background#FDF0ED
  • editor.findMatchBackground#F9CEC380
  • editor.findMatchHighlightBackground#F9CEC34D
  • editor.findRangeHighlightBackground#F9CEC31A
  • editor.hoverHighlightBackground#F9CEC34D
  • editor.lineHighlightBackground#F9CBBE4D
  • editor.rangeHighlightBackground#F9CBBE80
  • editor.selectionBackground#F9CBBE80
  • editor.selectionHighlightBackground#F9CEC380
  • editor.wordHighlightBackground#F9CEC380
  • editor.wordHighlightStrongBackground#F9CEC380
  • editorBracketMatch.background#F9CEC380
  • editorBracketMatch.border#F9CEC300
  • editorCodeLens.foreground#F9CEC380
  • editorCursor.background#FDF0ED
  • editorCursor.foreground#E84A72
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C231A
  • editorGroup.dropBackground#F9CEC34D
  • editorGroupHeader.tabsBackground#FDF0ED
  • editorGutter.addedBackground#07DA8CB3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#1EAEAEB3
  • editorIndentGuide.activeBackground#F9CBBE
  • editorIndentGuide.background#F9CBBE80
  • editorLineNumber.activeForeground#06060C80
  • editorLineNumber.foreground#06060C1A
  • editorOverviewRuler.addedForeground#07DA8CB3
  • editorOverviewRuler.border#F9CBBE1A
  • editorOverviewRuler.bracketMatchForeground#06060CB3
  • editorOverviewRuler.deletedForeground#F43E5CB3
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#F9CEC3
  • editorOverviewRuler.modifiedForeground#1EAEAEB3
  • editorOverviewRuler.warningForeground#1EB980B3
  • editorRuler.foreground#F9CEC34D
  • editorSuggestWidget.highlightForeground#E84A72
  • editorUnnecessaryCode.opacity#000000B3
  • editorWarning.foreground#1EB980B3
  • editorWidget.background#FADAD1
  • editorWidget.border#FADAD1
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E84A72
  • extensionButton.prominentHoverBackground#E73665
  • focusBorder#1A1C231A
  • foreground#06060C
  • gitDecoration.addedResourceForeground#1EB980B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#06060C4D
  • gitDecoration.modifiedResourceForeground#AF5427
  • gitDecoration.untrackedResourceForeground#1EB980
  • input.background#F9CBBE
  • inputOption.activeBorder#E7366580
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#F9CBBE80
  • list.activeSelectionForeground#06060C
  • list.dropBackground#F9CEC380
  • list.errorForeground#F43E5CE6
  • list.focusBackground#F9CBBE80
  • list.focusForeground#06060C
  • list.highlightForeground#E84A72
  • list.hoverBackground#F9CBBE80
  • list.hoverForeground#06060C
  • list.inactiveFocusBackground#F9CBBE80
  • list.inactiveSelectionBackground#F9CBBE4D
  • list.inactiveSelectionForeground#06060C
  • list.warningForeground#1EB980B3
  • panelTitle.activeBorder#E84A72
  • peekView.border#1A1C231A
  • peekViewEditor.background#FADAD1
  • peekViewEditor.matchHighlightBackground#F9CEC380
  • peekViewResult.background#FADAD1
  • peekViewResult.matchHighlightBackground#F9CEC380
  • peekViewResult.selectionBackground#F9CBBE80
  • peekViewTitle.background#FADAD1
  • pickerGroup.foreground#E84A72E6
  • progressBar.background#E84A72
  • scrollbar.shadow#16161C4D
  • scrollbarSlider.activeBackground#F9CEC3E6
  • scrollbarSlider.background#F9CEC380
  • scrollbarSlider.hoverBackground#F9CEC3B3
  • selection.background#AF542780
  • sideBar.background#eee3e0
  • sideBar.dropBackground#F9CEC34D
  • sideBar.foreground#06060CB3
  • sideBarSectionHeader.background#FDF0ED
  • sideBarSectionHeader.foreground#06060CB3
  • statusBar.background#eee3e0
  • statusBar.debuggingBackground#AF5427
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#06060CB3
  • statusBar.noFolderBackground#FDF0ED
  • statusBarItem.hoverBackground#F9CBBE
  • statusBarItem.prominentBackground#F9CBBE
  • statusBarItem.prominentHoverBackground#F9CEC3
  • tab.activeBorder#E84A72
  • tab.border#FDF0ED00
  • tab.inactiveBackground#FDF0ED
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#06060C
  • terminal.selectionBackground#F9CEC380
  • terminalCursor.background#06060C
  • terminalCursor.foreground#F9CEC3B3
  • textLink.activeForeground#E73665
  • textLink.foreground#E84A72
  • titleBar.activeBackground#FDF0ED
  • titleBar.inactiveBackground#FDF0ED
  • walkThrough.embeddedEditorBackground#FADAD1
  • widget.shadow#16161C4D

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.underlineunderline
markup.boldbold
markup.italicitalic
property#934b3cff
comment#95a3abff
constant#9b1cebff
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#2369b6ff
entity.other.attribute-name#cb2d01ff
keyword#577909bold
keyword.control#577909
storage#577909bold
token.storage.js,token.storage.ts#577909bold
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#2aa198
string, entity.other.inherited-class#2aa198
Number#9b3affff
#9b3affff
support#3c7a03ff
variable#499504
variable.parameter#a57800ff
keyword.operator#577909normal
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#56b6c2
invalid.deprecated#333333ffunderline,bold
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#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#61afef
entity.name.type#e5c07b
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d19a66
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#d19a66
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#e5c07b
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#499504
support.constant.json.js,support.constant.json.ts#d19a66
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#577909normal
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#577909normal
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#61afef
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#e5c07b
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