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#ebe8df
  • activityBar.border#d1c8af
  • activityBar.foreground#bf9a40
  • activityBar.inactiveForeground#af934f
  • activityBarBadge.background#8397bc
  • activityBarBadge.foreground#f5f4f1
  • badge.background#bf9a40
  • badge.foreground#241d0c
  • breadcrumb.activeSelectionForeground#241d0c
  • breadcrumb.focusForeground#241d0c
  • breadcrumb.foreground#af934f
  • button.background#bf9a40
  • button.foreground#241d0c
  • button.hoverBackground#ac8b3a
  • button.secondaryBackground#ebe8df
  • button.secondaryForeground#241d0c
  • descriptionForeground#af934f
  • dropdown.background#f8f7f4
  • dropdown.border#d1c8af
  • dropdown.foreground#241d0c
  • editor.background#f8f7f4
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#241d0c
  • editor.inactiveSelectionBackground#bf9a401a
  • editor.lineHighlightBackground#bf9a4014
  • editor.lineHighlightBorder#bf9a4000
  • editor.selectionBackground#bf9a4033
  • editor.wordHighlightBackground#bf9a4026
  • editorBracketMatch.background#bf9a4033
  • editorBracketMatch.border#bf9a4080
  • editorCursor.foreground#bf9a40
  • editorError.foreground#bf1932
  • editorGroup.border#d1c8af
  • editorGroupHeader.tabsBackground#f2efea
  • editorGroupHeader.tabsBorder#d1c8af
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#241d0c2e
  • editorIndentGuide.background#241d0c14
  • editorInfo.foreground#8397bc
  • editorLineNumber.activeForeground#241d0c
  • editorLineNumber.foreground#af934f
  • editorRuler.foreground#241d0c14
  • editorSuggestWidget.selectedBackground#bf9a4026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#241d0c1a
  • editorWidget.background#f8f7f4
  • editorWidget.border#d1c8af
  • focusBorder#bf9a4080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#af934f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#af934f
  • input.background#f8f7f4
  • input.border#d1c8af
  • input.foreground#241d0c
  • input.placeholderForeground#af934f
  • inputOption.activeBorder#bf9a40
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8397bc
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#bf9a4033
  • list.activeSelectionForeground#241d0c
  • list.focusBackground#bf9a4026
  • list.highlightForeground#bf9a40
  • list.hoverBackground#bf9a401a
  • list.inactiveSelectionBackground#bf9a401a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#bf9a404d
  • notificationLink.foreground#bf9a40
  • notifications.background#f8f7f4
  • notifications.foreground#241d0c
  • panel.background#f2efea
  • panel.border#d1c8af
  • panelTitle.activeBorder#bf9a40
  • panelTitle.activeForeground#241d0c
  • panelTitle.inactiveForeground#af934f
  • peekView.border#bf9a40
  • peekViewEditor.background#f2efea
  • peekViewResult.background#ebe8df
  • peekViewTitle.background#f2efea
  • progressBar.background#bf9a40
  • scrollbar.shadow#18130814
  • scrollbarSlider.activeBackground#241d0c4d
  • scrollbarSlider.background#241d0c1a
  • scrollbarSlider.hoverBackground#241d0c33
  • selection.background#bf9a4033
  • sideBar.background#f2efea
  • sideBar.border#d1c8af
  • sideBar.foreground#241d0c
  • sideBarSectionHeader.background#bf9a401a
  • sideBarSectionHeader.foreground#241d0c
  • sideBarTitle.foreground#241d0c
  • statusBar.background#bf9a40
  • statusBar.border#d1c8af
  • statusBar.debuggingBackground#8397bc
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#241d0c
  • statusBar.noFolderBackground#ebe8df
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#a28336
  • statusBarItem.remoteForeground#241d0c
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#bf9a40
  • tab.activeBorderTop#bf9a4000
  • tab.activeForeground#241d0c
  • tab.border#d1c8af
  • tab.inactiveBackground#f2efea
  • tab.inactiveForeground#af934f
  • terminal.ansiBlack#241d0c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#af934f
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f7f4
  • terminal.ansiYellow#d4a017
  • terminal.background#f2efea
  • terminal.foreground#241d0c
  • terminalCursor.foreground#bf9a40
  • textLink.activeForeground#7586a7
  • textLink.foreground#8397bc
  • titleBar.activeBackground#f2efea
  • titleBar.activeForeground#241d0c
  • titleBar.border#d1c8af
  • titleBar.inactiveBackground#f2efea
  • titleBar.inactiveForeground#af934f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#af934fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#846c2dbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#846c2dbold
storage.type, storage.modifier#846c2dbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#606f8a
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#846c2d
string.regexp#606f8a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ce3732bold
variable.other.constant, variable.other.enummember#ce3732bold
constant.character.escape#866f3b
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#b74c00italic
entity.name.type.parameter#b74c00italic
entity.name.function, meta.function entity.name.function#5a6f73bold
meta.function-call entity.name.function, support.function#5a6f73
meta.method-call entity.name.function, entity.name.function.member#5a6f73
variable, variable.other, variable.other.readwrite#241d0c
variable.parameter#241d0citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#846c2ditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#241d0c
entity.name.class, entity.name.type.class, support.class#5e2b4ebold italic
entity.other.inherited-class#5e2b4eitalic
entity.name.tag, punctuation.definition.tag#846c2dbold
entity.other.attribute-name#5a6f73italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#866f3b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#af934f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b74c00italic
support.type.property-name.css, support.type.vendored.property-name.css#b74c00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5e2b4ebold
support.constant.property-value.css, support.constant.color.css#ce3732
keyword.other.unit.css#007f2e
support.type.property-name.json#b74c00
markup.heading, markup.heading entity.name, entity.name.section.markdown#846c2dbold
markup.bold#ce3732bold
markup.italic#b74c00italic
markup.inline.raw, markup.raw#606f8a
markup.underline.link#5a6f73
markup.quote#af934fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050