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#717E56
  • 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#F8FA9E
log.error#FF6250
comment#595959italic
punctuation.separator.scope-resolution, punctuation.separator.pointer-access, punctuation.separator.key-value, punctuation.section.embedded, punctuation.definition.block.sequence.item#85F4ACbold
constant#C8DE78
constant.character.escape#85F4AC
constant.regexp#C6DB7B
constant.other.color#D9D9D9underline
constant.other.symbol.hashkey#D9D9D9
entity.name.function#258870
entity.name.type#E0C680italic
entity.name.type.class, entity.name.class#E0C680
entity.other.inherited-class#E0C680italic
entity.name.tag#F8FA9E
entity.name.scope-resolutionbold
entity.name.variable.parameter#717E56italic
entity.other.attribute-name#258870italic
keyword#85F4AC
keyword.type, keyword.other.type#F8FA9E
keyword.other#85F4AC
markup.inserted#008042
markup.changed#EEB948
markup.deleted#FF6250
markup.bold#717E56bold
markup.italic#717E56italic
markup.heading, entity.name.section.markdown#85F4AC
markup.quote#DAEEC6
punctuation.definition.markdown, fenced_code.block.language#F8FA9E
punctuation.definition.list.begin.markdown#C6DB7B
markup.inline.raw#F8FA9E
markup.underline.link#258870
string.other.link.title, string.other.link.description#E0C680
meta.separator.markdown#595959
storage#F8FA9E
storage.type#F8FA9E
storage.modifier#F8FA9E
storage.modifier.import#D9D9D9
string#DAEEC6
string.regexp#717E56
support.function#E0C680
support.class#E0C680italic
support.type#F8FA9Eitalic
support.type.property-name
support.constant#C6DB7B
support.function.magic, support.variable#C6DB7B
variable#D9D9D9
variable.function#258870
variable.parameter#717E56italic
variable.language, variable.parameter.function.language.special, variable.other.readwrite.instance.ruby#C6DB7Bitalic
variable.other.constant, variable.other.predefined#C6DB7B