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#e8dee2
  • activityBar.border#c8aab3
  • activityBar.foreground#9b1b30
  • activityBar.inactiveForeground#8a394d
  • activityBarBadge.background#008568
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9b1b30
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#22060b
  • breadcrumb.focusForeground#22060b
  • breadcrumb.foreground#8a394d
  • button.background#9b1b30
  • button.foreground#f5f1f2
  • button.hoverBackground#8c182b
  • button.secondaryBackground#e8dee2
  • button.secondaryForeground#22060b
  • descriptionForeground#8a394d
  • dropdown.background#f7f4f5
  • dropdown.border#c8aab3
  • dropdown.foreground#22060b
  • editor.background#f7f4f5
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#22060b
  • editor.inactiveSelectionBackground#9b1b301a
  • editor.lineHighlightBackground#9b1b3014
  • editor.lineHighlightBorder#9b1b3000
  • editor.selectionBackground#9b1b3033
  • editor.wordHighlightBackground#9b1b3026
  • editorBracketMatch.background#9b1b3033
  • editorBracketMatch.border#9b1b3080
  • editorCursor.foreground#9b1b30
  • editorError.foreground#bf1932
  • editorGroup.border#c8aab3
  • editorGroupHeader.tabsBackground#f0e9eb
  • editorGroupHeader.tabsBorder#c8aab3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#22060b2e
  • editorIndentGuide.background#22060b14
  • editorInfo.foreground#008568
  • editorLineNumber.activeForeground#22060b
  • editorLineNumber.foreground#8a394d
  • editorRuler.foreground#22060b14
  • editorSuggestWidget.selectedBackground#9b1b3026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#22060b1a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c8aab3
  • focusBorder#9b1b3080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8a394d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8a394d
  • input.background#f7f4f5
  • input.border#c8aab3
  • input.foreground#22060b
  • input.placeholderForeground#8a394d
  • inputOption.activeBorder#9b1b30
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#008568
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#9b1b3033
  • list.activeSelectionForeground#22060b
  • list.focusBackground#9b1b3026
  • list.highlightForeground#9b1b30
  • list.hoverBackground#9b1b301a
  • list.inactiveSelectionBackground#9b1b301a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#9b1b304d
  • notificationLink.foreground#9b1b30
  • notifications.background#f7f4f5
  • notifications.foreground#22060b
  • panel.background#f0e9eb
  • panel.border#c8aab3
  • panelTitle.activeBorder#9b1b30
  • panelTitle.activeForeground#22060b
  • panelTitle.inactiveForeground#8a394d
  • peekView.border#9b1b30
  • peekViewEditor.background#f0e9eb
  • peekViewResult.background#e8dee2
  • peekViewTitle.background#f0e9eb
  • progressBar.background#9b1b30
  • scrollbar.shadow#0f030514
  • scrollbarSlider.activeBackground#22060b4d
  • scrollbarSlider.background#22060b1a
  • scrollbarSlider.hoverBackground#22060b33
  • selection.background#9b1b3033
  • sideBar.background#f0e9eb
  • sideBar.border#c8aab3
  • sideBar.foreground#22060b
  • sideBarSectionHeader.background#9b1b301a
  • sideBarSectionHeader.foreground#22060b
  • sideBarTitle.foreground#22060b
  • statusBar.background#9b1b30
  • statusBar.border#c8aab3
  • statusBar.debuggingBackground#008568
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#841729
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#9b1b30
  • tab.activeBorderTop#9b1b3000
  • tab.activeForeground#22060b
  • tab.border#c8aab3
  • tab.inactiveBackground#f0e9eb
  • tab.inactiveForeground#8a394d
  • terminal.ansiBlack#22060b
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8a394d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f7f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f0e9eb
  • terminal.foreground#22060b
  • terminalCursor.foreground#9b1b30
  • textLink.activeForeground#00765c
  • textLink.foreground#008568
  • titleBar.activeBackground#f0e9eb
  • titleBar.activeForeground#22060b
  • titleBar.border#c8aab3
  • titleBar.inactiveBackground#f0e9eb
  • titleBar.inactiveForeground#8a394d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8a394ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9b1b30bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9b1b30bold
storage.type, storage.modifier#9b1b30bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007d62
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9b1b30
string.regexp#007d62
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6c7358
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8f5e2bbold
variable.other.constant, variable.other.enummember#8f5e2bbold
constant.character.escape#aa3d4f
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#cb3c2eitalic
entity.name.type.parameter#cb3c2eitalic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#22060b
variable.parameter#22060bitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#9b1b30italic
variable.other.property, variable.other.object.property, meta.object-literal.key#22060b
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#9b1b30bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#aa3d4f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8a394d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#cb3c2eitalic
support.type.property-name.css, support.type.vendored.property-name.css#cb3c2e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#845bbdbold
support.constant.property-value.css, support.constant.color.css#8f5e2b
keyword.other.unit.css#6c7358
support.type.property-name.json#cb3c2e
markup.heading, markup.heading entity.name, entity.name.section.markdown#9b1b30bold
markup.bold#8f5e2bbold
markup.italic#cb3c2eitalic
markup.inline.raw, markup.raw#007d62
markup.underline.link#786d74
markup.quote#8a394ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050