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#8a3865
  • activityBar.foreground#7ac3ff
  • activityBarBadge.background#7ac3ff
  • activityBarBadge.foreground#24273a
  • button.background#8a3868
  • button.border#8a3868
  • button.foreground#7ac3ff
  • debugToolBar.background#8a3868
  • dropdown.background#8a3868
  • dropdown.border#7ac3ff
  • dropdown.foreground#7ac3ff
  • dropdown.listBackground#8a3868
  • editor.background#24273a
  • editor.findMatchBackground#8a3868
  • editor.foreground#eb87b6
  • editor.lineHighlightBackground#8a3868a1
  • editor.selectionBackground#f825c34f
  • editor.wordHighlightTextBackground#8a3868
  • editorBracketHighlight.foreground1#d179ee
  • editorBracketHighlight.foreground2#7ac3ff
  • editorBracketHighlight.foreground3#ff38b3
  • editorBracketHighlight.foreground4#eb87b6
  • editorBracketHighlight.foreground5#4fc8b7
  • editorBracketMatch.background#ff005533
  • editorBracketMatch.border#ff38b3
  • editorCodeLens.foreground#eb87b688
  • editorCursor.background#161616
  • editorCursor.foreground#FDFD96
  • editorGroup.border#8a386800
  • editorGroup.dropBackground#8a3868
  • editorGroupHeader.tabsBackground#24273a
  • editorGutter.addedBackground#4fc8b7
  • editorGutter.background#24273a
  • editorGutter.deletedBackground#ff38b3
  • editorGutter.modifiedBackground#7ac3ff
  • editorIndentGuide.activeBackground1#8a3868
  • editorIndentGuide.background1#8a386800
  • editorLineNumber.activeForeground#7ac3ff
  • editorLineNumber.foreground#eb87b6
  • editorSuggestWidget.background#3f2131
  • editorSuggestWidget.focusHighlightForeground#eb87b6
  • editorSuggestWidget.highlightForeground#eb87b6
  • editorSuggestWidget.selectedBackground#8a3868
  • editorWidget.background#8a3868
  • errorLens.errorBackground#ff38b310
  • errorLens.errorForeground#ff38b3
  • errorLens.infoBackground#7ac3ff10
  • errorLens.infoForeground#7ac3ff
  • errorLens.warningBackground#fdfd9610
  • errorLens.warningForeground#FDFD96
  • focusBorder#8a3868
  • foreground#eb87b6
  • gitDecoration.conflictingResourceForeground#d179ee
  • gitDecoration.deletedResourceForeground#ff38b3
  • gitDecoration.ignoredResourceForeground#699dad
  • gitDecoration.modifiedResourceForeground#7ac3ff
  • gitDecoration.submoduleResourceForeground#eb87b6
  • gitDecoration.untrackedResourceForeground#4fc8b7
  • gitlens.lineHighlightBackgroundColor#ce7d8df3
  • gitlens.lineHighlightOverviewRulerColor#f9e2af
  • gitlens.trailingLineForegroundColor#eb87b688
  • icon.foreground#7ac3ff
  • inlineChat.shadow#7ac3ff
  • input.background#3429469e
  • inputOption.hoverBackground#24273a
  • inputValidation.errorBackground#53001ce5
  • inputValidation.errorBorder#ff38b3
  • inputValidation.infoBackground#002f6de8
  • inputValidation.infoBorder#7ac3ff
  • inputValidation.warningBorder#f9e2af
  • list.activeSelectionBackground#3f2131
  • list.activeSelectionForeground#7ac3ff
  • list.dropBackground#8a3868
  • list.errorForeground#ff38b3
  • list.filterMatchBackground#8a3868
  • list.focusBackground#8a3868
  • list.focusHighlightForeground#eb87b6
  • list.highlightForeground#eb87b6
  • list.hoverBackground#8a3868
  • list.inactiveSelectionBackground#3f2131
  • list.warningForeground#f9e2af
  • listFilterWidget.shadow#7ac3ff
  • merge.incomingContentBackground#003cff42
  • merge.incomingHeaderBackground#3545776b
  • panel.border#8a386800
  • panelSection.dropBackground#8a3868
  • panelTitle.activeBorder#7ac3ff
  • panelTitle.activeForeground#7ac3ff
  • peekView.border#8a3868
  • peekViewEditor.background#24273a
  • peekViewEditor.matchHighlightBackground#FDFD96
  • peekViewResult.background#8a3868
  • peekViewResult.fileForeground#7ac3ff
  • peekViewResult.lineForeground#7ac3ff
  • peekViewResult.selectionBackground#3f2131
  • peekViewResult.selectionForeground#7ac3ff
  • peekViewTitle.background#8a3868
  • peekViewTitleDescription.foreground#eb87b6
  • peekViewTitleLabel.foreground#7ac3ff
  • pickerGroup.foreground#7ac3ff
  • progressBar.background#eb87b6
  • quickInput.background#8a3868
  • quickInput.foreground#7ac3ff
  • quickInputList.focusBackground#24273a
  • scrollbar.shadow#7ac3ff
  • scrollbarSlider.activeBackground#7ac3ff
  • scrollbarSlider.background#24273a
  • scrollbarSlider.hoverBackground#8a3868
  • sideBar.background#24273a
  • sideBar.border#8a386800
  • sideBar.dropBackground#8a3868
  • sideBarSectionHeader.background#24273a
  • statusBar.background#8a3868
  • statusBar.debuggingBackground#24273a
  • statusBar.debuggingForeground#eb87b6
  • statusBar.foreground#7ac3ff
  • statusBar.noFolderBackground#8a3868
  • tab.activeBackground#8a3868
  • tab.activeForeground#eb87b6
  • tab.border#8a386800
  • tab.hoverBackground#8a3868
  • tab.inactiveBackground#24273a
  • tab.inactiveForeground#eb87b6
  • terminal.ansiBlack#8a3868
  • terminal.ansiBlue#7ac3ff
  • terminal.ansiBrightBlack#8a3868
  • terminal.ansiBrightBlue#7ac3ff
  • terminal.ansiBrightCyan#F2D5CF
  • terminal.ansiBrightGreen#4fc8b7
  • terminal.ansiBrightMagenta#d179ee
  • terminal.ansiBrightRed#fc50b4
  • terminal.ansiBrightWhite#699dad
  • terminal.ansiBrightYellow#f9e2af
  • terminal.ansiCyan#F2D5CF
  • terminal.ansiGreen#4fc8b7
  • terminal.ansiMagenta#d179ee
  • terminal.ansiRed#fc50b4
  • terminal.ansiWhite#699dad
  • terminal.ansiYellow#f9e2af
  • terminal.border#8a386800
  • terminal.dropBackground#8a3868
  • terminal.foreground#eb87b6
  • terminalCursor.foreground#FDFD96
  • textLink.activeForeground#7ac3ff
  • textLink.foreground#4fc8b7
  • titleBar.activeBackground#8a3868
  • titleBar.activeForeground#7ac3ff
  • titleBar.inactiveBackground#24273a
  • toolbar.hoverBackground#24273a
  • tree.indentGuidesStroke#8a386800

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.modifier#f9e2af
storage.type, support#d179ee
comment, punctuation.definition.comment#699daditalic
variable, source.python, entity.name.tag#fc50b4
invalid, invalid.illegal#ff0000
keyword.operator, punctuation.separator.clause-head-body#7ac3ff
keyword.control#f9e2af
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.other, meta.function.erlang, meta.directive.erlang, meta.expression.parenthesized, meta.directive.define.erlang#fc50b4
keyword.control.directive#f9e2af
meta.function-call, meta.method-call, entity.name.function.call, variable.function, support.function, keyword.other.special-method, meta.paragraph, entity.other#7ac3ff
entity.name.function.definition, meta.function.erlang, meta.function, meta.directive.export.erlang#d179ee
entity.name.function.macro.definition.erlang, entity.name.function.macro.erlang, entity.name.type.class.record.definition.erlang, entity.name.type.class.record.erlang, keyword.operator.record.erlang, keyword.operator.macro.erlang#eb87b6
punctuation.separator.record-field.erlang, variable.other.field.erlang, meta.attribute#7ac3ff
entity.name.type.class.module.definition.erlang, entity.name.type.class.module.erlang, entity.name.type.class.behaviour.definition.erlang, entity.name.type.class#eb87b6
variable.function#7ac3ff
keyword.other.special-method#7ac3ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape#4fc8b7underline
constant.other.symbol, constant.other.key#4fc8b7
string, punctuation.definition.string.end, punctuation.definition.string.begin, punctuation.definition.binary.begin, punctuation.definition.binary.end, meta.structure.binary.erlang#4fc8b7italic
token.info-token#6796e6
token.warn-token#977236
token.error-token#ff004c
token.debug-token#b267e6
string.quoted.double.json.comments, string.json.comments#fc50b4
constant.character.escape.json.comments#7ac3ff
support.type.property-name.json.comments#7ac3ff
support.type.property-name.json#7ac3ff
punctuation.support.type.property-name.begin.json#7ac3ff
punctuation.support.type.property-name.end.json#7ac3ff
punctuation.definition.string.begin.json#fc50b4
punctuation.definition.string.end.json#fc50b4
string.quoted.double.json#fc50b4
constant.numeric.json#fc50b4
constant.language.json#fc50b4