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#eae1e4
  • activityBar.border#d0bac1
  • activityBar.foreground#c6a2a1
  • activityBar.inactiveForeground#ae7f8b
  • activityBarBadge.background#4b9e9d
  • activityBarBadge.foreground#f5f1f2
  • badge.background#c6a2a1
  • badge.foreground#251e1e
  • breadcrumb.activeSelectionForeground#251e1e
  • breadcrumb.focusForeground#251e1e
  • breadcrumb.foreground#ae7f8b
  • button.background#c6a2a1
  • button.foreground#251e1e
  • button.hoverBackground#b29291
  • button.secondaryBackground#eae1e4
  • button.secondaryForeground#251e1e
  • descriptionForeground#ae7f8b
  • dropdown.background#f8f5f6
  • dropdown.border#d0bac1
  • dropdown.foreground#251e1e
  • editor.background#f8f5f6
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#251e1e
  • editor.inactiveSelectionBackground#c6a2a11a
  • editor.lineHighlightBackground#c6a2a114
  • editor.lineHighlightBorder#c6a2a100
  • editor.selectionBackground#c6a2a133
  • editor.wordHighlightBackground#c6a2a126
  • editorBracketMatch.background#c6a2a133
  • editorBracketMatch.border#c6a2a180
  • editorCursor.foreground#c6a2a1
  • editorError.foreground#bf1932
  • editorGroup.border#d0bac1
  • editorGroupHeader.tabsBackground#f1ebed
  • editorGroupHeader.tabsBorder#d0bac1
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#251e1e2e
  • editorIndentGuide.background#251e1e14
  • editorInfo.foreground#4b9e9d
  • editorLineNumber.activeForeground#251e1e
  • editorLineNumber.foreground#ae7f8b
  • editorRuler.foreground#251e1e14
  • editorSuggestWidget.selectedBackground#c6a2a126
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#251e1e1a
  • editorWidget.background#f8f5f6
  • editorWidget.border#d0bac1
  • focusBorder#c6a2a180
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ae7f8b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ae7f8b
  • input.background#f8f5f6
  • input.border#d0bac1
  • input.foreground#251e1e
  • input.placeholderForeground#ae7f8b
  • inputOption.activeBorder#c6a2a1
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#4b9e9d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c6a2a133
  • list.activeSelectionForeground#251e1e
  • list.focusBackground#c6a2a126
  • list.highlightForeground#c6a2a1
  • list.hoverBackground#c6a2a11a
  • list.inactiveSelectionBackground#c6a2a11a
  • minimap.background#f8f5f6
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#c6a2a14d
  • notificationLink.foreground#c6a2a1
  • notifications.background#f8f5f6
  • notifications.foreground#251e1e
  • panel.background#f1ebed
  • panel.border#d0bac1
  • panelTitle.activeBorder#c6a2a1
  • panelTitle.activeForeground#251e1e
  • panelTitle.inactiveForeground#ae7f8b
  • peekView.border#c6a2a1
  • peekViewEditor.background#f1ebed
  • peekViewResult.background#eae1e4
  • peekViewTitle.background#f1ebed
  • progressBar.background#c6a2a1
  • scrollbar.shadow#19141414
  • scrollbarSlider.activeBackground#251e1e4d
  • scrollbarSlider.background#251e1e1a
  • scrollbarSlider.hoverBackground#251e1e33
  • selection.background#c6a2a133
  • sideBar.background#f1ebed
  • sideBar.border#d0bac1
  • sideBar.foreground#251e1e
  • sideBarSectionHeader.background#c6a2a11a
  • sideBarSectionHeader.foreground#251e1e
  • sideBarTitle.foreground#251e1e
  • statusBar.background#c6a2a1
  • statusBar.border#d0bac1
  • statusBar.debuggingBackground#4b9e9d
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#251e1e
  • statusBar.noFolderBackground#eae1e4
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#a88a89
  • statusBarItem.remoteForeground#251e1e
  • tab.activeBackground#f8f5f6
  • tab.activeBorder#c6a2a1
  • tab.activeBorderTop#c6a2a100
  • tab.activeForeground#251e1e
  • tab.border#d0bac1
  • tab.inactiveBackground#f1ebed
  • tab.inactiveForeground#ae7f8b
  • terminal.ansiBlack#251e1e
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ae7f8b
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f5f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f1ebed
  • terminal.foreground#251e1e
  • terminalCursor.foreground#c6a2a1
  • textLink.activeForeground#428d8b
  • textLink.foreground#4b9e9d
  • titleBar.activeBackground#f1ebed
  • titleBar.activeForeground#251e1e
  • titleBar.border#d0bac1
  • titleBar.inactiveBackground#f1ebed
  • titleBar.inactiveForeground#ae7f8b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ae7f8bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7f6666bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7f6666bold
storage.type, storage.modifier#7f6666bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#367472
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7f6666
string.regexp#367472
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#846c2dbold
variable.other.constant, variable.other.enummember#846c2dbold
constant.character.escape#766463
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#7c1c32italic
entity.name.type.parameter#7c1c32italic
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#251e1e
variable.parameter#251e1eitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#7f6666italic
variable.other.property, variable.other.object.property, meta.object-literal.key#251e1e
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#7f6666bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#766463
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ae7f8b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7c1c32italic
support.type.property-name.css, support.type.vendored.property-name.css#7c1c32
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#846c2d
keyword.other.unit.css#5c068c
support.type.property-name.json#7c1c32
markup.heading, markup.heading entity.name, entity.name.section.markdown#7f6666bold
markup.bold#846c2dbold
markup.italic#7c1c32italic
markup.inline.raw, markup.raw#367472
markup.underline.link#786d74
markup.quote#ae7f8bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050