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#030508
  • activityBar.border#0a1018
  • activityBar.foreground#5a9ce8
  • activityBar.inactiveForeground#507898
  • activityBarBadge.background#5a9ce8
  • activityBarBadge.foreground#030508
  • badge.background#5a9ce8
  • badge.foreground#030508
  • breadcrumb.activeSelectionForeground#5a9ce8
  • breadcrumb.focusForeground#b8c8d8
  • breadcrumb.foreground#6888a8
  • breadcrumbPicker.background#080c14
  • button.background#5a9ce8
  • button.foreground#030508
  • button.hoverBackground#60a0e0
  • button.secondaryBackground#101828
  • button.secondaryForeground#b8c8d8
  • descriptionForeground#6888a8
  • dropdown.background#080c14
  • dropdown.border#101828
  • dropdown.foreground#b8c8d8
  • editor.background#040610
  • editor.findMatchBackground#5a9ce830
  • editor.findMatchHighlightBackground#5a9ce818
  • editor.foreground#b8c8d8
  • editor.inactiveSelectionBackground#5a9ce815
  • editor.lineHighlightBackground#0c101808
  • editor.selectionBackground#5a9ce828
  • editor.wordHighlightBackground#5a9ce818
  • editorBracketMatch.background#5a9ce818
  • editorBracketMatch.border#5a9ce844
  • editorCursor.foreground#88c8ff
  • editorGroupHeader.tabsBackground#030508
  • editorGroupHeader.tabsBorder#0a1018
  • editorGutter.addedBackground#50a87866
  • editorGutter.deletedBackground#d8585866
  • editorGutter.modifiedBackground#5a9ce866
  • editorIndentGuide.activeBackground1#182030
  • editorIndentGuide.background1#0c1420
  • editorLineNumber.activeForeground#657a88
  • editorLineNumber.foreground#72828d
  • editorOverviewRuler.border#0a1018
  • editorWhitespace.foreground#101828
  • errorForeground#d85858
  • focusBorder#5a9ce844
  • foreground#b8c8d8
  • gitDecoration.addedResourceForeground#50a878
  • gitDecoration.conflictingResourceForeground#c8b850
  • gitDecoration.deletedResourceForeground#d85858
  • gitDecoration.ignoredResourceForeground#666d77
  • gitDecoration.modifiedResourceForeground#5a9ce8
  • gitDecoration.untrackedResourceForeground#50a8b8
  • input.background#080c14
  • input.border#101828
  • input.foreground#b8c8d8
  • input.placeholderForeground#576573
  • inputOption.activeBorder#5a9ce8
  • list.activeSelectionBackground#5a9ce822
  • list.activeSelectionForeground#d0dce8
  • list.focusBackground#5a9ce818
  • list.highlightForeground#88c8ff
  • list.hoverBackground#080c16
  • list.inactiveSelectionBackground#5a9ce812
  • minimap.findMatchHighlight#88c8ff44
  • minimap.selectionHighlight#5a9ce844
  • notifications.background#080c14
  • notifications.border#101828
  • notifications.foreground#b8c8d8
  • panel.background#040610
  • panel.border#101828
  • panelTitle.activeBorder#5a9ce8
  • panelTitle.activeForeground#b8c8d8
  • panelTitle.inactiveForeground#7898b0
  • peekView.border#5a9ce844
  • peekViewEditor.background#06080e
  • peekViewResult.background#06080e
  • peekViewTitle.background#080c14
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#5a9ce844
  • scrollbarSlider.background#5a9ce818
  • scrollbarSlider.hoverBackground#5a9ce830
  • selection.background#5a9ce833
  • sideBar.background#050810
  • sideBar.border#0a1018
  • sideBar.foreground#b8c8d8
  • sideBarSectionHeader.background#080c14
  • sideBarSectionHeader.foreground#7898b0
  • sideBarTitle.foreground#5a9ce8
  • statusBar.background#030508
  • statusBar.border#0a1018
  • statusBar.debuggingBackground#5a9ce8
  • statusBar.debuggingForeground#030508
  • statusBar.foreground#5a9ce8
  • statusBar.noFolderBackground#030508
  • statusBarItem.hoverBackground#5a9ce822
  • statusBarItem.remoteBackground#5a9ce8
  • statusBarItem.remoteForeground#030508
  • tab.activeBackground#080c16
  • tab.activeBorderTop#5a9ce8
  • tab.activeForeground#d0dce8
  • tab.border#0a1018
  • tab.hoverBackground#0a1018
  • tab.inactiveBackground#030508
  • tab.inactiveForeground#5878a0
  • terminal.ansiBlack#101828
  • terminal.ansiBlue#5a9ce8
  • terminal.ansiBrightBlack#384858
  • terminal.ansiBrightBlue#68a8e8
  • terminal.ansiBrightCyan#68c0d0
  • terminal.ansiBrightGreen#68c090
  • terminal.ansiBrightMagenta#a890d0
  • terminal.ansiBrightRed#f07070
  • terminal.ansiBrightWhite#d0dce8
  • terminal.ansiBrightYellow#e0d068
  • terminal.ansiCyan#50a8b8
  • terminal.ansiGreen#50a878
  • terminal.ansiMagenta#8878b8
  • terminal.ansiRed#d85858
  • terminal.ansiWhite#b8c8d8
  • terminal.ansiYellow#c8b850
  • terminal.background#030508
  • terminal.foreground#b8c8d8
  • terminalCursor.foreground#88c8ff
  • titleBar.activeBackground#030508
  • titleBar.activeForeground#5a9ce8
  • titleBar.inactiveBackground#030508
  • titleBar.inactiveForeground#5878a0
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#747d93italic
string, string.quoted#58c8b0—
constant.numeric#c8b850—
constant.language, constant.other#d85858—
keyword, storage.type, storage.modifier#5a9ce8—
keyword.control, keyword.operator.logical#70a8f0—
keyword.operator#88c8ff—
entity.name.function, support.function, meta.function-call#88c8ff—
entity.name.type, entity.name.class, support.class, support.type#c8b850—
entity.name.type.interface#50a8b8—
variable, variable.other#b8c8d8—
variable.parameter#90a8c0—
variable.other.property, variable.other.object.property#7098c0—
entity.name.tag#5a9ce8—
entity.other.attribute-name#50a8b8italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#70a8f0—
support.type.property-name.css#7098c0—
variable.scss, variable.css#90a8c0—
string.regexp#d85858—
constant.character.escape#50a8b8—
punctuation#737e8a—
support.type.property-name.json#7098c0—
markup.heading, entity.name.section.markdown#5a9ce8bold
markup.bold#d0dce8bold
markup.italic#90a8c0italic
markup.underline.link#50a8b8—
markup.inline.raw, markup.fenced_code#58c8b0—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#d85858—
variable.other.php#90a8c0—
entity.name.tag.yaml#7098c0—
variable.language.this, variable.language.self#d07898italic