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#eadfe3
  • activityBar.border#ceaeb9
  • activityBar.foreground#e83e6c
  • activityBar.inactiveForeground#a84765
  • activityBarBadge.background#79bbac
  • activityBarBadge.foreground#f5f1f2
  • badge.background#e83e6c
  • badge.foreground#230910
  • breadcrumb.activeSelectionForeground#230910
  • breadcrumb.focusForeground#230910
  • breadcrumb.foreground#a84765
  • button.background#e83e6c
  • button.foreground#230910
  • button.hoverBackground#d13861
  • button.secondaryBackground#eadfe3
  • button.secondaryForeground#230910
  • descriptionForeground#a84765
  • dropdown.background#f8f4f6
  • dropdown.border#ceaeb9
  • dropdown.foreground#230910
  • editor.background#f8f4f6
  • editor.findMatchBackground#5f4b8b59
  • editor.findMatchHighlightBackground#5f4b8b26
  • editor.foreground#230910
  • editor.inactiveSelectionBackground#e83e6c1a
  • editor.lineHighlightBackground#e83e6c14
  • editor.lineHighlightBorder#e83e6c00
  • editor.selectionBackground#e83e6c33
  • editor.wordHighlightBackground#e83e6c26
  • editorBracketMatch.background#e83e6c33
  • editorBracketMatch.border#e83e6c80
  • editorCursor.foreground#e83e6c
  • editorError.foreground#bf1932
  • editorGroup.border#ceaeb9
  • editorGroupHeader.tabsBackground#f1eaec
  • editorGroupHeader.tabsBorder#ceaeb9
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2309102e
  • editorIndentGuide.background#23091014
  • editorInfo.foreground#79bbac
  • editorLineNumber.activeForeground#230910
  • editorLineNumber.foreground#a84765
  • editorRuler.foreground#23091014
  • editorSuggestWidget.selectedBackground#e83e6c26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2309101a
  • editorWidget.background#f8f4f6
  • editorWidget.border#ceaeb9
  • focusBorder#e83e6c80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a84765
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a84765
  • input.background#f8f4f6
  • input.border#ceaeb9
  • input.foreground#230910
  • input.placeholderForeground#a84765
  • inputOption.activeBorder#e83e6c
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#79bbac
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#e83e6c33
  • list.activeSelectionForeground#230910
  • list.focusBackground#e83e6c26
  • list.highlightForeground#e83e6c
  • list.hoverBackground#e83e6c1a
  • list.inactiveSelectionBackground#e83e6c1a
  • minimap.background#f8f4f6
  • minimap.findMatchHighlight#5f4b8b80
  • minimap.selectionHighlight#e83e6c4d
  • notificationLink.foreground#e83e6c
  • notifications.background#f8f4f6
  • notifications.foreground#230910
  • panel.background#f1eaec
  • panel.border#ceaeb9
  • panelTitle.activeBorder#e83e6c
  • panelTitle.activeForeground#230910
  • panelTitle.inactiveForeground#a84765
  • peekView.border#e83e6c
  • peekViewEditor.background#f1eaec
  • peekViewResult.background#eadfe3
  • peekViewTitle.background#f1eaec
  • progressBar.background#e83e6c
  • scrollbar.shadow#17060b14
  • scrollbarSlider.activeBackground#2309104d
  • scrollbarSlider.background#2309101a
  • scrollbarSlider.hoverBackground#23091033
  • selection.background#e83e6c33
  • sideBar.background#f1eaec
  • sideBar.border#ceaeb9
  • sideBar.foreground#230910
  • sideBarSectionHeader.background#e83e6c1a
  • sideBarSectionHeader.foreground#230910
  • sideBarTitle.foreground#230910
  • statusBar.background#e83e6c
  • statusBar.border#ceaeb9
  • statusBar.debuggingBackground#79bbac
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#230910
  • statusBar.noFolderBackground#eadfe3
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#c5355c
  • statusBarItem.remoteForeground#230910
  • tab.activeBackground#f8f4f6
  • tab.activeBorder#e83e6c
  • tab.activeBorderTop#e83e6c00
  • tab.activeForeground#230910
  • tab.border#ceaeb9
  • tab.inactiveBackground#f1eaec
  • tab.inactiveForeground#a84765
  • terminal.ansiBlack#230910
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a84765
  • 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#230910
  • terminalCursor.foreground#e83e6c
  • textLink.activeForeground#6ba699
  • textLink.foreground#79bbac
  • titleBar.activeBackground#f1eaec
  • titleBar.activeForeground#230910
  • titleBar.border#ceaeb9
  • titleBar.inactiveBackground#f1eaec
  • titleBar.inactiveForeground#a84765

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a84765italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#c4345bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#c4345bbold
storage.type, storage.modifier#c4345bbold
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#c4345b
string.regexp#4b746b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5f4b8b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5c3317bold
variable.other.constant, variable.other.enummember#5c3317bold
constant.character.escape#b74765
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#4f6f79bold
meta.function-call entity.name.function, support.function#4f6f79
meta.method-call entity.name.function, entity.name.function.member#4f6f79
variable, variable.other, variable.other.readwrite#230910
variable.parameter#230910italic
variable.language, variable.language.this, variable.language.self, variable.language.super#c4345bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#230910
entity.name.class, entity.name.type.class, support.class#666f00bold italic
entity.other.inherited-class#666f00italic
entity.name.tag, punctuation.definition.tag#c4345bbold
entity.other.attribute-name#4f6f79italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b74765
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a84765
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#666f00bold
support.constant.property-value.css, support.constant.color.css#5c3317
keyword.other.unit.css#5f4b8b
support.type.property-name.json#955251
markup.heading, markup.heading entity.name, entity.name.section.markdown#c4345bbold
markup.bold#5c3317bold
markup.italic#955251italic
markup.inline.raw, markup.raw#4b746b
markup.underline.link#4f6f79
markup.quote#a84765italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050