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.activeBackground#00000000
  • activityBar.background#0D0D0D
  • activityBar.foreground#D9D9D9
  • activityBar.inactiveForeground#D9D9D959
  • activityBarBadge.background#D9D9D9
  • activityBarBadge.foreground#0D0D0D
  • badge.background#D9D9D9
  • badge.foreground#0D0D0D
  • breadcrumb.activeSelectionForeground#D9D9D9
  • breadcrumb.background#0D0D0D
  • breadcrumb.focusForeground#D9D9D9
  • breadcrumb.foreground#595959
  • button.background#737373
  • button.foreground#0D0D0D
  • button.hoverBackground#D9D9D9B3
  • button.secondaryBackground#333333
  • button.secondaryForeground#D9D9D9
  • button.secondaryHoverBackground#D9D9D940
  • checkbox.background#333333
  • checkbox.foreground#D9D9D9
  • debugExceptionWidget.background#141414
  • debugExceptionWidget.border#595959
  • debugToolBar.background#141414
  • debugToolBar.border#333333
  • diffEditor.border#595959
  • diffEditor.insertedLineBackground#0080421A
  • diffEditor.insertedTextBackground#0080424D
  • diffEditor.removedLineBackground#FF62501A
  • diffEditor.removedTextBackground#FF62504D
  • dropdown.background#141414
  • dropdown.border#333333
  • dropdown.foreground#D9D9D9
  • editor.background#0D0D0D
  • editor.findMatchBackground#EEB94840
  • editor.findMatchHighlightBackground#333333
  • editor.findRangeHighlightBackground#33333359
  • editor.foldBackground#00000080
  • editor.foreground#D9D9D9
  • editor.hoverHighlightBackground#33333380
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#33333380
  • editor.rangeHighlightBackground#33333359
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#333333
  • editor.selectionHighlightBackground#595959
  • editor.wordHighlightBackground#3333334D
  • editor.wordHighlightStrongBackground#00AEFF40
  • editorCodeLens.foreground#737373
  • editorError.foreground#FF6250
  • editorGroup.border#333333
  • editorGroup.emptyBackground#0D0D0D
  • editorGroupHeader.tabsBackground#141414
  • editorGutter.addedBackground#008042
  • editorGutter.background#0D0D0D
  • editorGutter.deletedBackground#FF6250
  • editorGutter.foldingControlForeground#D9D9D9
  • editorGutter.modifiedBackground#EEB948
  • editorHoverWidget.background#141414
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground#595959
  • editorIndentGuide.background#59595959
  • editorInfo.foreground#00AEFF
  • editorLineNumber.activeForeground#D9D9D9
  • editorLineNumber.foreground#595959
  • editorLink.activeForeground#00AEFF
  • editorMarkerNavigation.background#141414
  • editorMarkerNavigationError.background#FF6250
  • editorMarkerNavigationError.headerBackground#FF62500D
  • editorMarkerNavigationInfo.background#00AEFF
  • editorMarkerNavigationInfo.headerBackground#00AEFF0D
  • editorMarkerNavigationWarning.background#EEB948
  • editorMarkerNavigationWarning.headerBackground#EEB9480D
  • editorOverviewRuler.background#0D0D0D
  • editorOverviewRuler.border#333333
  • editorRuler.foreground#333333
  • editorSuggestWidget.background#141414
  • editorSuggestWidget.border#333333
  • editorSuggestWidget.foreground#737373
  • editorSuggestWidget.highlightForeground#D9D9D9
  • editorSuggestWidget.selectedBackground#333333
  • editorWarning.foreground#EEB948
  • editorWhitespace.foreground#595959
  • editorWidget.background#141414
  • editorWidget.foreground#D9D9D9
  • editorWidget.resizeBorder#737373
  • extensionButton.prominentBackground#00AEFF
  • extensionButton.prominentHoverBackground#00AEFF99
  • extensionIcon.starForeground#EEB948
  • extensionIcon.verifiedForeground#008042
  • focusBorder#595959
  • foreground#D9D9D9
  • gitDecoration.conflictingResourceForeground#EEB948
  • gitDecoration.deletedResourceForeground#FF6250
  • gitDecoration.ignoredResourceForeground#73737359
  • gitDecoration.modifiedResourceForeground#00AEFF
  • gitDecoration.untrackedResourceForeground#008042
  • input.background#141414
  • input.border#333333
  • input.foreground#D9D9D9
  • input.placeholderForeground#595959
  • inputOption.activeBackground#333333
  • inputOption.activeBorder#595959
  • inputOption.activeForeground#D9D9D9
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#D9D9D9
  • list.dropBackground#333333
  • list.errorForeground#FF6250
  • list.focusBackground#333333
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#33333340
  • list.hoverForeground#D9D9D9
  • list.inactiveSelectionBackground#33333340
  • list.inactiveSelectionForeground#D9D9D9
  • list.warningForeground#EEB948
  • listFilterWidget.background#333333
  • listFilterWidget.shadow#000000
  • notificationCenter.border#333333
  • notificationCenterHeader.background#33333380
  • notificationCenterHeader.foreground#D9D9D9
  • notifications.background#141414
  • notifications.border#333333
  • notifications.foreground#D9D9D9
  • notificationsErrorIcon.foreground#FF6250
  • notificationsInfoIcon.foreground#00AEFF
  • notificationsWarningIcon.foreground#EEB948
  • notificationToast.border#333333
  • panel.background#0D0D0D
  • panel.border#595959
  • panelTitle.activeBorder#D9D9D9
  • panelTitle.activeForeground#D9D9D9
  • panelTitle.inactiveForeground#595959
  • peekView.border#595959
  • peekViewEditor.background#0D0D0D
  • peekViewEditor.matchHighlightBackground#EEB94840
  • peekViewResult.background#141414
  • peekViewResult.fileForeground#737373
  • peekViewResult.lineForeground#737373
  • peekViewResult.matchHighlightBackground#EEB94840
  • peekViewResult.selectionBackground#333333
  • peekViewResult.selectionForeground#D9D9D9
  • peekViewTitle.background#141414
  • peekViewTitleDescription.foreground#737373
  • peekViewTitleLabel.foreground#D9D9D9
  • pickerGroup.border#333333
  • pickerGroup.foreground#595959
  • progressBar.background#737373
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#D9D9D940
  • scrollbarSlider.background#D9D9D91A
  • scrollbarSlider.hoverBackground#D9D9D926
  • selection.background#595959
  • settings.focusedRowBackground#141414
  • settings.headerForeground#D9D9D9
  • settings.modifiedItemIndicator#737373
  • sideBar.background#141414
  • sideBar.foreground#737373
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.foreground#D9D9D9
  • sideBarTitle.foreground#D9D9D9
  • statusBar.background#0D0D0D
  • statusBar.debuggingBackground#D295BF
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#D9D9D9
  • statusBar.noFolderBackground#0D0D0D
  • statusBar.noFolderForeground#D9D9D9
  • statusBarItem.activeBackground#333333
  • statusBarItem.hoverBackground#0D0D0D66
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.remoteBackground#595959
  • statusBarItem.remoteForeground#D9D9D9
  • tab.activeBackground#0D0D0D
  • tab.activeBorderTop#D9D9D9
  • tab.activeForeground#D9D9D9
  • tab.border#00000000
  • tab.hoverBackground#33333359
  • tab.hoverForeground#D9D9D9
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#595959
  • terminal.ansiBlack#0D0D0D
  • terminal.ansiBlue#00AEFF
  • terminal.ansiBrightBlack#737373
  • terminal.ansiBrightBlue#64E7E7
  • terminal.ansiBrightCyan#DD9AC2
  • terminal.ansiBrightGreen#85F4AC
  • terminal.ansiBrightMagenta#B3BDFF
  • terminal.ansiBrightRed#FF7E70
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F8FA9E
  • terminal.ansiCyan#DD9AC2
  • terminal.ansiGreen#258870
  • terminal.ansiMagenta#847495
  • terminal.ansiRed#FF6250
  • terminal.ansiWhite#D9D9D9
  • terminal.ansiYellow#848A75
  • terminal.background#0D0D0D
  • terminal.foreground#D9D9D9
  • textLink.foreground#00AEFF
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#D9D9D9
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#D9D9D959
  • walkThrough.embeddedEditorBackground#141414
  • walkthrough.stepTitle.foreground#D9D9D9
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#FF6250
invalid.deprecated#D9D9D9BFunderline
log.warning#F9FAAD
log.error#FF6250
punctuation.separator.scope-resolution, punctuation.separator.pointer-access, punctuation.separator.key-value, punctuation.section.embedded, punctuation.definition.block.sequence.item, punctuation.definition.entity, punctuation.definition.template-expression, punctuation.definition.interpolation, source.r punctuation.accessor#EDEDB2bold
punctuation.definition.math, punctuation.definition.list.begin.markdownbold
punctuation.definition.group.regexp#8E936D
constant#D2BA8C
constant.character.escape#EDEDB2
constant.regexp#D2BA8C
constant.other.color#D9D9D9underline
entity.name.function#668770
entity.name.type#8E936Ditalic
entity.name.type.class, entity.name.class#8E936D
entity.name.tag#EDEDB2
entity.name.variable.parameter#D9D9D9italic
entity.name.section.markdown#EDEDB2
entity.other.inherited-class#A09C73italic
entity.other.attribute-name#668770italic
keyword#EDEDB2
keyword.type, keyword.other.type#EDEDB2
keyword.operator.other.powershell#D9D9D9
storage#EDEDB2
source.go storage.type, source.java storage.type#8E936Ditalic
storage.modifier#EDEDB2
storage.modifier.import#D9D9D9
support.function#8E936D
support.function.r#8E936D
support.class, support.type, support.other.escape.special.regexp, support.other.parenthesis.regexp#8E936Ditalic
support.type.property-name
support.function.magic, support.variable, support.constant#D2BA8C
variable#D9D9D9
variable.parameter#D9D9D9italic
variable.language, variable.parameter.function.language.special, variable.other.readwrite.instance.ruby#D2BA8Citalic
variable.other.constant, variable.other.predefined#D2BA8C
string#C3EECA
string.other.link.title, string.other.link.description#D2BA8C
markup.inserted#008042
markup.changed#EEB948
markup.deleted#FF6250
markup.bold#668770bold
markup.italic#668770italic
markup.strikethrough#668770
markup.heading#EDEDB2
markup.quote#C3EECA
markup.inline.raw#8E936D
markup.underline.link#8E936D
meta.separator.markdown#595959
fenced_code.block.language#8E936D
comment#595959italic