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#f2eee9
  • activityBar.border#e0d6c8
  • activityBar.foreground#94826a
  • activityBar.inactiveForeground#b9a384
  • activityBarBadge.background#436495
  • activityBarBadge.foreground#f9f8f5
  • badge.background#94826a
  • badge.foreground#1c1814
  • breadcrumb.activeSelectionForeground#1c1814
  • breadcrumb.focusForeground#1c1814
  • breadcrumb.foreground#b9a384
  • button.background#94826a
  • button.foreground#1c1814
  • button.hoverBackground#85755f
  • button.secondaryBackground#f2eee9
  • button.secondaryForeground#1c1814
  • descriptionForeground#b9a384
  • dropdown.background#fbf9f8
  • dropdown.border#e0d6c8
  • dropdown.foreground#1c1814
  • editor.background#fbf9f8
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#1c1814
  • editor.inactiveSelectionBackground#94826a1a
  • editor.lineHighlightBackground#94826a14
  • editor.lineHighlightBorder#94826a00
  • editor.selectionBackground#94826a33
  • editor.wordHighlightBackground#94826a26
  • editorBracketMatch.background#94826a33
  • editorBracketMatch.border#94826a80
  • editorCursor.foreground#94826a
  • editorError.foreground#bf1932
  • editorGroup.border#e0d6c8
  • editorGroupHeader.tabsBackground#f7f4f0
  • editorGroupHeader.tabsBorder#e0d6c8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1c18142e
  • editorIndentGuide.background#1c181414
  • editorInfo.foreground#436495
  • editorLineNumber.activeForeground#1c1814
  • editorLineNumber.foreground#b9a384
  • editorRuler.foreground#1c181414
  • editorSuggestWidget.selectedBackground#94826a26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1c18141a
  • editorWidget.background#fbf9f8
  • editorWidget.border#e0d6c8
  • focusBorder#94826a80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#b9a384
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#b9a384
  • input.background#fbf9f8
  • input.border#e0d6c8
  • input.foreground#1c1814
  • input.placeholderForeground#b9a384
  • inputOption.activeBorder#94826a
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#436495
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#94826a33
  • list.activeSelectionForeground#1c1814
  • list.focusBackground#94826a26
  • list.highlightForeground#94826a
  • list.hoverBackground#94826a1a
  • list.inactiveSelectionBackground#94826a1a
  • minimap.background#fbf9f8
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#94826a4d
  • notificationLink.foreground#94826a
  • notifications.background#fbf9f8
  • notifications.foreground#1c1814
  • panel.background#f7f4f0
  • panel.border#e0d6c8
  • panelTitle.activeBorder#94826a
  • panelTitle.activeForeground#1c1814
  • panelTitle.inactiveForeground#b9a384
  • peekView.border#94826a
  • peekViewEditor.background#f7f4f0
  • peekViewResult.background#f2eee9
  • peekViewTitle.background#f7f4f0
  • progressBar.background#94826a
  • scrollbar.shadow#12100d14
  • scrollbarSlider.activeBackground#1c18144d
  • scrollbarSlider.background#1c18141a
  • scrollbarSlider.hoverBackground#1c181433
  • selection.background#94826a33
  • sideBar.background#f7f4f0
  • sideBar.border#e0d6c8
  • sideBar.foreground#1c1814
  • sideBarSectionHeader.background#94826a1a
  • sideBarSectionHeader.foreground#1c1814
  • sideBarTitle.foreground#1c1814
  • statusBar.background#94826a
  • statusBar.border#e0d6c8
  • statusBar.debuggingBackground#436495
  • statusBar.debuggingForeground#f9f8f5
  • statusBar.foreground#1c1814
  • statusBar.noFolderBackground#f2eee9
  • statusBarItem.hoverBackground#f9f8f533
  • statusBarItem.remoteBackground#7e6f5a
  • statusBarItem.remoteForeground#1c1814
  • tab.activeBackground#fbf9f8
  • tab.activeBorder#94826a
  • tab.activeBorderTop#94826a00
  • tab.activeForeground#1c1814
  • tab.border#e0d6c8
  • tab.inactiveBackground#f7f4f0
  • tab.inactiveForeground#b9a384
  • terminal.ansiBlack#1c1814
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#b9a384
  • 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#fbf9f8
  • terminal.ansiYellow#d4a017
  • terminal.background#f7f4f0
  • terminal.foreground#1c1814
  • terminalCursor.foreground#94826a
  • textLink.activeForeground#3b5984
  • textLink.foreground#436495
  • titleBar.activeBackground#f7f4f0
  • titleBar.activeForeground#1c1814
  • titleBar.border#e0d6c8
  • titleBar.inactiveBackground#f7f4f0
  • titleBar.inactiveForeground#b9a384

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b9a384italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#796c56bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#796c56bold
storage.type, storage.modifier#796c56bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4a6fa5
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#796c56
string.regexp#4a6fa5
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7c2029bold
variable.other.constant, variable.other.enummember#7c2029bold
constant.character.escape#786c5b
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#c63f00italic
entity.name.type.parameter#c63f00italic
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#1c1814
variable.parameter#1c1814italic
variable.language, variable.language.this, variable.language.self, variable.language.super#796c56italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1c1814
entity.name.class, entity.name.type.class, support.class#96548abold italic
entity.other.inherited-class#96548aitalic
entity.name.tag, punctuation.definition.tag#796c56bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#786c5b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b9a384
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#c63f00italic
support.type.property-name.css, support.type.vendored.property-name.css#c63f00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#96548abold
support.constant.property-value.css, support.constant.color.css#7c2029
keyword.other.unit.css#5c068c
support.type.property-name.json#c63f00
markup.heading, markup.heading entity.name, entity.name.section.markdown#796c56bold
markup.bold#7c2029bold
markup.italic#c63f00italic
markup.inline.raw, markup.raw#4a6fa5
markup.underline.link#38793a
markup.quote#b9a384italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050