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#edeeed
  • activityBar.border#d2d3d3
  • activityBar.foreground#7b7e7e
  • activityBar.inactiveForeground#9a9e9d
  • activityBarBadge.background#c34765
  • activityBarBadge.foreground#f7f7f7
  • badge.background#7b7e7e
  • badge.foreground#171818
  • breadcrumb.activeSelectionForeground#171818
  • breadcrumb.focusForeground#171818
  • breadcrumb.foreground#9a9e9d
  • button.background#7b7e7e
  • button.foreground#171818
  • button.hoverBackground#6f7171
  • button.secondaryBackground#edeeed
  • button.secondaryForeground#171818
  • descriptionForeground#9a9e9d
  • dropdown.background#f9f9f9
  • dropdown.border#d2d3d3
  • dropdown.foreground#171818
  • editor.background#f9f9f9
  • editor.findMatchBackground#5f4b8b59
  • editor.findMatchHighlightBackground#5f4b8b26
  • editor.foreground#171818
  • editor.inactiveSelectionBackground#7b7e7e1a
  • editor.lineHighlightBackground#7b7e7e14
  • editor.lineHighlightBorder#7b7e7e00
  • editor.selectionBackground#7b7e7e33
  • editor.wordHighlightBackground#7b7e7e26
  • editorBracketMatch.background#7b7e7e33
  • editorBracketMatch.border#7b7e7e80
  • editorCursor.foreground#7b7e7e
  • editorError.foreground#bf1932
  • editorGroup.border#d2d3d3
  • editorGroupHeader.tabsBackground#f3f3f3
  • editorGroupHeader.tabsBorder#d2d3d3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1718182e
  • editorIndentGuide.background#17181814
  • editorInfo.foreground#c34765
  • editorLineNumber.activeForeground#171818
  • editorLineNumber.foreground#9a9e9d
  • editorRuler.foreground#17181814
  • editorSuggestWidget.selectedBackground#7b7e7e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1718181a
  • editorWidget.background#f9f9f9
  • editorWidget.border#d2d3d3
  • focusBorder#7b7e7e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#9a9e9d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#9a9e9d
  • input.background#f9f9f9
  • input.border#d2d3d3
  • input.foreground#171818
  • input.placeholderForeground#9a9e9d
  • inputOption.activeBorder#7b7e7e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#c34765
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7b7e7e33
  • list.activeSelectionForeground#171818
  • list.focusBackground#7b7e7e26
  • list.highlightForeground#7b7e7e
  • list.hoverBackground#7b7e7e1a
  • list.inactiveSelectionBackground#7b7e7e1a
  • minimap.background#f9f9f9
  • minimap.findMatchHighlight#5f4b8b80
  • minimap.selectionHighlight#7b7e7e4d
  • notificationLink.foreground#7b7e7e
  • notifications.background#f9f9f9
  • notifications.foreground#171818
  • panel.background#f3f3f3
  • panel.border#d2d3d3
  • panelTitle.activeBorder#7b7e7e
  • panelTitle.activeForeground#171818
  • panelTitle.inactiveForeground#9a9e9d
  • peekView.border#7b7e7e
  • peekViewEditor.background#f3f3f3
  • peekViewResult.background#edeeed
  • peekViewTitle.background#f3f3f3
  • progressBar.background#7b7e7e
  • scrollbar.shadow#0f101014
  • scrollbarSlider.activeBackground#1718184d
  • scrollbarSlider.background#1718181a
  • scrollbarSlider.hoverBackground#17181833
  • selection.background#7b7e7e33
  • sideBar.background#f3f3f3
  • sideBar.border#d2d3d3
  • sideBar.foreground#171818
  • sideBarSectionHeader.background#7b7e7e1a
  • sideBarSectionHeader.foreground#171818
  • sideBarTitle.foreground#171818
  • statusBar.background#7b7e7e
  • statusBar.border#d2d3d3
  • statusBar.debuggingBackground#c34765
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#171818
  • statusBar.noFolderBackground#edeeed
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#696b6b
  • statusBarItem.remoteForeground#171818
  • tab.activeBackground#f9f9f9
  • tab.activeBorder#7b7e7e
  • tab.activeBorderTop#7b7e7e00
  • tab.activeForeground#171818
  • tab.border#d2d3d3
  • tab.inactiveBackground#f3f3f3
  • tab.inactiveForeground#9a9e9d
  • terminal.ansiBlack#171818
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#9a9e9d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f9f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f3f3f3
  • terminal.foreground#171818
  • terminalCursor.foreground#7b7e7e
  • textLink.activeForeground#ae3f5a
  • textLink.foreground#c34765
  • titleBar.activeBackground#f3f3f3
  • titleBar.activeForeground#171818
  • titleBar.border#d2d3d3
  • titleBar.inactiveBackground#f3f3f3
  • titleBar.inactiveForeground#9a9e9d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9a9e9ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6f706fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6f706fbold
storage.type, storage.modifier#6f706fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b8435f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6f706f
string.regexp#b8435f
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5f4b8b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#38793abold
variable.other.constant, variable.other.enummember#38793abold
constant.character.escape#6f7170
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#007986italic
entity.name.type.parameter#007986italic
entity.name.function, meta.function entity.name.function#716962bold
meta.function-call entity.name.function, support.function#716962
meta.method-call entity.name.function, entity.name.function.member#716962
variable, variable.other, variable.other.readwrite#171818
variable.parameter#171818italic
variable.language, variable.language.this, variable.language.self, variable.language.super#6f706fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#171818
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#6f706fbold
entity.other.attribute-name#716962italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6f7170
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9a9e9d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#007986italic
support.type.property-name.css, support.type.vendored.property-name.css#007986
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#38793a
keyword.other.unit.css#5f4b8b
support.type.property-name.json#007986
markup.heading, markup.heading entity.name, entity.name.section.markdown#6f706fbold
markup.bold#38793abold
markup.italic#007986italic
markup.inline.raw, markup.raw#b8435f
markup.underline.link#716962
markup.quote#9a9e9ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050