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#292929
  • activityBar.border#00000000
  • activityBar.dropBackground#39424c
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#ff983d
  • activityBarBadge.foreground#292929
  • badge.background#ff983d
  • badge.foreground#292929
  • button.background#586471
  • button.foreground#e0e0e0
  • button.hoverBackground#367bea33
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugToolBar.background#292929
  • dropdown.background#292929
  • dropdown.border#5d595c80
  • dropdown.foreground#e0e0e0
  • editor.background#292929
  • editor.foreground#e0e0e0
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#5d595c20
  • editorGroup.background#292929
  • editorGroup.border#00000000
  • editorGroup.dropBackground#39424c
  • editorGroupHeader.noTabsBackground#5d595c20
  • editorGroupHeader.tabsBackground#292929
  • editorGroupHeader.tabsBorder#5d595c40
  • editorHoverWidget.background#292929
  • editorLineNumber.foreground#e4e4e444
  • editorMarkerNavigation.background#292929
  • editorWidget.background#292929
  • errorForeground#e0e0e0
  • extensionButton.prominentBackground#586471
  • extensionButton.prominentForeground#e0e0e0
  • extensionButton.prominentHoverBackground#367bea33
  • focusBorder#00000000
  • foreground#e0e0e0
  • input.background#292929
  • input.border#5d595c80
  • input.foreground#e0e0e0
  • input.placeholderForeground#e4e4e444
  • inputOption.activeBorder#ff983d
  • inputValidation.errorBackground#ff5555
  • inputValidation.errorBorder#00000000
  • inputValidation.infoBackground#367bea
  • inputValidation.infoBorder#00000000
  • inputValidation.warningBackground#925792
  • inputValidation.warningBorder#00000000
  • list.activeSelectionBackground#5d595c30
  • list.activeSelectionForeground#fafafa
  • list.dropBackground#39424c
  • list.focusBackground#367bea33
  • list.focusForeground#fafafa
  • list.highlightForeground#fafafa
  • list.hoverBackground#5d595c20
  • list.hoverForeground#fafafa
  • list.inactiveSelectionBackground#5d595c20
  • list.inactiveSelectionForeground#e0e0e0
  • notification.background#495563
  • notification.buttonBackground#586471
  • notification.buttonForeground#e0e0e0
  • notification.buttonHoverBackground#367bea33
  • notification.errorBackground#ff5555
  • notification.errorForeground#e0e0e0
  • notification.foreground#e0e0e0
  • notification.infoBackground#367bea
  • notification.infoForeground#e0e0e0
  • notification.warningBackground#925792
  • notification.warningForeground#e0e0e0
  • panel.background#292929
  • panel.border#5d595c40
  • panelTitle.activeBorder#ff983d
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#e4e4e444
  • peekView.border#5d595c40
  • peekViewEditor.background#292929
  • peekViewResult.background#292929
  • peekViewTitle.background#292929
  • pickerGroup.border#5d595c40
  • pickerGroup.foreground#e0e0e0
  • progressBar.background#ff983d
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#367bea33
  • scrollbarSlider.background#5d595c20
  • scrollbarSlider.hoverBackground#367bea33
  • selection.background:#5d595c30
  • sideBar.background#292929
  • sideBar.border#00000000
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#292929
  • sideBarSectionHeader.foreground#e4e4e444
  • sideBarTitle.foreground#e4e4e444
  • statusBar.background#292929
  • statusBar.border#292929
  • statusBar.debuggingBackground#925792
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#fafafa
  • statusBar.foreground#e4e4e444
  • statusBar.noFolderBackground#292929
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#e0e0e0
  • statusBarItem.activeBackground#5d595c20
  • statusBarItem.hoverBackground#367bea33
  • statusBarItem.prominentBackground#367bea
  • statusBarItem.prominentHoverBackground#367bea33
  • tab.activeBackground#292929
  • tab.activeBorder#ff983d
  • tab.activeForeground#e0e0e0
  • tab.border#292929
  • tab.inactiveBackground#292929
  • tab.inactiveForeground#e4e4e444
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveForeground#e0e0e0
  • tab.unfocusedInactiveForeground#e4e4e444
  • 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#fafafa
  • terminal.ansiBrightYellow#e8e651
  • terminal.ansiCyan#57b1c7
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#d8a2d8
  • terminal.ansiRed#e77777
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffba51
  • terminal.background#292929
  • terminal.foreground#f1f1f1
  • titleBar.activeBackground#292929
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#292929
  • titleBar.inactiveForeground#e0e0e0
  • walkThrough.embeddedEditorBackground#ffffff05
  • welcomePage.buttonBackground#5d595c20
  • welcomePage.buttonHoverBackground#367bea33
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#e0e0e0
string#99c794
constant.language.boolean#57b1c7
constant.numeric#ffba51
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#e0e0e0
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#e4e4e444
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#e0e0e0
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
vscode-jane by Vitaly Domnikov - VS Code Theme