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

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#C1AAB5
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#FF99C2bold
constant.language#FF99C2italic 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#40005Abold
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#40005Aitalic
markup, markup.other, meta, variable, variable.parameter, variable.other, support.type.property-name.json, entity.name.tag.yaml#40005A