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#eae8de
  • activityBar.border#d0caa8
  • activityBar.foreground#b1b100
  • activityBar.inactiveForeground#a89f2f
  • activityBarBadge.background#5c5d9a
  • activityBarBadge.foreground#f5f4f1
  • badge.background#b1b100
  • badge.foreground#313100
  • breadcrumb.activeSelectionForeground#313100
  • breadcrumb.focusForeground#313100
  • breadcrumb.foreground#a89f2f
  • button.background#b1b100
  • button.foreground#313100
  • button.hoverBackground#9f9f00
  • button.secondaryBackground#eae8de
  • button.secondaryForeground#313100
  • descriptionForeground#a89f2f
  • dropdown.background#f8f7f4
  • dropdown.border#d0caa8
  • dropdown.foreground#313100
  • editor.background#f8f7f4
  • editor.findMatchBackground#d4145a59
  • editor.findMatchHighlightBackground#d4145a26
  • editor.foreground#313100
  • editor.inactiveSelectionBackground#b1b1001a
  • editor.lineHighlightBackground#b1b10014
  • editor.lineHighlightBorder#b1b10000
  • editor.selectionBackground#b1b10033
  • editor.wordHighlightBackground#b1b10026
  • editorBracketMatch.background#b1b10033
  • editorBracketMatch.border#b1b10080
  • editorCursor.foreground#b1b100
  • editorError.foreground#bf1932
  • editorGroup.border#d0caa8
  • editorGroupHeader.tabsBackground#f1f0e9
  • editorGroupHeader.tabsBorder#d0caa8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#3131002e
  • editorIndentGuide.background#31310014
  • editorInfo.foreground#5c5d9a
  • editorLineNumber.activeForeground#313100
  • editorLineNumber.foreground#a89f2f
  • editorRuler.foreground#31310014
  • editorSuggestWidget.selectedBackground#b1b10026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#3131001a
  • editorWidget.background#f8f7f4
  • editorWidget.border#d0caa8
  • focusBorder#b1b10080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a89f2f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a89f2f
  • input.background#f8f7f4
  • input.border#d0caa8
  • input.foreground#313100
  • input.placeholderForeground#a89f2f
  • inputOption.activeBorder#b1b100
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#5c5d9a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#b1b10033
  • list.activeSelectionForeground#313100
  • list.focusBackground#b1b10026
  • list.highlightForeground#b1b100
  • list.hoverBackground#b1b1001a
  • list.inactiveSelectionBackground#b1b1001a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#d4145a80
  • minimap.selectionHighlight#b1b1004d
  • notificationLink.foreground#b1b100
  • notifications.background#f8f7f4
  • notifications.foreground#313100
  • panel.background#f1f0e9
  • panel.border#d0caa8
  • panelTitle.activeBorder#b1b100
  • panelTitle.activeForeground#313100
  • panelTitle.inactiveForeground#a89f2f
  • peekView.border#b1b100
  • peekViewEditor.background#f1f0e9
  • peekViewResult.background#eae8de
  • peekViewTitle.background#f1f0e9
  • progressBar.background#b1b100
  • scrollbar.shadow#16160014
  • scrollbarSlider.activeBackground#3131004d
  • scrollbarSlider.background#3131001a
  • scrollbarSlider.hoverBackground#31310033
  • selection.background#b1b10033
  • sideBar.background#f1f0e9
  • sideBar.border#d0caa8
  • sideBar.foreground#313100
  • sideBarSectionHeader.background#b1b1001a
  • sideBarSectionHeader.foreground#313100
  • sideBarTitle.foreground#313100
  • statusBar.background#b1b100
  • statusBar.border#d0caa8
  • statusBar.debuggingBackground#5c5d9a
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#313100
  • statusBar.noFolderBackground#eae8de
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#969600
  • statusBarItem.remoteForeground#313100
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#b1b100
  • tab.activeBorderTop#b1b10000
  • tab.activeForeground#313100
  • tab.border#d0caa8
  • tab.inactiveBackground#f1f0e9
  • tab.inactiveForeground#a89f2f
  • terminal.ansiBlack#313100
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a89f2f
  • 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#f1f0e9
  • terminal.foreground#313100
  • terminalCursor.foreground#b1b100
  • textLink.activeForeground#525289
  • textLink.foreground#5c5d9a
  • titleBar.activeBackground#f1f0e9
  • titleBar.activeForeground#313100
  • titleBar.border#d0caa8
  • titleBar.inactiveBackground#f1f0e9
  • titleBar.inactiveForeground#a89f2f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a89f2fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#707000bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#707000bold
storage.type, storage.modifier#707000bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6667ab
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#707000
string.regexp#6667ab
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#d4145a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c63f00bold
variable.other.constant, variable.other.enummember#c63f00bold
constant.character.escape#747413
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#846617italic
entity.name.type.parameter#846617italic
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#313100
variable.parameter#313100italic
variable.language, variable.language.this, variable.language.self, variable.language.super#707000italic
variable.other.property, variable.other.object.property, meta.object-literal.key#313100
entity.name.class, entity.name.type.class, support.class#007f2ebold italic
entity.other.inherited-class#007f2eitalic
entity.name.tag, punctuation.definition.tag#707000bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#747413
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a89f2f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#846617italic
support.type.property-name.css, support.type.vendored.property-name.css#846617
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#007f2ebold
support.constant.property-value.css, support.constant.color.css#c63f00
keyword.other.unit.css#d4145a
support.type.property-name.json#846617
markup.heading, markup.heading entity.name, entity.name.section.markdown#707000bold
markup.bold#c63f00bold
markup.italic#846617italic
markup.inline.raw, markup.raw#6667ab
markup.underline.link#786d74
markup.quote#a89f2fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050