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#d3c8ac
  • activityBar.foreground#cc9f23
  • activityBar.inactiveForeground#b59640
  • activityBarBadge.background#18317e
  • activityBarBadge.foreground#f5f4f1
  • badge.background#cc9f23
  • badge.foreground#261e07
  • breadcrumb.activeSelectionForeground#261e07
  • breadcrumb.focusForeground#261e07
  • breadcrumb.foreground#b59640
  • button.background#cc9f23
  • button.foreground#261e07
  • button.hoverBackground#b88f20
  • button.secondaryBackground#ebe8df
  • button.secondaryForeground#261e07
  • descriptionForeground#b59640
  • dropdown.background#f8f7f4
  • dropdown.border#d3c8ac
  • dropdown.foreground#261e07
  • editor.background#f8f7f4
  • editor.findMatchBackground#00b14059
  • editor.findMatchHighlightBackground#00b14026
  • editor.foreground#261e07
  • editor.inactiveSelectionBackground#cc9f231a
  • editor.lineHighlightBackground#cc9f2314
  • editor.lineHighlightBorder#cc9f2300
  • editor.selectionBackground#cc9f2333
  • editor.wordHighlightBackground#cc9f2326
  • editorBracketMatch.background#cc9f2333
  • editorBracketMatch.border#cc9f2380
  • editorCursor.foreground#cc9f23
  • editorError.foreground#bf1932
  • editorGroup.border#d3c8ac
  • editorGroupHeader.tabsBackground#f2efe9
  • editorGroupHeader.tabsBorder#d3c8ac
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#261e072e
  • editorIndentGuide.background#261e0714
  • editorInfo.foreground#18317e
  • editorLineNumber.activeForeground#261e07
  • editorLineNumber.foreground#b59640
  • editorRuler.foreground#261e0714
  • editorSuggestWidget.selectedBackground#cc9f2326
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#261e071a
  • editorWidget.background#f8f7f4
  • editorWidget.border#d3c8ac
  • focusBorder#cc9f2380
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#b59640
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#b59640
  • input.background#f8f7f4
  • input.border#d3c8ac
  • input.foreground#261e07
  • input.placeholderForeground#b59640
  • inputOption.activeBorder#cc9f23
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#18317e
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc9f2333
  • list.activeSelectionForeground#261e07
  • list.focusBackground#cc9f2326
  • list.highlightForeground#cc9f23
  • list.hoverBackground#cc9f231a
  • list.inactiveSelectionBackground#cc9f231a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#00b14080
  • minimap.selectionHighlight#cc9f234d
  • notificationLink.foreground#cc9f23
  • notifications.background#f8f7f4
  • notifications.foreground#261e07
  • panel.background#f2efe9
  • panel.border#d3c8ac
  • panelTitle.activeBorder#cc9f23
  • panelTitle.activeForeground#261e07
  • panelTitle.inactiveForeground#b59640
  • peekView.border#cc9f23
  • peekViewEditor.background#f2efe9
  • peekViewResult.background#ebe8df
  • peekViewTitle.background#f2efe9
  • progressBar.background#cc9f23
  • scrollbar.shadow#19140414
  • scrollbarSlider.activeBackground#261e074d
  • scrollbarSlider.background#261e071a
  • scrollbarSlider.hoverBackground#261e0733
  • selection.background#cc9f2333
  • sideBar.background#f2efe9
  • sideBar.border#d3c8ac
  • sideBar.foreground#261e07
  • sideBarSectionHeader.background#cc9f231a
  • sideBarSectionHeader.foreground#261e07
  • sideBarTitle.foreground#261e07
  • statusBar.background#cc9f23
  • statusBar.border#d3c8ac
  • statusBar.debuggingBackground#18317e
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#261e07
  • statusBar.noFolderBackground#ebe8df
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#ad871e
  • statusBarItem.remoteForeground#261e07
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#cc9f23
  • tab.activeBorderTop#cc9f2300
  • tab.activeForeground#261e07
  • tab.border#d3c8ac
  • tab.inactiveBackground#f2efe9
  • tab.inactiveForeground#b59640
  • terminal.ansiBlack#261e07
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#b59640
  • 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#f2efe9
  • terminal.foreground#261e07
  • terminalCursor.foreground#cc9f23
  • textLink.activeForeground#162b70
  • textLink.foreground#18317e
  • titleBar.activeBackground#f2efe9
  • titleBar.activeForeground#261e07
  • titleBar.border#d3c8ac
  • titleBar.inactiveBackground#f2efe9
  • titleBar.inactiveForeground#b59640

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b59640italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#846617bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#846617bold
storage.type, storage.modifier#846617bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#1b368c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#846617
string.regexp#1b368c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#007f2e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c2342dbold
variable.other.constant, variable.other.enummember#c2342dbold
constant.character.escape#846a27
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#6e6e19italic
entity.name.type.parameter#6e6e19italic
entity.name.function, meta.function entity.name.function#88666fbold
meta.function-call entity.name.function, support.function#88666f
meta.method-call entity.name.function, entity.name.function.member#88666f
variable, variable.other, variable.other.readwrite#261e07
variable.parameter#261e07italic
variable.language, variable.language.this, variable.language.self, variable.language.super#846617italic
variable.other.property, variable.other.object.property, meta.object-literal.key#261e07
entity.name.class, entity.name.type.class, support.class#5e2b4ebold italic
entity.other.inherited-class#5e2b4eitalic
entity.name.tag, punctuation.definition.tag#846617bold
entity.other.attribute-name#88666fitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#846a27
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b59640
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6e6e19italic
support.type.property-name.css, support.type.vendored.property-name.css#6e6e19
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5e2b4ebold
support.constant.property-value.css, support.constant.color.css#c2342d
keyword.other.unit.css#007f2e
support.type.property-name.json#6e6e19
markup.heading, markup.heading entity.name, entity.name.section.markdown#846617bold
markup.bold#c2342dbold
markup.italic#6e6e19italic
markup.inline.raw, markup.raw#1b368c
markup.underline.link#88666f
markup.quote#b59640italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050