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#f3efe9
  • activityBar.border#e0d7c7
  • activityBar.foreground#9e8a64
  • activityBar.inactiveForeground#bea781
  • activityBarBadge.background#8397bc
  • activityBarBadge.foreground#f9f8f5
  • badge.background#9e8a64
  • badge.foreground#1e1a13
  • breadcrumb.activeSelectionForeground#1e1a13
  • breadcrumb.focusForeground#1e1a13
  • breadcrumb.foreground#bea781
  • button.background#9e8a64
  • button.foreground#1e1a13
  • button.hoverBackground#8e7c5a
  • button.secondaryBackground#f3efe9
  • button.secondaryForeground#1e1a13
  • descriptionForeground#bea781
  • dropdown.background#fbfaf8
  • dropdown.border#e0d7c7
  • dropdown.foreground#1e1a13
  • editor.background#fbfaf8
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#1e1a13
  • editor.inactiveSelectionBackground#9e8a641a
  • editor.lineHighlightBackground#9e8a6414
  • editor.lineHighlightBorder#9e8a6400
  • editor.selectionBackground#9e8a6433
  • editor.wordHighlightBackground#9e8a6426
  • editorBracketMatch.background#9e8a6433
  • editorBracketMatch.border#9e8a6480
  • editorCursor.foreground#9e8a64
  • editorError.foreground#bf1932
  • editorGroup.border#e0d7c7
  • editorGroupHeader.tabsBackground#f7f4f0
  • editorGroupHeader.tabsBorder#e0d7c7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1e1a132e
  • editorIndentGuide.background#1e1a1314
  • editorInfo.foreground#8397bc
  • editorLineNumber.activeForeground#1e1a13
  • editorLineNumber.foreground#bea781
  • editorRuler.foreground#1e1a1314
  • editorSuggestWidget.selectedBackground#9e8a6426
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1e1a131a
  • editorWidget.background#fbfaf8
  • editorWidget.border#e0d7c7
  • focusBorder#9e8a6480
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#bea781
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#bea781
  • input.background#fbfaf8
  • input.border#e0d7c7
  • input.foreground#1e1a13
  • input.placeholderForeground#bea781
  • inputOption.activeBorder#9e8a64
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8397bc
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#9e8a6433
  • list.activeSelectionForeground#1e1a13
  • list.focusBackground#9e8a6426
  • list.highlightForeground#9e8a64
  • list.hoverBackground#9e8a641a
  • list.inactiveSelectionBackground#9e8a641a
  • minimap.background#fbfaf8
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#9e8a644d
  • notificationLink.foreground#9e8a64
  • notifications.background#fbfaf8
  • notifications.foreground#1e1a13
  • panel.background#f7f4f0
  • panel.border#e0d7c7
  • panelTitle.activeBorder#9e8a64
  • panelTitle.activeForeground#1e1a13
  • panelTitle.inactiveForeground#bea781
  • peekView.border#9e8a64
  • peekViewEditor.background#f7f4f0
  • peekViewResult.background#f3efe9
  • peekViewTitle.background#f7f4f0
  • progressBar.background#9e8a64
  • scrollbar.shadow#14110c14
  • scrollbarSlider.activeBackground#1e1a134d
  • scrollbarSlider.background#1e1a131a
  • scrollbarSlider.hoverBackground#1e1a1333
  • selection.background#9e8a6433
  • sideBar.background#f7f4f0
  • sideBar.border#e0d7c7
  • sideBar.foreground#1e1a13
  • sideBarSectionHeader.background#9e8a641a
  • sideBarSectionHeader.foreground#1e1a13
  • sideBarTitle.foreground#1e1a13
  • statusBar.background#9e8a64
  • statusBar.border#e0d7c7
  • statusBar.debuggingBackground#8397bc
  • statusBar.debuggingForeground#f9f8f5
  • statusBar.foreground#1e1a13
  • statusBar.noFolderBackground#f3efe9
  • statusBarItem.hoverBackground#f9f8f533
  • statusBarItem.remoteBackground#867555
  • statusBarItem.remoteForeground#1e1a13
  • tab.activeBackground#fbfaf8
  • tab.activeBorder#9e8a64
  • tab.activeBorderTop#9e8a6400
  • tab.activeForeground#1e1a13
  • tab.border#e0d7c7
  • tab.inactiveBackground#f7f4f0
  • tab.inactiveForeground#bea781
  • terminal.ansiBlack#1e1a13
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#bea781
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f9f8f5
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fbfaf8
  • terminal.ansiYellow#d4a017
  • terminal.background#f7f4f0
  • terminal.foreground#1e1a13
  • terminalCursor.foreground#9e8a64
  • textLink.activeForeground#7586a7
  • textLink.foreground#8397bc
  • titleBar.activeBackground#f7f4f0
  • titleBar.activeForeground#1e1a13
  • titleBar.border#e0d7c7
  • titleBar.inactiveBackground#f7f4f0
  • titleBar.inactiveForeground#bea781

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#bea781italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#837053bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#837053bold
storage.type, storage.modifier#837053bold
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#837053
string.regexp#606f8a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#886162bold
variable.other.constant, variable.other.enummember#886162bold
constant.character.escape#7d6f57
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#946243italic
entity.name.type.parameter#946243italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#1e1a13
variable.parameter#1e1a13italic
variable.language, variable.language.this, variable.language.self, variable.language.super#837053italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1e1a13
entity.name.class, entity.name.type.class, support.class#5e2b4ebold italic
entity.other.inherited-class#5e2b4eitalic
entity.name.tag, punctuation.definition.tag#837053bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#7d6f57
punctuation, punctuation.separator, punctuation.terminator, meta.brace#bea781
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#946243italic
support.type.property-name.css, support.type.vendored.property-name.css#946243
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5e2b4ebold
support.constant.property-value.css, support.constant.color.css#886162
keyword.other.unit.css#9e4fa5
support.type.property-name.json#946243
markup.heading, markup.heading entity.name, entity.name.section.markdown#837053bold
markup.bold#886162bold
markup.italic#946243italic
markup.inline.raw, markup.raw#606f8a
markup.underline.link#38793a
markup.quote#bea781italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050