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#2e353e
  • activityBar.border#00000000
  • activityBar.dropBackground#39424c
  • activityBar.foreground#dedeee
  • activityBarBadge.background#f9b05d
  • activityBarBadge.foreground#2e353e
  • badge.background#f9b05d
  • badge.foreground#2e353e
  • button.background#586471
  • button.foreground#dedeee
  • button.hoverBackground#367bea33
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugToolBar.background#2e353e
  • dropdown.background#272d33
  • dropdown.border#6f767b80
  • dropdown.foreground#dedeee
  • editor.background#2e353e
  • editor.foreground#dedeee
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#ffffff10
  • editorGroup.background#2e353e
  • editorGroup.border#00000000
  • editorGroup.dropBackground#39424c
  • editorGroupHeader.noTabsBackground#ffffff10
  • editorGroupHeader.tabsBackground#2e353e
  • editorGroupHeader.tabsBorder#6f767b50
  • editorHoverWidget.background#272d33
  • editorLineNumber.foreground#ffffff4d
  • editorMarkerNavigation.background#2e353e
  • editorWidget.background#272d33
  • errorForeground#dedeee
  • extensionButton.prominentBackground#586471
  • extensionButton.prominentForeground#dedeee
  • extensionButton.prominentHoverBackground#367bea33
  • focusBorder#00000000
  • foreground#dedeee
  • input.background#272d33
  • input.border#6f767b80
  • input.foreground#dedeee
  • input.placeholderForeground#ffffff4d
  • inputOption.activeBorder#f9b05d
  • inputValidation.errorBackground#ff5555
  • inputValidation.errorBorder#00000000
  • inputValidation.infoBackground#367bea
  • inputValidation.infoBorder#00000000
  • inputValidation.warningBackground#925792
  • inputValidation.warningBorder#00000000
  • list.activeSelectionBackground#ffffff20
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#39424c
  • list.focusBackground#367bea33
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#ffffff10
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#ffffff10
  • list.inactiveSelectionForeground#dedeee
  • notification.background#495563
  • notification.buttonBackground#586471
  • notification.buttonForeground#dedeee
  • notification.buttonHoverBackground#367bea33
  • notification.errorBackground#ff5555
  • notification.errorForeground#dedeee
  • notification.foreground#dedeee
  • notification.infoBackground#367bea
  • notification.infoForeground#dedeee
  • notification.warningBackground#925792
  • notification.warningForeground#dedeee
  • panel.background#2e353e
  • panel.border#6f767b50
  • panelTitle.activeBorder#f9b05d
  • panelTitle.activeForeground#dedeee
  • panelTitle.inactiveForeground#ffffff4d
  • peekView.border#6f767b50
  • peekViewEditor.background#2e353e
  • peekViewResult.background#2e353e
  • peekViewTitle.background#2e353e
  • pickerGroup.border#6f767b50
  • pickerGroup.foreground#dedeee
  • progressBar.background#f9b05d
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#367bea33
  • scrollbarSlider.background#ffffff10
  • scrollbarSlider.hoverBackground#367bea33
  • selection.background:#ffffff20
  • sideBar.background#2e353e
  • sideBar.border#00000000
  • sideBar.foreground#dedeee
  • sideBarSectionHeader.background#2e353e
  • sideBarSectionHeader.foreground#ffffff4d
  • sideBarTitle.foreground#ffffff4d
  • statusBar.background#2e353e
  • statusBar.border#2e353e
  • statusBar.debuggingBackground#925792
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff4d
  • statusBar.noFolderBackground#2e353e
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#dedeee
  • statusBarItem.activeBackground#ffffff10
  • statusBarItem.hoverBackground#367bea33
  • statusBarItem.prominentBackground#367bea
  • statusBarItem.prominentHoverBackground#367bea33
  • tab.activeBackground#2e353e
  • tab.activeBorder#f9b05d
  • tab.activeForeground#dedeee
  • tab.border#2e353e
  • tab.inactiveBackground#2e353e
  • tab.inactiveForeground#ffffff4d
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveForeground#dedeee
  • tab.unfocusedInactiveForeground#ffffff4d
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#367bea
  • terminal.ansiBrightBlack#030303
  • terminal.ansiBrightBlue#1b87e8
  • terminal.ansiBrightCyan#51c0e4
  • terminal.ansiBrightGreen#76c56d
  • terminal.ansiBrightMagenta#e871e8
  • terminal.ansiBrightRed#ff5653
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e8e651
  • terminal.ansiCyan#57b1c7
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#d8a2d8
  • terminal.ansiRed#e77777
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffba51
  • terminal.background#2e353e
  • terminal.foreground#f1f1f1
  • titleBar.activeBackground#2e353e
  • titleBar.activeForeground#dedeee
  • titleBar.inactiveBackground#2e353e
  • titleBar.inactiveForeground#dedeee
  • walkThrough.embeddedEditorBackground#ffffff05
  • welcomePage.buttonBackground#ffffff10
  • welcomePage.buttonHoverBackground#367bea33
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#dedeee
string#99c794
constant.language.boolean#57b1c7
constant.numeric#ffba51
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#dedeee
keyword, modifier, variable.language.this, support.type.object, constant.language#d8a2d8
entity.name.function, support.function#57b1c7
storage.type, storage.modifier#ffba51
support.module, support.node#e8e651
support.type#367bea
entity.name.type, entity.other.inherited-class#367bea
comment#ffffff4d
entity.name.type.class#99c794underline
variable.object.property#99c794
meta.definition.method entity.name.function#99c794
meta.function entity.name.function#e77777
template.expression.begin, template.expression.end#57b1c7
entity.name.tag.yaml#e77777
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#f7f7f7
constant.language.json#e77777
entity.other.attribute-name.class#ffba51
entity.other.attribute-name.id#e77777
source.css entity.name.tag#e77777
meta.tag, punctuation.definition.tag#57b1c7
entity.name.tag#e77777
entity.other.attribute-name#ffba51
markup.heading#ffba51
text.html.markdown meta.link.inline, meta.link.reference#e77777
text.html.markdown beginning.punctuation.definition.list#d8a2d8
markup.italic#e77777italic
markup.bold#e77777bold
markup.bold markup.italic, markup.italic markup.bold#e77777italic bold
keyword.other.definition.ini#e77777
entity.name.section.group-title.ini#57b1c7