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.activeBorder#eeeeee
  • activityBar.background#171719
  • activityBar.border#3a3a3f
  • activityBar.foreground#dddddd
  • activityBar.inactiveForeground#8c8c8d
  • activityBarBadge.background#6b94f8
  • activityBarBadge.foreground#eeeeee
  • badge.background#6b94f8
  • badge.foreground#eeeeee
  • banner.background#315375
  • banner.foreground#eeeeee
  • breadcrumb.activeSelectionForeground#eeeeee
  • breadcrumb.background#171719
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#dddddd
  • button.background#315375
  • button.foreground#eeeeee
  • button.hoverBackground#366998
  • button.secondaryBackground#242428
  • button.secondaryForeground#eeeeee
  • button.secondaryHoverBackground#2f2f37
  • checkbox.background#2f2f37
  • checkbox.border#3a3a3f
  • checkbox.foreground#eeeeee
  • commandCenter.activeBackground#242428
  • commandCenter.activeBorder#3a3a3f
  • commandCenter.activeForeground#eeeeee
  • commandCenter.background#171719
  • commandCenter.border#3a3a3f
  • commandCenter.foreground#dddddd
  • commandCenter.inactiveBorder#242428
  • commandCenter.inactiveForeground#8c8c8d
  • debugToolBar.background#2f2f37
  • descriptionForeground#eeeeee
  • diffEditor.border#3a3a3f
  • diffEditor.insertedLineBackground#323b31
  • diffEditor.insertedTextBackground#323b31
  • diffEditor.removedLineBackground#42292a
  • diffEditor.removedTextBackground#42292a
  • diffEditorOverview.insertedForeground#afdb8a
  • diffEditorOverview.removedForeground#f89696
  • disabledForeground#8c8c8d
  • dropdown.background#242428
  • dropdown.border#3a3a3f
  • dropdown.foreground#eeeeee
  • dropdown.listBackground#2f2f37
  • editor.background#171719
  • editor.findMatchBackground#75757877
  • editor.findMatchHighlightBackground#57575b44
  • editor.foreground#eeeeee
  • editor.hoverHighlightBackground#57575b44
  • editor.inactiveSelectionBackground#24242844
  • editor.lineHighlightBackground#1a1a1d
  • editor.rangeHighlightBackground#1d1d21
  • editor.selectionBackground#57575bcc
  • editor.selectionHighlightBackground#24242844
  • editor.wordHighlightBackground#75757844
  • editor.wordHighlightStrongBackground#8c8c8d44
  • editorBracketHighlight.foreground1#8cb1ff
  • editorBracketHighlight.foreground2#c5e991
  • editorBracketHighlight.foreground3#ffc456
  • editorBracketHighlight.foreground4#ee896d
  • editorBracketHighlight.foreground5#99dbc5
  • editorBracketHighlight.foreground6#71bcd3
  • editorBracketHighlight.unexpectedBracket.foreground#ef5957
  • editorBracketMatch.background#57575b44
  • editorBracketMatch.border#171719
  • editorCodeLens.foreground#242428
  • editorCursor.foreground#dddddd
  • editorError.foreground#f89696
  • editorGroup.border#3a3a3f
  • editorGroup.dropBackground#24242844
  • editorGroup.emptyBackground#171719
  • editorGroupHeader.noTabsBackground#242428
  • editorGroupHeader.tabsBackground#171719
  • editorGroupHeader.tabsBorder#242428
  • editorGutter.addedBackground#82a87a
  • editorGutter.background#171719
  • editorGutter.deletedBackground#c75e5e
  • editorGutter.foldingControlForeground#8c8c8d
  • editorGutter.modifiedBackground#5899ce
  • editorHint.foreground#8cb1ff
  • editorHoverWidget.background#2f2f37
  • editorHoverWidget.border#3a3a3f
  • editorHoverWidget.statusBarBackground#3a3a3f
  • editorIndentGuide.activeBackground1#242428
  • editorIndentGuide.background1#3a3a3f
  • editorInfo.foreground#72c9fa
  • editorInlayHint.background#242428
  • editorInlayHint.foreground#8c8c8d
  • editorLineNumber.activeForeground#dddddd
  • editorLineNumber.foreground#8c8c8d
  • editorLink.activeForeground#587ece
  • editorOverviewRuler.addedForeground#82a87a
  • editorOverviewRuler.border#171719
  • editorOverviewRuler.bracketMatchForeground#57575b44
  • editorOverviewRuler.commonContentForeground#0000ffcc
  • editorOverviewRuler.currentContentForeground#ffffffcc
  • editorOverviewRuler.deletedForeground#c75e5e
  • editorOverviewRuler.errorForeground#c75e5e
  • editorOverviewRuler.findMatchForeground#00ff00cc
  • editorOverviewRuler.incomingContentForeground#00ff00cc
  • editorOverviewRuler.infoForeground#5899ce
  • editorOverviewRuler.modifiedForeground#5899ce
  • editorOverviewRuler.rangeHighlightForeground#0000ffcc
  • editorOverviewRuler.selectionHighlightForeground#57575b44
  • editorOverviewRuler.warningForeground#cd7860
  • editorRuler.foreground#3a3a3f
  • editorStickyScroll.background#171719
  • editorStickyScroll.border#3a3a3f
  • editorStickyScrollHover.background#242428
  • editorSuggestWidget.background#2f2f37
  • editorSuggestWidget.border#3a3a3f
  • editorSuggestWidget.foreground#dddddd
  • editorSuggestWidget.highlightForeground#eeeeee
  • editorSuggestWidget.selectedBackground#57575bcc
  • editorUnnecessaryCode.border#242428
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#ff9572
  • editorWhitespace.foreground#5c5c62
  • editorWidget.background#2f2f37
  • editorWidget.border#3a3a3f
  • editorWidget.foreground#eeeeee
  • editorWidget.resizeBorder#242428
  • errorForeground#f89696
  • extensionButton.background#315375
  • extensionButton.foreground#eeeeee
  • extensionButton.hoverBackground#366998
  • focusBorder#242428
  • foreground#eeeeee
  • gitDecoration.addedResourceForeground#afdb8a
  • gitDecoration.conflictingResourceForeground#8cb1ff
  • gitDecoration.deletedResourceForeground#f89696
  • gitDecoration.ignoredResourceForeground#dddddd
  • gitDecoration.modifiedResourceForeground#72c9fa
  • gitDecoration.renamedResourceForeground#72c9fa
  • gitDecoration.stageDeletedResourceForeground#f89696
  • gitDecoration.stageModifiedResourceForeground#ff9572
  • gitDecoration.submoduleResourceForeground#72c9fa
  • gitDecoration.untrackedResourceForeground#99dbc5
  • icon.foreground#eeeeee
  • input.background#2f2f37
  • input.border#3a3a3f
  • input.foreground#eeeeee
  • input.placeholderForeground#dddddd
  • inputOption.activeBackground#315375
  • inputOption.activeBorder#4c68a6
  • inputValidation.errorBackground#f0706f
  • inputValidation.errorBorder#c75e5e
  • inputValidation.errorForeground#eeeeee
  • inputValidation.infoBackground#6b94f8
  • inputValidation.infoBorder#5899ce
  • inputValidation.infoForeground#eeeeee
  • inputValidation.warningBackground#ee896d
  • inputValidation.warningBorder#cd7860
  • inputValidation.warningForeground#242428
  • keybindingLabel.background#242428
  • keybindingLabel.border#3a3a3f
  • keybindingLabel.bottomBorder#242428
  • keybindingLabel.foreground#eeeeee
  • list.activeSelectionBackground#57575bcc
  • list.activeSelectionForeground#eeeeee
  • list.dropBackground#24242844
  • list.errorForeground#f89696
  • list.focusBackground#57575b44
  • list.focusForeground#eeeeee
  • list.highlightForeground#eeeeee
  • list.hoverBackground#24242844
  • list.hoverForeground#eeeeee
  • list.inactiveSelectionBackground#24242844
  • list.inactiveSelectionForeground#dddddd
  • list.invalidItemForeground#f89696
  • list.warningForeground#ff9572
  • listFilterWidget.background#2f2f37
  • listFilterWidget.noMatchesOutline#c75e5e
  • listFilterWidget.outline#3a3a3f
  • menu.background#2f2f37
  • menu.border#3a3a3f
  • menu.foreground#eeeeee
  • menu.selectionBackground#57575bcc
  • menu.selectionForeground#eeeeee
  • menu.separatorBackground#3a3a3f
  • menubar.selectionBackground#57575b44
  • menubar.selectionForeground#eeeeee
  • minimap.findMatchHighlight#75757877
  • minimap.selectionHighlight#242428cc
  • minimapSlider.activeBackground#75757877
  • minimapSlider.background#75757844
  • minimapSlider.hoverBackground#75757877
  • notificationCenter.border#3a3a3f
  • notificationCenterHeader.background#242428
  • notificationCenterHeader.foreground#eeeeee
  • notificationLink.foreground#6b94f8
  • notifications.background#2f2f37
  • notifications.border#3a3a3f
  • notifications.foreground#dddddd
  • notificationsErrorIcon.foreground#f89696
  • notificationsInfoIcon.foreground#72c9fa
  • notificationsWarningIcon.foreground#ff9572
  • notificationToast.border#3a3a3f
  • panel.background#171719
  • panel.border#3a3a3f
  • panelSection.border#3a3a3f
  • panelSectionHeader.background#242428
  • panelSectionHeader.foreground#eeeeee
  • panelTitle.activeBorder#a0a0a2
  • panelTitle.activeForeground#dddddd
  • panelTitle.inactiveForeground#8c8c8d
  • peekView.border#242428
  • peekViewEditor.background#242428
  • peekViewEditor.matchHighlightBackground#3a3a3f
  • peekViewResult.background#2f2f37
  • peekViewResult.fileForeground#6b94f8
  • peekViewResult.lineForeground#eeeeee
  • peekViewResult.matchHighlightBackground#57575b44
  • peekViewResult.selectionBackground#75757877
  • peekViewTitle.background#3a3a3f
  • peekViewTitleDescription.foreground#eeeeee
  • peekViewTitleLabel.foreground#eeeeee
  • pickerGroup.border#3a3a3f
  • pickerGroup.foreground#dddddd
  • progressBar.background#6b94f8
  • quickInput.background#242428
  • quickInput.foreground#dddddd
  • scrollbar.background#171719
  • scrollbar.shadow#17171944
  • scrollbarSlider.activeBackground#75757877
  • scrollbarSlider.background#75757844
  • scrollbarSlider.hoverBackground#75757877
  • selection.background#57575bcc
  • settings.dropdownBackground#171719
  • settings.dropdownForeground#eeeeee
  • settings.headerForeground#6b94f8
  • settings.modifiedItemIndicator#5899ce
  • settings.textInputBackground#171719
  • settings.textInputForeground#eeeeee
  • sideBar.background#242428
  • sideBar.border#3a3a3f
  • sideBar.dropBackground#57575bcc
  • sideBar.foreground#dddddd
  • sideBarSectionHeader.background#24242844
  • sideBarSectionHeader.border#3a3a3f
  • sideBarSectionHeader.foreground#dddddd
  • sideBarTitle.background#242428
  • sideBarTitle.foreground#eeeeee
  • statusBar.background#242428
  • statusBar.border#242428
  • statusBar.debuggingBackground#bb63f5
  • statusBar.debuggingBorder#bb63f5
  • statusBar.debuggingForeground#eeeeee
  • statusBar.foreground#dddddd
  • statusBar.noFolderBackground#242428
  • statusBar.noFolderBorder#242428
  • statusBar.noFolderForeground#eeeeee
  • statusBarItem.activeBackground#242428cc
  • statusBarItem.hoverBackground#24242844
  • statusBarItem.prominentBackground#6b94f8
  • statusBarItem.prominentForeground#eeeeee
  • statusBarItem.remoteBackground#315375
  • statusBarItem.remoteForeground#eeeeee
  • tab.activeBackground#171719
  • tab.activeBorderTop#8cb1ff
  • tab.activeForeground#dddddd
  • tab.border#171719
  • tab.hoverBackground#24242844
  • tab.inactiveBackground#171719
  • tab.inactiveForeground#8c8c8d
  • tab.lastPinnedBorder#3a3a3f
  • tab.unfocusedActiveForeground#dddddd
  • tab.unfocusedHoverBorder#3a3a3f
  • tab.unfocusedInactiveForeground#8c8c8d
  • terminal.ansiBlack#010101
  • terminal.ansiBlue#6b94f8
  • terminal.ansiBrightBlack#616164
  • terminal.ansiBrightBlue#517bea
  • terminal.ansiBrightCyan#57aaf1
  • terminal.ansiBrightGreen#6db46f
  • terminal.ansiBrightMagenta#a447e2
  • terminal.ansiBrightRed#e94343
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#ffc456
  • terminal.ansiCyan#449de9
  • terminal.ansiGreen#9ecc8f
  • terminal.ansiMagenta#bb63f5
  • terminal.ansiRed#c97565
  • terminal.ansiWhite#cecece
  • terminal.ansiYellow#e1a737
  • terminal.background#171719
  • terminal.border#3a3a3f
  • terminal.foreground#eeeeee
  • terminal.selectionBackground#57575bcc
  • terminalCursor.background#5c5c62
  • terminalCursor.foreground#5c5c62
  • textBlockQuote.background#171719
  • textBlockQuote.border#a0a0a2
  • textCodeBlock.background#171719
  • textLink.activeForeground#6b94f8
  • textLink.foreground#587ece
  • textPreformat.foreground#72c9fa
  • titleBar.activeBackground#171719
  • titleBar.activeForeground#eeeeee
  • titleBar.border#171719
  • titleBar.inactiveBackground#171719
  • titleBar.inactiveForeground#8c8c8d
  • toolbar.activeBackground#57575bcc
  • toolbar.hoverBackground#57575b44
  • tree.inactiveIndentGuidesStroke#242428
  • tree.indentGuidesStroke#3a3a3f
  • tree.tableColumnsBorder#3a3a3f
  • walkThrough.embeddedEditorBackground#2f2f37
  • welcomePage.background#242428
  • welcomePage.tileBackground#242428
  • welcomePage.tileHoverBackground#57575b44
  • widget.border#3a3a3f
  • widget.shadow#17171955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8c8c8d—
comment.block.documentation#dddddd—
comment.line#8c8c8d—
comment.single#8c8c8d—
constant.language.boolean.false#dce2ad—
constant.language.boolean.true#ff9572—
constant.language.dart#ff9572—
constant.language.import-export-all#6b94f8—
constant.language.null#dddddd—
constant.language.symbol#ff9572—
constant.numeric#ff9572—
entity.name.function#8cb1ff—
entity.name.tag#dce2ad—
entity.name.tag.reference#ce86fd—
entity.name.tag.yaml#71bcd3—
entity.name.type.module#71bcd3—
entity.other.attribute-name#6b94f8—
entity.other.attribute-name.class#dddddd—
entity.other.attribute-name.id#8cb1ff—
keyword#71bcd3—
keyword.control#68b8f7—
keyword.control.flow#68b8f7—
keyword.control.from#68b8f7—
keyword.control.import#68b8f7—
keyword.operator#eeeeee—
keyword.operator.logical#eeeeee—
keyword.other.unit#ee896d—
markup.fenced_code#eeeeee—
markup.heading#eeeeee—
markup.quote#dddddd—
markup.underline.link#8cb1ff—
meta.brace.round#dddddd—
meta.brace.square#dddddd—
meta.class#8cb1ff—
meta.jsx.children#dddddd—
meta.object#99dbc5—
meta.property-name.css#dddddd—
meta.property-value.css#eeeeee—
meta.selector#71bcd3—
meta.tag.attributes#68b8f7—
punctuation.accessor#8c8c8d—
punctuation.definition.array#8c8c8d—
punctuation.definition.block#8c8c8d—
punctuation.definition.dictionary#8c8c8d—
punctuation.definition.heading#ffc456—
punctuation.definition.link#8c8c8d—
punctuation.definition.list#8c8c8d—
punctuation.definition.parameters#8c8c8d—
punctuation.definition.string#8c8c8d—
punctuation.definition.tag#8c8c8d—
punctuation.definition.template-expression#ce86fd—
punctuation.definition.typeparameters#8c8c8d—
punctuation.section#dddddd—
punctuation.separator#8c8c8d—
punctuation.terminator#8c8c8d—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ce86fd—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cad399—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#71bcd3—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#99dbc5—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ee896d—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffc456—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c5e991—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8cb1ff—
source.json meta.structure.dictionary.json support.type.property-name.json#eeeeee—
storage#72c9fa—
string#dddddd—
string.other.link.title.markdown#dddddd—
support.class#ffc456—
support.class.component#ffc456—
support.constant.color#ee896d—
support.constant.font-name#ee896d—
support.constant.property-value#ee896d—
support.function#8cb1ff—
support.type.property-name#ffc456—
support.type.property-name.css#eeeeee—
support.type.vendored#faedc7—
variable#faedc7—
variable.language.super#71bcd3—
variable.language.this#99dbc5—
variable.other#dce2ad—
variable.other.constant#dce2ad—
variable.other.readwrite.alias#dce2ad—
Little League by Matthew Ström - VS Code Theme