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