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.

  • actionBar.toggledBackground#44475A
  • activityBar.activeBackground#141523
  • activityBar.activeBorder#6272A4
  • activityBar.activeFocusBorder#6272A4
  • activityBar.background#141523
  • activityBar.border#6272A4
  • activityBar.dropBorder#BD93F9
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#F8F8F2
  • activityBarBadge.background#141523
  • activityBarBadge.foreground#F8F8F2
  • activityBarTop.activeBackground#141523
  • activityBarTop.activeBorder#BD93F9
  • activityBarTop.background#141523
  • activityBarTop.dropBorder#BD93F9
  • activityBarTop.foreground#F8F8F2
  • activityBarTop.inactiveForeground#F8F8F2
  • badge.background#141523
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#F8F8F2
  • button.background#141523
  • button.border#6272A4
  • button.foreground#F8F8F2
  • button.hoverBackground#44475A
  • button.separator#F8F8F2
  • checkbox.background#141523
  • checkbox.border#6272A4
  • checkbox.foreground#F8F8F2
  • checkbox.selectBackground#6272A4
  • checkbox.selectBorder#BD93F9
  • contrastActiveBorder#BD93F9
  • contrastBorder#6272A4
  • debugTokenExpression.name#F8F8F2
  • debugToolBar.background#141523
  • debugToolBar.border#6272A4
  • debugView.stateLabelBackground#44475A
  • debugView.stateLabelForeground#F8F8F2
  • debugView.valueChangedHighlight#F8F8F2
  • descriptionForeground#F8F8F2
  • diffEditor.border#6272A4
  • diffEditor.insertedTextBackground#2AA19850
  • diffEditor.insertedTextBorder#2AA19850
  • diffEditor.removedTextBackground#FF555550
  • diffEditor.removedTextBorder#FF555550
  • diffEditor.unchangedRegionBackground#44475A
  • diffEditor.unchangedRegionForeground#F8F8F2
  • diffEditorGutter.insertedLineBackground#44475Ad0
  • diffEditorGutter.removedLineBackground#44475Ad0
  • disabledForeground#6272A4
  • dropdown.background#141523
  • dropdown.border#6272A4
  • dropdown.foreground#F8F8F2
  • dropdown.listBackground#141523
  • editor.background#141523
  • editor.findMatchBorder#BD93F9
  • editor.findRangeHighlightBackground#141523
  • editor.findRangeHighlightBorder#BD93F9
  • editor.focusedStackFrameHighlightBackground#44475A
  • editor.foldPlaceholderForeground#F8F8F2
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#44475A
  • editor.inlineValuesBackground#44475A
  • editor.inlineValuesForeground#F8F8F2
  • editor.lineHighlightBorder#BD93F9
  • editor.linkedEditingBackground#F8F8F200
  • editor.selectionBackground#44475A
  • editor.selectionForeground#F8F8F200
  • editor.snippetTabstopHighlightBackground#44475A
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.stackFrameHighlightBackground#44475A
  • editor.symbolHighlightBackground#44475A
  • editor.symbolHighlightBorder#BD93F9
  • editor.wordHighlightBorder#BD93F9
  • editor.wordHighlightStrongBorder#BD93F9
  • editor.wordHighlightTextBorder#BD93F9
  • editorBracketHighlight.foreground1#FF79C6
  • editorBracketHighlight.foreground2#FF9800
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#20E3B2
  • editorBracketHighlight.foreground5#F8F8F2
  • editorBracketHighlight.foreground6#EAC394
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorBracketMatch.background#141523
  • editorBracketMatch.border#BD93F9
  • editorCodeLens.foreground#BD93F9
  • editorCursor.background#141523
  • editorCursor.foreground#BD93F9
  • editorGroup.border#6272A4
  • editorGroup.dropBackground#44475A
  • editorGroup.dropIntoPromptBackground#141523
  • editorGroup.dropIntoPromptBorder#6272A4
  • editorGroup.dropIntoPromptForeground#F8F8F2
  • editorGroup.emptyBackground#141523
  • editorGroup.focusedEmptyBorder#6272A4
  • editorGroupHeader.border#6272A4
  • editorGroupHeader.noTabsBackground#141523
  • editorGroupHeader.tabsBackground#141523
  • editorGroupHeader.tabsBorder#6272A4
  • editorGutter.background#141523
  • editorGutter.modifiedBackground#6272A4
  • editorIndentGuide.activeBackground#6272A4
  • editorIndentGuide.background#141523
  • editorLightBulb.foreground#F8F8F2
  • editorLightBulbAutoFix.foreground#F8F8F2
  • editorLineNumber.activeForeground#BD93F9
  • editorLineNumber.dimmedForeground#6272A4
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#BD93F9
  • editorOverviewRuler.background#141523
  • editorOverviewRuler.border#6272A4
  • editorOverviewRuler.findMatchForeground#F8F8F2
  • editorPane.background#141523
  • editorRuler.foreground#F8F8F2
  • editorWhitespace.foreground#F8F8F2
  • errorForeground#FF5555
  • extensionButton.foreground#F8F8F2
  • extensionButton.hoverBackground#141523
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#141523
  • extensionButton.separator#F8F8F2
  • focusBorder#BD93F9
  • foreground#F8F8F2
  • icon.foreground#F8F8F2
  • input.background#141523
  • input.border#6272A4
  • input.foreground#F8F8F2
  • input.placeholderForeground#F8F8F2
  • inputOption.activeBackground#141523
  • inputOption.activeBorder#6272A4
  • inputOption.activeForeground#F8F8F2
  • inputOption.hoverBackground#141523
  • keybindingLabel.background#141523
  • keybindingLabel.border#6272A4
  • keybindingLabel.bottomBorder#6272A4
  • keybindingLabel.foreground#F8F8F2
  • keybindingTable.headerBackground#141523
  • keybindingTable.rowsBackground#141523
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.activeSelectionIconForeground#F8F8F2
  • list.deemphasizedForeground#F8F8F2
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.filterMatchBackground#44475A
  • list.filterMatchBorder#6272A4
  • list.focusAndSelectionOutline#BD93F9
  • list.focusBackground#141523
  • list.focusForeground#F8F8F2
  • list.focusHighlightForeground#F8F8F2
  • list.focusOutline#BD93F9
  • list.highlightForeground#F8F8F2
  • list.hoverBackground#44475A
  • list.hoverForeground#F8F8F2
  • list.inactiveFocusBackground#141523
  • list.inactiveFocusOutline#BD93F9
  • list.inactiveSelectionBackground#44475A
  • list.inactiveSelectionForeground#F8F8F2
  • list.inactiveSelectionIconForeground#F8F8F2
  • list.invalidItemForeground#FF5555
  • list.warningForeground#EAC394
  • listFilterWidget.background#141523
  • listFilterWidget.noMatchesOutline#BD93F9
  • listFilterWidget.outline#BD93F9
  • listFilterWidget.shadow#141523
  • notificationCenter.border#6272A4
  • notificationCenterHeader.background#141523
  • notificationCenterHeader.foreground#F8F8F2
  • notifications.background#141523
  • notifications.border#6272A4
  • notifications.foreground#F8F8F2
  • notificationToast.border#6272A4
  • panel.background#141523
  • panel.border#6272A4
  • panel.dropBorder#BD93F9
  • panelInput.border#6272A4
  • panelTitle.activeBorder#BD93F9
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#F8F8F2
  • profileBadge.background#141523
  • profileBadge.foreground#F8F8F2
  • progressBar.background#6272A4
  • sash.hoverBorder#6272A4
  • scrollbar.shadow#141523
  • scrollbarSlider.activeBackground#6272A4
  • scrollbarSlider.background#6272A499
  • scrollbarSlider.hoverBackground#6272A4CC
  • search.resultsInfoForeground#F8F8F2
  • selection.background#44475A
  • sideBar.background#141523
  • sideBar.border#6272A4
  • sideBar.dropBackground#44475A
  • sideBar.foreground#F8F8F2
  • sideBarSectionHeader.background#141523
  • sideBarSectionHeader.border#6272A4
  • sideBarSectionHeader.foreground#F8F8F2
  • sideBarTitle.foreground#F8F8F2
  • sideBySideEditor.horizontalBorder#6272A4
  • sideBySideEditor.verticalBorder#6272A4
  • statusBar.background#141523
  • statusBar.border#6272A4
  • statusBar.debuggingBackground#141523
  • statusBar.debuggingBorder#6272A4
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#141523
  • statusBar.noFolderBorder#6272A4
  • statusBar.noFolderForeground#F8F8F2
  • tab.activeBackground#141523
  • tab.activeBorder#6272A4
  • tab.activeBorderTop#6272A4
  • tab.activeForeground#F8F8F2
  • tab.activeModifiedBorder#6272A4
  • tab.border#6272A4
  • tab.hoverBackground#141523
  • tab.hoverBorder#6272A4
  • tab.hoverForeground#F8F8F2
  • tab.inactiveBackground#141523
  • tab.inactiveForeground#F8F8F2
  • tab.inactiveModifiedBorder#6272A4
  • tab.lastPinnedBorder#6272A4
  • tab.unfocusedActiveBackground#141523
  • tab.unfocusedActiveBorder#6272A4
  • tab.unfocusedActiveBorderTop#6272A4
  • tab.unfocusedActiveForeground#F8F8F2
  • tab.unfocusedActiveModifiedBorder#6272A4
  • tab.unfocusedHoverBackground#141523
  • tab.unfocusedHoverBorder#6272A4
  • tab.unfocusedHoverForeground#F8F8F2
  • tab.unfocusedInactiveBackground#141523
  • tab.unfocusedInactiveForeground#F8F8F2
  • tab.unfocusedInactiveModifiedBorder#6272A4
  • terminal.background#141523
  • terminal.border#6272A4
  • terminal.findMatchBackground#141523
  • terminal.findMatchBorder#BD93F9
  • terminal.findMatchHighlightBackground#141523
  • terminal.findMatchHighlightBorder#BD93F9
  • terminal.foreground#F8F8F2
  • terminal.tab.activeBorder#BD93F9
  • terminalCursor.background#141523
  • terminalCursor.foreground#BD93F9
  • textBlockQuote.background#141523
  • textBlockQuote.border#6272A4
  • textCodeBlock.background#141523
  • textLink.activeForeground#F8F8F2
  • textLink.foreground#BD93F9
  • textPreformat.background#44475A
  • textPreformat.foreground#F8F8F2
  • textSeparator.foreground#F8F8F2
  • toolbar.activeBackground#6272A4
  • toolbar.hoverBackground#141523
  • toolbar.hoverOutline#BD93F9
  • tree.inactiveIndentGuidesStroke#6272A4
  • tree.indentGuidesStroke#6272A4
  • tree.tableColumnsBorder#6272A4
  • tree.tableOddRowsBackground#141523
  • widget.border#6272A4
  • widget.shadow#141523
  • window.activeBorder#6272A4
  • window.inactiveBorder#6272A4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage, comment.line.character, comment.block, comment.block.documentation#2AA198
constant, constant.numeric, constant.character, constant.character.escape, constant.language, constant.other, markup.underline, markup.underline.link, markup.heading, markup.list, markup.list.numbered, markup.list.unnumbered, markup.quote, markup.raw, string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.unquoted, string.interpolated, string.regexp, string.other, text.html.derivative, entity.other.attribute-name.class.css#EAC394
entity, entity.name, entity.name.function, entity.name.type, entity.name.tag, entity.name.section, entity.other, entity.other.inherited-class, entity.other.attribute-name, markup.bold, markup.inline.raw.string.markdown, markup.bold.markdown, markup.italic.markdown, markup.strikethrough.markdown, string.other.link.title.markdown, string.other.link.description.markdown, fenced_code.block.language.markdown#8BE9FD
invalid, invalid.illegal, invalid.deprecated#FF5555
keyword, keyword.control, keyword.operator, keyword.other, markup.italic, storage, storage.type, storage.modifier, support, support.function, support.class, support.type, support.constant, support.variable, support.other, variable.language, entity.name.tag.html, punctuation.separator.key-value.html, support.type.property-name.json, entity.name.tag.yaml, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.bold.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.raw.markdown, punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.css, entity.name.tag.wildcard.css, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue, punctuation.separator.key-value.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.separator.key-value.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#FF79C6
markup, markup.other, meta, variable, variable.parameter, variable.other#F8F8F2
entity.other.attribute-name.html, support.type.property-name.css, support.type.property-name.media.css, support.type.builtin.ts, support.type.primitive.ts#20E3B2