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#0078d4
  • activityBar.background#0a0a0a
  • activityBar.border#ffffff15
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#0078d4
  • badge.foreground#ffffff
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#0078d4e6
  • button.secondaryBackground#FFFFFF0F
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#040404
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#cccccc
  • dropdown.listBackground#313131
  • editor.background#101112
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#1085FF
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#C6CCD7
  • editor.foreground#A9B2C3
  • editor.lineHighlightBackground#A9B2C31A
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#073d5d
  • editor.selectionBackground#A9B2C333
  • editor.selectionHighlightBackground#A9B2C31A
  • editor.selectionHighlightBorder#C6CCD7
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#1085FF
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#1085FF
  • editorBracketHighlight.foreground1#A9B2C3
  • editorBracketHighlight.foreground2#61AFEF
  • editorBracketHighlight.foreground3#E5C07B
  • editorBracketHighlight.foreground4#E06C75
  • editorBracketHighlight.foreground5#98C379
  • editorBracketHighlight.foreground6#B57EDC
  • editorBracketHighlight.unexpectedBracket.foreground#D74E42
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#1085FF
  • editorCursor.foreground#A9B2C3
  • editorError.foreground#D74E42
  • editorGroup.border#ffffff17
  • editorGroup.emptyBackground#0a0a0a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#98C379
  • editorGutter.deletedBackground#E06C75
  • editorGutter.modifiedBackground#D19A66
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#1085FF
  • editorIndentGuide.activeBackground1#A9B2C333
  • editorIndentGuide.background1#0D1117
  • editorInfo.foreground#1085FF
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#5F6672
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLightBulb.foreground#E9D16C
  • editorLightBulbAutoFix.foreground#1085FF
  • editorLineNumber.activeForeground#C6CCD7
  • editorLineNumber.foreground#5F6672
  • editorOverviewRuler.addedForeground#98C379
  • editorOverviewRuler.border#0D1117
  • editorOverviewRuler.deletedForeground#E06C75
  • editorOverviewRuler.errorForeground#D74E42
  • editorOverviewRuler.infoForeground#1085FF
  • editorOverviewRuler.modifiedForeground#D19A66
  • editorOverviewRuler.warningForeground#E9D16C
  • editorRuler.foreground#0D1117
  • editorStickyScroll.background#0a0a0a
  • editorStickyScrollHover.background#21252B
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#1085FF
  • editorSuggestWidget.selectedBackground#A9B2C31A
  • editorWarning.foreground#E9D16C
  • editorWhitespace.foreground#A9B2C31A
  • editorWidget.background#0a0a0a
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#2a2a2a
  • input.border#ffffff1f
  • input.foreground#cccccc
  • input.placeholderForeground#ffffff79
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.hoverBackground#131313
  • list.inactiveSelectionBackground#2f2f2f
  • menu.background#0a0a0a
  • notificationCenterHeader.background#0a0a0a
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#0a0a0a
  • notifications.border#ffffff15
  • notifications.foreground#cccccc
  • panel.background#040404
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#0a0a0a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#0a0a0a
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • progressBar.background#0078d4
  • quickInput.background#0a0a0a
  • quickInput.foreground#cccccc
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#0a0a0a
  • sideBar.border#ffffff15
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#0a0a0a
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#0a0a0a
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#101112
  • tab.activeBorder#101112
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#131313
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveBorder#0a0a0a
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.background#040404
  • terminal.foreground#cccccc
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#40A6FF
  • textLink.foreground#40A6FF
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#cccccc
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#131313
  • titleBar.inactiveForeground#8b949e
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, source.diff#5F6672—
entity.name.function, support.function, meta.diff.range, punctuation.definition.range.diff#B57EDC—
keyword, punctuation.definition.keyword, variable.language, markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted, punctuation.definition.from-file.diff#E06C75—
constant, support.constant#56B6C2—
storage, support.class, entity.name.namespace, meta.diff.header#61AFEF—
markup.inline.raw.string, string, markup.inserted, punctuation.definition.inserted, meta.diff.header.to-file, punctuation.definition.to-file.diff#98C379—
entity.name.section, entity.name.tag, support.type#E5C07B—
support.type.property-name, support.variable, variable#C6CCD7—
entity.other, punctuation.definition.entity, support.other#D19A66—
meta.brace, punctuation#A9B2C3—
markup.bold, punctuation.definition.bold, entity.other.attribute-name.id—bold
comment, markup.italic, punctuation.definition.italic—italic
entity.name.type#7eceff—