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#cfb7bf
  • activityBar.foreground#c28b8d
  • activityBar.inactiveForeground#ad7481
  • activityBarBadge.background#4b9e9d
  • activityBarBadge.foreground#f5f1f2
  • badge.background#c28b8d
  • badge.foreground#241a1a
  • breadcrumb.activeSelectionForeground#241a1a
  • breadcrumb.focusForeground#241a1a
  • breadcrumb.foreground#ad7481
  • button.background#c28b8d
  • button.foreground#241a1a
  • button.hoverBackground#af7d7f
  • button.secondaryBackground#eae1e4
  • button.secondaryForeground#241a1a
  • descriptionForeground#ad7481
  • dropdown.background#f8f5f6
  • dropdown.border#cfb7bf
  • dropdown.foreground#241a1a
  • editor.background#f8f5f6
  • editor.findMatchBackground#9063cd59
  • editor.findMatchHighlightBackground#9063cd26
  • editor.foreground#241a1a
  • editor.inactiveSelectionBackground#c28b8d1a
  • editor.lineHighlightBackground#c28b8d14
  • editor.lineHighlightBorder#c28b8d00
  • editor.selectionBackground#c28b8d33
  • editor.wordHighlightBackground#c28b8d26
  • editorBracketMatch.background#c28b8d33
  • editorBracketMatch.border#c28b8d80
  • editorCursor.foreground#c28b8d
  • editorError.foreground#bf1932
  • editorGroup.border#cfb7bf
  • editorGroupHeader.tabsBackground#f1ebed
  • editorGroupHeader.tabsBorder#cfb7bf
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#241a1a2e
  • editorIndentGuide.background#241a1a14
  • editorInfo.foreground#4b9e9d
  • editorLineNumber.activeForeground#241a1a
  • editorLineNumber.foreground#ad7481
  • editorRuler.foreground#241a1a14
  • editorSuggestWidget.selectedBackground#c28b8d26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#241a1a1a
  • editorWidget.background#f8f5f6
  • editorWidget.border#cfb7bf
  • focusBorder#c28b8d80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ad7481
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ad7481
  • input.background#f8f5f6
  • input.border#cfb7bf
  • input.foreground#241a1a
  • input.placeholderForeground#ad7481
  • inputOption.activeBorder#c28b8d
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#4b9e9d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#c28b8d33
  • list.activeSelectionForeground#241a1a
  • list.focusBackground#c28b8d26
  • list.highlightForeground#c28b8d
  • list.hoverBackground#c28b8d1a
  • list.inactiveSelectionBackground#c28b8d1a
  • minimap.background#f8f5f6
  • minimap.findMatchHighlight#9063cd80
  • minimap.selectionHighlight#c28b8d4d
  • notificationLink.foreground#c28b8d
  • notifications.background#f8f5f6
  • notifications.foreground#241a1a
  • panel.background#f1ebed
  • panel.border#cfb7bf
  • panelTitle.activeBorder#c28b8d
  • panelTitle.activeForeground#241a1a
  • panelTitle.inactiveForeground#ad7481
  • peekView.border#c28b8d
  • peekViewEditor.background#f1ebed
  • peekViewResult.background#eae1e4
  • peekViewTitle.background#f1ebed
  • progressBar.background#c28b8d
  • scrollbar.shadow#18111214
  • scrollbarSlider.activeBackground#241a1a4d
  • scrollbarSlider.background#241a1a1a
  • scrollbarSlider.hoverBackground#241a1a33
  • selection.background#c28b8d33
  • sideBar.background#f1ebed
  • sideBar.border#cfb7bf
  • sideBar.foreground#241a1a
  • sideBarSectionHeader.background#c28b8d1a
  • sideBarSectionHeader.foreground#241a1a
  • sideBarTitle.foreground#241a1a
  • statusBar.background#c28b8d
  • statusBar.border#cfb7bf
  • statusBar.debuggingBackground#4b9e9d
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#241a1a
  • statusBar.noFolderBackground#eae1e4
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#a57678
  • statusBarItem.remoteForeground#241a1a
  • tab.activeBackground#f8f5f6
  • tab.activeBorder#c28b8d
  • tab.activeBorderTop#c28b8d00
  • tab.activeForeground#241a1a
  • tab.border#cfb7bf
  • tab.inactiveBackground#f1ebed
  • tab.inactiveForeground#ad7481
  • terminal.ansiBlack#241a1a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ad7481
  • 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#241a1a
  • terminalCursor.foreground#c28b8d
  • textLink.activeForeground#428d8b
  • textLink.foreground#4b9e9d
  • titleBar.activeBackground#f1ebed
  • titleBar.activeForeground#241a1a
  • titleBar.border#cfb7bf
  • titleBar.inactiveBackground#f1ebed
  • titleBar.inactiveForeground#ad7481

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ad7481italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#886162bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#886162bold
storage.type, storage.modifier#886162bold
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#886162
string.regexp#367472
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#845bbd
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#786d74bold
variable.other.constant, variable.other.enummember#786d74bold
constant.character.escape#886668
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#88666fitalic
entity.name.type.parameter#88666fitalic
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#241a1a
variable.parameter#241a1aitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#886162italic
variable.other.property, variable.other.object.property, meta.object-literal.key#241a1a
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#886162bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#886668
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ad7481
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#88666fitalic
support.type.property-name.css, support.type.vendored.property-name.css#88666f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#786d74
keyword.other.unit.css#845bbd
support.type.property-name.json#88666f
markup.heading, markup.heading entity.name, entity.name.section.markdown#886162bold
markup.bold#786d74bold
markup.italic#88666fitalic
markup.inline.raw, markup.raw#367472
markup.underline.link#38793a
markup.quote#ad7481italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050