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#faf5f2
  • activityBar.border#f2e4dd
  • activityBar.foreground#c6806f
  • activityBar.inactiveForeground#e8bbaa
  • activityBarBadge.background#00a2cb
  • activityBarBadge.foreground#fcfbfa
  • badge.background#c6806f
  • badge.foreground#251815
  • breadcrumb.activeSelectionForeground#251815
  • breadcrumb.focusForeground#251815
  • breadcrumb.foreground#e8bbaa
  • button.background#c6806f
  • button.foreground#251815
  • button.hoverBackground#b27364
  • button.secondaryBackground#faf5f2
  • button.secondaryForeground#251815
  • descriptionForeground#e8bbaa
  • dropdown.background#fdfcfb
  • dropdown.border#f2e4dd
  • dropdown.foreground#251815
  • editor.background#fdfcfb
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#251815
  • editor.inactiveSelectionBackground#c6806f1a
  • editor.lineHighlightBackground#c6806f14
  • editor.lineHighlightBorder#c6806f00
  • editor.selectionBackground#c6806f33
  • editor.wordHighlightBackground#c6806f26
  • editorBracketMatch.background#c6806f33
  • editorBracketMatch.border#c6806f80
  • editorCursor.foreground#c6806f
  • editorError.foreground#bf1932
  • editorGroup.border#f2e4dd
  • editorGroupHeader.tabsBackground#fbf9f7
  • editorGroupHeader.tabsBorder#f2e4dd
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2518152e
  • editorIndentGuide.background#25181514
  • editorInfo.foreground#00a2cb
  • editorLineNumber.activeForeground#251815
  • editorLineNumber.foreground#e8bbaa
  • editorRuler.foreground#25181514
  • editorSuggestWidget.selectedBackground#c6806f26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2518151a
  • editorWidget.background#fdfcfb
  • editorWidget.border#f2e4dd
  • focusBorder#c6806f80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#e8bbaa
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#e8bbaa
  • input.background#fdfcfb
  • input.border#f2e4dd
  • input.foreground#251815
  • input.placeholderForeground#e8bbaa
  • inputOption.activeBorder#c6806f
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a2cb
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c6806f33
  • list.activeSelectionForeground#251815
  • list.focusBackground#c6806f26
  • list.highlightForeground#c6806f
  • list.hoverBackground#c6806f1a
  • list.inactiveSelectionBackground#c6806f1a
  • minimap.background#fdfcfb
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#c6806f4d
  • notificationLink.foreground#c6806f
  • notifications.background#fdfcfb
  • notifications.foreground#251815
  • panel.background#fbf9f7
  • panel.border#f2e4dd
  • panelTitle.activeBorder#c6806f
  • panelTitle.activeForeground#251815
  • panelTitle.inactiveForeground#e8bbaa
  • peekView.border#c6806f
  • peekViewEditor.background#fbf9f7
  • peekViewResult.background#faf5f2
  • peekViewTitle.background#fbf9f7
  • progressBar.background#c6806f
  • scrollbar.shadow#19100e14
  • scrollbarSlider.activeBackground#2518154d
  • scrollbarSlider.background#2518151a
  • scrollbarSlider.hoverBackground#25181533
  • selection.background#c6806f33
  • sideBar.background#fbf9f7
  • sideBar.border#f2e4dd
  • sideBar.foreground#251815
  • sideBarSectionHeader.background#c6806f1a
  • sideBarSectionHeader.foreground#251815
  • sideBarTitle.foreground#251815
  • statusBar.background#c6806f
  • statusBar.border#f2e4dd
  • statusBar.debuggingBackground#00a2cb
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#251815
  • statusBar.noFolderBackground#faf5f2
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#a86d5e
  • statusBarItem.remoteForeground#251815
  • tab.activeBackground#fdfcfb
  • tab.activeBorder#c6806f
  • tab.activeBorderTop#c6806f00
  • tab.activeForeground#251815
  • tab.border#f2e4dd
  • tab.inactiveBackground#fbf9f7
  • tab.inactiveForeground#e8bbaa
  • terminal.ansiBlack#251815
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#e8bbaa
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfcfb
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf9f7
  • terminal.foreground#251815
  • terminalCursor.foreground#c6806f
  • textLink.activeForeground#0090b4
  • textLink.foreground#00a2cb
  • titleBar.activeBackground#fbf9f7
  • titleBar.activeForeground#251815
  • titleBar.border#f2e4dd
  • titleBar.inactiveBackground#fbf9f7
  • titleBar.inactiveForeground#e8bbaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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