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

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#333333
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#CCCCCCbold
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, fenced_code.block.language.markdown#CCCCCCitalic bold
invalid, invalid.illegal, invalid.deprecated#FFFFFFbold
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, 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, 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, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue#FFFFFFitalic
markup, markup.other, meta, variable, variable.parameter, variable.other#FFFFFF
E-Ink-陰陽 by oblivious - VS Code Theme