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#9e1b2e
  • activityBar.inactiveForeground#8b394d
  • activityBarBadge.background#3ea399
  • activityBarBadge.foreground#f5f1f2
  • badge.background#9e1b2e
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#23060a
  • breadcrumb.focusForeground#23060a
  • breadcrumb.foreground#8b394d
  • button.background#9e1b2e
  • button.foreground#f5f1f2
  • button.hoverBackground#8e1829
  • button.secondaryBackground#e8dee2
  • button.secondaryForeground#23060a
  • descriptionForeground#8b394d
  • dropdown.background#f7f4f5
  • dropdown.border#c8aab3
  • dropdown.foreground#23060a
  • editor.background#f7f4f5
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#23060a
  • editor.inactiveSelectionBackground#9e1b2e1a
  • editor.lineHighlightBackground#9e1b2e14
  • editor.lineHighlightBorder#9e1b2e00
  • editor.selectionBackground#9e1b2e33
  • editor.wordHighlightBackground#9e1b2e26
  • editorBracketMatch.background#9e1b2e33
  • editorBracketMatch.border#9e1b2e80
  • editorCursor.foreground#9e1b2e
  • editorError.foreground#bf1932
  • editorGroup.border#c8aab3
  • editorGroupHeader.tabsBackground#f0e9eb
  • editorGroupHeader.tabsBorder#c8aab3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#23060a2e
  • editorIndentGuide.background#23060a14
  • editorInfo.foreground#3ea399
  • editorLineNumber.activeForeground#23060a
  • editorLineNumber.foreground#8b394d
  • editorRuler.foreground#23060a14
  • editorSuggestWidget.selectedBackground#9e1b2e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#23060a1a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c8aab3
  • focusBorder#9e1b2e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#8b394d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#8b394d
  • input.background#f7f4f5
  • input.border#c8aab3
  • input.foreground#23060a
  • input.placeholderForeground#8b394d
  • inputOption.activeBorder#9e1b2e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#3ea399
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#9e1b2e33
  • list.activeSelectionForeground#23060a
  • list.focusBackground#9e1b2e26
  • list.highlightForeground#9e1b2e
  • list.hoverBackground#9e1b2e1a
  • list.inactiveSelectionBackground#9e1b2e1a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#9e1b2e4d
  • notificationLink.foreground#9e1b2e
  • notifications.background#f7f4f5
  • notifications.foreground#23060a
  • panel.background#f0e9eb
  • panel.border#c8aab3
  • panelTitle.activeBorder#9e1b2e
  • panelTitle.activeForeground#23060a
  • panelTitle.inactiveForeground#8b394d
  • peekView.border#9e1b2e
  • peekViewEditor.background#f0e9eb
  • peekViewResult.background#e8dee2
  • peekViewTitle.background#f0e9eb
  • progressBar.background#9e1b2e
  • scrollbar.shadow#10030514
  • scrollbarSlider.activeBackground#23060a4d
  • scrollbarSlider.background#23060a1a
  • scrollbarSlider.hoverBackground#23060a33
  • selection.background#9e1b2e33
  • sideBar.background#f0e9eb
  • sideBar.border#c8aab3
  • sideBar.foreground#23060a
  • sideBarSectionHeader.background#9e1b2e1a
  • sideBarSectionHeader.foreground#23060a
  • sideBarTitle.foreground#23060a
  • statusBar.background#9e1b2e
  • statusBar.border#c8aab3
  • statusBar.debuggingBackground#3ea399
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e8dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#861727
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#9e1b2e
  • tab.activeBorderTop#9e1b2e00
  • tab.activeForeground#23060a
  • tab.border#c8aab3
  • tab.inactiveBackground#f0e9eb
  • tab.inactiveForeground#8b394d
  • terminal.ansiBlack#23060a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#8b394d
  • 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#23060a
  • terminalCursor.foreground#9e1b2e
  • textLink.activeForeground#379188
  • textLink.foreground#3ea399
  • titleBar.activeBackground#f0e9eb
  • titleBar.activeForeground#23060a
  • titleBar.border#c8aab3
  • titleBar.inactiveBackground#f0e9eb
  • titleBar.inactiveForeground#8b394d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8b394ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9e1b2ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9e1b2ebold
storage.type, storage.modifier#9e1b2ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#2d796f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9e1b2e
string.regexp#2d796f
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#ad3d4d
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#a8564bitalic
entity.name.type.parameter#a8564bitalic
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#23060a
variable.parameter#23060aitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#9e1b2eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#23060a
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#9e1b2ebold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ad3d4d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8b394d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a8564bitalic
support.type.property-name.css, support.type.vendored.property-name.css#a8564b
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#a8564b
markup.heading, markup.heading entity.name, entity.name.section.markdown#9e1b2ebold
markup.bold#8f5e2bbold
markup.italic#a8564bitalic
markup.inline.raw, markup.raw#2d796f
markup.underline.link#786d74
markup.quote#8b394ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050