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.background#1D252C
  • activityBar.border#333F4A
  • activityBar.dropBackground#333F4A
  • activityBar.foreground#fff
  • activityBarBadge.background#333F4A
  • activityBarBadge.foreground#000
  • badge.background#008B94
  • badge.foreground#000
  • button.background#1D252C
  • button.foreground#fff
  • button.hoverBackground#008B94
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#1D252C
  • debugExceptionWidget.border#aaa
  • debugToolBar.background#1D252C
  • descriptionForeground#aaa
  • diffEditor.insertedTextBackground#3ad90011
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4311
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#1D252C
  • dropdown.border#15232d
  • dropdown.foreground#fff
  • editor.background#1D252C
  • editor.findMatchBackground#b7c5d380
  • editor.findMatchHighlightBackground#b7c5d330
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#B7C5D3
  • editor.hoverHighlightBackground#333F4A
  • editor.inactiveSelectionBackground#1D252C
  • editor.lineHighlightBackground#28313a
  • editor.lineHighlightBorder#28313a
  • editor.rangeHighlightBackground#28313a
  • editor.selectionBackground#28323a
  • editor.selectionHighlightBackground#28313a
  • editor.wordHighlightBackground#FFFFFF0D
  • editor.wordHighlightStrongBackground#41505e
  • editorBracketMatch.background#3d454d
  • editorBracketMatch.border#4e6e99
  • editorCodeLens.foreground#aaa
  • editorCursor.foreground#5ec4ff
  • editorError.border#333F4A
  • editorError.foreground#e27e8d
  • editorGroup.background#1D252C
  • editorGroup.border#1D252C
  • editorGroup.dropBackground#333F4A
  • editorGroupHeader.noTabsBackground#1D252C
  • editorGroupHeader.tabsBackground#1D252C
  • editorGroupHeader.tabsBorder#15232d
  • editorGutter.addedBackground#8bd49c
  • editorGutter.background#1D252C
  • editorGutter.deletedBackground#e27e8d
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#15232d
  • editorHoverWidget.border#333F4A
  • editorIndentGuide.background#41505E
  • editorLineNumber.foreground#41505E
  • editorLink.activeForeground#aaa
  • editorMarkerNavigation.background#1D252C
  • editorMarkerNavigationError.background#d95468
  • editorMarkerNavigationWarning.background#d98e48
  • editorOverviewRuler.border#333F4A
  • editorOverviewRuler.commonContentForeground#ebbf8355
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#15232d
  • editorSuggestWidget.border#15232d
  • editorSuggestWidget.foreground#aaa
  • editorSuggestWidget.highlightForeground#ebbf83
  • editorSuggestWidget.selectedBackground#1D252C
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ebbf83
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#15232d
  • editorWidget.border#333F4A
  • errorForeground#e27e8d
  • extensionButton.prominentBackground#5ec4ff
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#008B94
  • focusBorder#333F4A
  • foreground#aaa
  • input.background#1D252C
  • input.border#333F4A
  • input.foreground#b7c5d3
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#333F4A
  • inputValidation.errorBackground#e27e8d
  • inputValidation.errorBorder#d95468
  • inputValidation.infoBackground#5ec4ff
  • inputValidation.infoBorder#539afc
  • inputValidation.warningBackground#ebbf83
  • inputValidation.warningBorder#d98e48
  • list.activeSelectionBackground#1D252C
  • list.activeSelectionForeground#aaa
  • list.dropBackground#333F4A
  • list.focusBackground#333F4A
  • list.focusForeground#aaa
  • list.highlightForeground#008b94
  • list.hoverBackground#1D252C
  • list.hoverForeground#aaa
  • list.inactiveSelectionBackground#333F4A
  • list.inactiveSelectionForeground#aaa
  • merge.border#ffffff00
  • merge.commonContentBackground#ffffff00
  • merge.commonHeaderBackground#ffffff00
  • merge.currentContentBackground#ffffff00
  • merge.currentHeaderBackground#ffffff00
  • merge.incomingContentBackground#ffffff00
  • merge.incomingHeaderBackground#ffffff00
  • notification.background#ebbf83
  • notification.buttonBackground#5ec4ff
  • notification.buttonForeground#fff
  • notification.buttonHoverBackground#008B94
  • notification.errorBackground#b62d65
  • notification.errorForeground#fff
  • notification.foreground#000
  • notification.infoBackground#5ec4ff
  • notification.infoForeground#fff
  • notification.warningBackground#008B94
  • notification.warningForeground#000
  • panel.background#171d23
  • panel.border#171d23
  • panelTitle.activeBorder#41505E
  • panelTitle.activeForeground#41505E
  • panelTitle.inactiveForeground#aaa
  • peekView.border#333F4A
  • peekViewEditor.background#1D252C
  • peekViewEditor.matchHighlightBackground#15232d
  • peekViewEditorGutter.background#333F4A
  • peekViewResult.background#15232d
  • peekViewResult.fileForeground#aaa
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#333F4A
  • peekViewResult.selectionBackground#333F4A
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#15232d
  • peekViewTitleDescription.foreground#aaa
  • peekViewTitleLabel.foreground#008b94
  • pickerGroup.border#333F4A
  • pickerGroup.foreground#aaa
  • progressBar.background#008b94
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#333F4A
  • scrollbarSlider.background#41505E
  • scrollbarSlider.hoverBackground#41505E
  • selection.background#027dff
  • sideBar.background#171d23
  • sideBar.border#1D252C
  • sideBar.foreground#aaa
  • sideBarSectionHeader.background#1D252C
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#171d23
  • statusBar.border#1D252C
  • statusBar.debuggingBackground#171d23
  • statusBar.debuggingForeground#333F4A
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#171d23
  • statusBar.noFolderForeground#aaa
  • statusBarItem.activeBackground#5ec4ff
  • statusBarItem.hoverBackground#333F4A
  • statusBarItem.prominentBackground#171d23
  • statusBarItem.prominentHoverBackground#333F4A
  • tab.activeBackground#1D252C
  • tab.activeBorder#1D252C
  • tab.activeForeground#fff
  • tab.border#171d23
  • tab.inactiveBackground#171d23
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveForeground#aaa
  • tab.unfocusedInactiveForeground#aaa
  • terminal.ansiBlack#41505E
  • terminal.ansiBlue#539afc
  • terminal.ansiBrightBlack#41505E
  • terminal.ansiBrightBlue#539afc
  • terminal.ansiBrightCyan#70e1e8
  • terminal.ansiBrightGreen#8bd49c
  • terminal.ansiBrightMagenta#b62d65
  • terminal.ansiBrightRed#d95468
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ebbf83
  • terminal.ansiCyan#70e1e8
  • terminal.ansiGreen#8bd49c
  • terminal.ansiMagenta#b62d65
  • terminal.ansiRed#d95468
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ebbf83
  • terminal.background#171d23
  • terminal.foreground#ffffff
  • terminalCursor.background#008B94
  • terminalCursor.foreground#008B94
  • textBlockQuote.background#171d23
  • textBlockQuote.border#171d23
  • textCodeBlock.background#171d23
  • textLink.activeForeground#718ca1
  • textLink.foreground#718ca1
  • textPreformat.foreground#1D252C
  • textSeparator.foreground#1D252C
  • titleBar.activeBackground#171d23
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1D252C
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#1D252C
  • welcomePage.buttonBackground#1D252C
  • welcomePage.buttonHoverBackground#333F4A
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#41505E
constant#e27e8d
entity#70e1e8
invalid#d95468
keyword#5ec4ff
storage.type.class.js#008B94
meta#718CA1
meta.brace#718CA1
punctuation#718CA1
punctuation.definition.parameters#718CA1
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#ebbf83
punctuation.definition.template-expression#68A1F0
storage#008B94
storage.type.function.arrow#008B94
string, punctuation.definition.string#68A1F0
string.template, punctuation.definition.string.template#68A1F0
support#718CA1
support.function#70e1e8
support.class.component.js#008b94
support.variable.property.dom#41505e
variable#718CA1
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css#68A1F0
punctuation.definition.constant.css#D95468
constant.other.color.rgb-value.hex.css#E27E8Dff
support.type.property-name.css#B7C5D3
keyword.other.important.scss#b62d65
entity.other.attribute-name.pseudo-element.css#5EC4FF
support.function.misc.scss#B7C5D3
entity.other.attribute-name.id.css, punctuation.definition.entity.css#68A1F0
entity.name.tag.css#68A1F0
source.css support, source.stylus support##B7C5D3
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#e27e8d
support.constant.property-value.css#718CA1
keyword.other.unit.px.css, keyword.other.unit.percentage.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css#d95468
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#68A1F0
source.css variable, source.stylus variable#ebbf83
entity.other#33CED8
text.html.basic#B7C5D3
meta.toc-list.id.html#68A1F0
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html#718CA1
entity.name.tag.block.any.html, meta.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, meta.tag.inline.any.html, entity.name.tag.html, entity.name.tag.js, meta.tag.js, meta.jsx.children.tsx, meta.tag.js, meta.jsx.children.tsx, meta.tag.js#008b94
punctuation.definition.string.begin, punctuation.definition.string.end#68A1F0
source.js storage.type.function#008B94
variable.language, entity.name.type.class.js#d98e48
entity.other.inherited-class.js, variable.language.this.js, variable.other.readwrite.alias.js, meta.import.js#B7C5D3
variable.parameter.function.language.special.self.python#fb94ff
storage.type.function.python#b62d65
source.json support#718CA1
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json#B7C5D3
source.php entity#9effff
variable.other.php, punctuation.definition.variable.php, variable.other.php#ebbf83