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#F8FA9E
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#85F4ACbold
punctuation.definition.math, punctuation.definition.list.begin.markdownbold
punctuation.definition.group.regexp#E2CA89
constant#C6DB7B
constant.character.escape#85F4AC
constant.regexp#C6DB7B
constant.other.color#D9D9D9underline
entity.name.function#258870
entity.name.type#E2CA89italic
entity.name.type.class, entity.name.class#E2CA89
entity.name.tag#F8FA9E
entity.name.variable.parameter#848A75italic
entity.name.section.markdown#85F4AC
entity.other.inherited-class#E2CA89italic
entity.other.attribute-name#258870italic
keyword#85F4AC
keyword.type, keyword.other.type#F8FA9E
keyword.operator.other.powershell#D9D9D9
storage#F8FA9E
source.go storage.type, source.java storage.type#E2CA89italic
storage.modifier#F8FA9E
storage.modifier.import#D9D9D9
support.function#E2CA89
support.function.r#F8FA9E
support.type, support.class, support.other.escape.special.regexp, support.other.parenthesis.regexp#E2CA89italic
support.type.property-name
support.function.magic, support.variable, support.constant#C6DB7B
variable#D9D9D9
variable.parameter#848A75italic
variable.language, variable.parameter.function.language.special, variable.other.readwrite.instance.ruby#C6DB7Bitalic
variable.other.constant, variable.other.predefined#C6DB7B
string#DAEEC6
string.other.link.title, string.other.link.description#E2CA89
markup.inserted#008042
markup.changed#EEB948
markup.deleted#FF6250
markup.bold#848A75bold
markup.italic#848A75italic
markup.strikethrough#848A75
markup.heading#85F4AC
markup.quote#DAEEC6
markup.inline.raw#F8FA9E
markup.underline.link#258870
meta.separator.markdown#595959
fenced_code.block.language#F8FA9E
comment#595959italic
Menelik by Mansa Muntari - VS Code Theme