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#e9dfe3
  • activityBar.border#cdafb9
  • activityBar.foreground#d94f70
  • activityBar.inactiveForeground#a24e67
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#d94f70
  • badge.foreground#210c11
  • breadcrumb.activeSelectionForeground#210c11
  • breadcrumb.focusForeground#210c11
  • breadcrumb.foreground#a24e67
  • button.background#d94f70
  • button.foreground#210c11
  • button.hoverBackground#c34765
  • button.secondaryBackground#e9dfe3
  • button.secondaryForeground#210c11
  • descriptionForeground#a24e67
  • dropdown.background#f8f4f6
  • dropdown.border#cdafb9
  • dropdown.foreground#210c11
  • editor.background#f8f4f6
  • editor.findMatchBackground#a3af8659
  • editor.findMatchHighlightBackground#a3af8626
  • editor.foreground#210c11
  • editor.inactiveSelectionBackground#d94f701a
  • editor.lineHighlightBackground#d94f7014
  • editor.lineHighlightBorder#d94f7000
  • editor.selectionBackground#d94f7033
  • editor.wordHighlightBackground#d94f7026
  • editorBracketMatch.background#d94f7033
  • editorBracketMatch.border#d94f7080
  • editorCursor.foreground#d94f70
  • editorError.foreground#bf1932
  • editorGroup.border#cdafb9
  • editorGroupHeader.tabsBackground#f1eaec
  • editorGroupHeader.tabsBorder#cdafb9
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#210c112e
  • editorIndentGuide.background#210c1114
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#210c11
  • editorLineNumber.foreground#a24e67
  • editorRuler.foreground#210c1114
  • editorSuggestWidget.selectedBackground#d94f7026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#210c111a
  • editorWidget.background#f8f4f6
  • editorWidget.border#cdafb9
  • focusBorder#d94f7080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a24e67
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a24e67
  • input.background#f8f4f6
  • input.border#cdafb9
  • input.foreground#210c11
  • input.placeholderForeground#a24e67
  • inputOption.activeBorder#d94f70
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#d94f7033
  • list.activeSelectionForeground#210c11
  • list.focusBackground#d94f7026
  • list.highlightForeground#d94f70
  • list.hoverBackground#d94f701a
  • list.inactiveSelectionBackground#d94f701a
  • minimap.background#f8f4f6
  • minimap.findMatchHighlight#a3af8680
  • minimap.selectionHighlight#d94f704d
  • notificationLink.foreground#d94f70
  • notifications.background#f8f4f6
  • notifications.foreground#210c11
  • panel.background#f1eaec
  • panel.border#cdafb9
  • panelTitle.activeBorder#d94f70
  • panelTitle.activeForeground#210c11
  • panelTitle.inactiveForeground#a24e67
  • peekView.border#d94f70
  • peekViewEditor.background#f1eaec
  • peekViewResult.background#e9dfe3
  • peekViewTitle.background#f1eaec
  • progressBar.background#d94f70
  • scrollbar.shadow#16080b14
  • scrollbarSlider.activeBackground#210c114d
  • scrollbarSlider.background#210c111a
  • scrollbarSlider.hoverBackground#210c1133
  • selection.background#d94f7033
  • sideBar.background#f1eaec
  • sideBar.border#cdafb9
  • sideBar.foreground#210c11
  • sideBarSectionHeader.background#d94f701a
  • sideBarSectionHeader.foreground#210c11
  • sideBarTitle.foreground#210c11
  • statusBar.background#d94f70
  • statusBar.border#cdafb9
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#210c11
  • statusBar.noFolderBackground#e9dfe3
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#b8435f
  • statusBarItem.remoteForeground#210c11
  • tab.activeBackground#f8f4f6
  • tab.activeBorder#d94f70
  • tab.activeBorderTop#d94f7000
  • tab.activeForeground#210c11
  • tab.border#cdafb9
  • tab.inactiveBackground#f1eaec
  • tab.inactiveForeground#a24e67
  • terminal.ansiBlack#210c11
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a24e67
  • 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#f8f4f6
  • terminal.ansiYellow#d4a017
  • terminal.background#f1eaec
  • terminal.foreground#210c11
  • terminalCursor.foreground#d94f70
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f1eaec
  • titleBar.activeForeground#210c11
  • titleBar.border#cdafb9
  • titleBar.inactiveBackground#f1eaec
  • titleBar.inactiveForeground#a24e67

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a24e67italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b8435fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b8435fbold
storage.type, storage.modifier#b8435fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4b746b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#b8435f
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6c7358
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#716962bold
variable.other.constant, variable.other.enummember#716962bold
constant.character.escape#ae5267
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#955251italic
entity.name.type.parameter#955251italic
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#210c11
variable.parameter#210c11italic
variable.language, variable.language.this, variable.language.self, variable.language.super#b8435fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#210c11
entity.name.class, entity.name.type.class, support.class#845bbdbold italic
entity.other.inherited-class#845bbditalic
entity.name.tag, punctuation.definition.tag#b8435fbold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ae5267
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a24e67
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#955251italic
support.type.property-name.css, support.type.vendored.property-name.css#955251
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#845bbdbold
support.constant.property-value.css, support.constant.color.css#716962
keyword.other.unit.css#6c7358
support.type.property-name.json#955251
markup.heading, markup.heading entity.name, entity.name.section.markdown#b8435fbold
markup.bold#716962bold
markup.italic#955251italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#38793a
markup.quote#a24e67italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050