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

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, invalid, invalid.illegal, invalid.deprecated#DDDDDD
constant, constant.numeric, constant.character, constant.character.escape, 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#B4B4B3bold
constant.language#B4B4B3italic bold
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, entity.name.tag.html, entity.other.attribute-name.html, fenced_code.block.language.markdown, support.type.property-name.css, support.type.property-name.media.css, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue#000000bold
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, 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, markup.inline.raw.string.markdown, markup.bold.markdown, string.other.link.title.markdown, string.other.link.description.markdown, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.css, entity.name.tag.wildcard.css#000000italic
markup, markup.other, meta, variable, variable.parameter, variable.other, support.type.property-name.json, entity.name.tag.yaml#000000