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#e9e7e0
  • activityBar.border#cac6b4
  • activityBar.foreground#828c6b
  • activityBar.inactiveForeground#908c64
  • activityBarBadge.background#56447d
  • activityBarBadge.foreground#f5f4f1
  • badge.background#828c6b
  • badge.foreground#181a14
  • breadcrumb.activeSelectionForeground#181a14
  • breadcrumb.focusForeground#181a14
  • breadcrumb.foreground#908c64
  • button.background#828c6b
  • button.foreground#181a14
  • button.hoverBackground#757e60
  • button.secondaryBackground#e9e7e0
  • button.secondaryForeground#181a14
  • descriptionForeground#908c64
  • dropdown.background#f8f7f5
  • dropdown.border#cac6b4
  • dropdown.foreground#181a14
  • editor.background#f8f7f5
  • editor.findMatchBackground#86d0bf59
  • editor.findMatchHighlightBackground#86d0bf26
  • editor.foreground#181a14
  • editor.inactiveSelectionBackground#828c6b1a
  • editor.lineHighlightBackground#828c6b14
  • editor.lineHighlightBorder#828c6b00
  • editor.selectionBackground#828c6b33
  • editor.wordHighlightBackground#828c6b26
  • editorBracketMatch.background#828c6b33
  • editorBracketMatch.border#828c6b80
  • editorCursor.foreground#828c6b
  • editorError.foreground#bf1932
  • editorGroup.border#cac6b4
  • editorGroupHeader.tabsBackground#f1efea
  • editorGroupHeader.tabsBorder#cac6b4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#181a142e
  • editorIndentGuide.background#181a1414
  • editorInfo.foreground#56447d
  • editorLineNumber.activeForeground#181a14
  • editorLineNumber.foreground#908c64
  • editorRuler.foreground#181a1414
  • editorSuggestWidget.selectedBackground#828c6b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#181a141a
  • editorWidget.background#f8f7f5
  • editorWidget.border#cac6b4
  • focusBorder#828c6b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#908c64
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#908c64
  • input.background#f8f7f5
  • input.border#cac6b4
  • input.foreground#181a14
  • input.placeholderForeground#908c64
  • inputOption.activeBorder#828c6b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#56447d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#828c6b33
  • list.activeSelectionForeground#181a14
  • list.focusBackground#828c6b26
  • list.highlightForeground#828c6b
  • list.hoverBackground#828c6b1a
  • list.inactiveSelectionBackground#828c6b1a
  • minimap.background#f8f7f5
  • minimap.findMatchHighlight#86d0bf80
  • minimap.selectionHighlight#828c6b4d
  • notificationLink.foreground#828c6b
  • notifications.background#f8f7f5
  • notifications.foreground#181a14
  • panel.background#f1efea
  • panel.border#cac6b4
  • panelTitle.activeBorder#828c6b
  • panelTitle.activeForeground#181a14
  • panelTitle.inactiveForeground#908c64
  • peekView.border#828c6b
  • peekViewEditor.background#f1efea
  • peekViewResult.background#e9e7e0
  • peekViewTitle.background#f1efea
  • progressBar.background#828c6b
  • scrollbar.shadow#10110d14
  • scrollbarSlider.activeBackground#181a144d
  • scrollbarSlider.background#181a141a
  • scrollbarSlider.hoverBackground#181a1433
  • selection.background#828c6b33
  • sideBar.background#f1efea
  • sideBar.border#cac6b4
  • sideBar.foreground#181a14
  • sideBarSectionHeader.background#828c6b1a
  • sideBarSectionHeader.foreground#181a14
  • sideBarTitle.foreground#181a14
  • statusBar.background#828c6b
  • statusBar.border#cac6b4
  • statusBar.debuggingBackground#56447d
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#181a14
  • statusBar.noFolderBackground#e9e7e0
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#6f775b
  • statusBarItem.remoteForeground#181a14
  • tab.activeBackground#f8f7f5
  • tab.activeBorder#828c6b
  • tab.activeBorderTop#828c6b00
  • tab.activeForeground#181a14
  • tab.border#cac6b4
  • tab.inactiveBackground#f1efea
  • tab.inactiveForeground#908c64
  • terminal.ansiBlack#181a14
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#908c64
  • 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#f8f7f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f1efea
  • terminal.foreground#181a14
  • terminalCursor.foreground#828c6b
  • textLink.activeForeground#4c3c6f
  • textLink.foreground#56447d
  • titleBar.activeBackground#f1efea
  • titleBar.activeForeground#181a14
  • titleBar.border#cac6b4
  • titleBar.inactiveBackground#f1efea
  • titleBar.inactiveForeground#908c64

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#908c64italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6c7358bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6c7358bold
storage.type, storage.modifier#6c7358bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#5f4b8b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6c7358
string.regexp#5f4b8b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4b746b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8d6930bold
variable.other.constant, variable.other.enummember#8d6930bold
constant.character.escape#6c705c
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#6c6e1fitalic
entity.name.type.parameter#6c6e1fitalic
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#181a14
variable.parameter#181a14italic
variable.language, variable.language.this, variable.language.self, variable.language.super#6c7358italic
variable.other.property, variable.other.object.property, meta.object-literal.key#181a14
entity.name.class, entity.name.type.class, support.class#7c2029bold italic
entity.other.inherited-class#7c2029italic
entity.name.tag, punctuation.definition.tag#6c7358bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6c705c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#908c64
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6c6e1fitalic
support.type.property-name.css, support.type.vendored.property-name.css#6c6e1f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7c2029bold
support.constant.property-value.css, support.constant.color.css#8d6930
keyword.other.unit.css#4b746b
support.type.property-name.json#6c6e1f
markup.heading, markup.heading entity.name, entity.name.section.markdown#6c7358bold
markup.bold#8d6930bold
markup.italic#6c6e1fitalic
markup.inline.raw, markup.raw#5f4b8b
markup.underline.link#786d74
markup.quote#908c64italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050