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#0a0e14
  • activityBar.foreground#89b4fa
  • activityBar.inactiveForeground#6c7a99
  • activityBarBadge.background#89b4fa
  • activityBarBadge.foreground#0a0e14
  • badge.background#7aa2f7
  • badge.foreground#1a1b26
  • button.background#7aa2f7
  • button.foreground#1a1b26
  • button.hoverBackground#5a8cdb
  • debugToolBar.background#0a0e14
  • debugToolBar.border#3d4450
  • editor.background#0f1419
  • editor.findMatchBackground#3d59a1
  • editor.findMatchHighlightBackground#3d59a155
  • editor.foreground#e0e8ff
  • editor.inactiveSelectionBackground#292e42
  • editor.lineHighlightBackground#151a21
  • editor.selectionBackground#2e3c64
  • editor.wordHighlightBackground#2e3c6455
  • editor.wordHighlightStrongBackground#2e3c6499
  • editorBracketMatch.background#2e3c64
  • editorBracketMatch.border#7aa2f7
  • editorCursor.foreground#89b4fa
  • editorError.foreground#f7768e
  • editorGroupHeader.tabsBackground#0a0e14
  • editorHint.foreground#73daca
  • editorIndentGuide.activeBackground#3d4450
  • editorIndentGuide.background#252a33
  • editorInfo.foreground#7aa2f7
  • editorLineNumber.activeForeground#89b4fa
  • editorLineNumber.foreground#4a5475
  • editorSuggestWidget.background#0a0e14
  • editorSuggestWidget.border#3d4450
  • editorSuggestWidget.selectedBackground#2e3c64
  • editorWarning.foreground#e0af68
  • editorWhitespace.foreground#3d4450
  • editorWidget.background#0a0e14
  • editorWidget.border#3d4450
  • extensionButton.prominentBackground#7aa2f7
  • extensionButton.prominentForeground#1a1b26
  • extensionButton.prominentHoverBackground#5a8cdb
  • gitDecoration.conflictingResourceForeground#bb9af7
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#565f89
  • gitDecoration.modifiedResourceForeground#e0af68
  • gitDecoration.untrackedResourceForeground#73daca
  • input.background#0f1419
  • input.border#3d4450
  • input.foreground#c0caf5
  • inputOption.activeBackground#2e3c64
  • inputOption.activeForeground#c0caf5
  • list.activeSelectionBackground#3d4f7a
  • list.activeSelectionForeground#e0e8ff
  • list.hoverBackground#2e3c64
  • list.hoverForeground#e0e8ff
  • list.inactiveSelectionBackground#2e3c64
  • notificationCenter.border#3b4261
  • notifications.background#0a0e14
  • notifications.border#3d4450
  • notificationToast.border#3d4450
  • panel.background#16161e
  • panel.border#1a1b26
  • panelTitle.activeBorder#7aa2f7
  • panelTitle.activeForeground#c0caf5
  • panelTitle.inactiveForeground#565f89
  • peekViewEditor.background#16161e
  • peekViewResult.background#16161e
  • peekViewTitle.background#1a1b26
  • pickerGroup.border#3b4261
  • pickerGroup.foreground#7aa2f7
  • scrollbarSlider.activeBackground#565f89
  • scrollbarSlider.background#3b426180
  • scrollbarSlider.hoverBackground#3b4261
  • sideBar.background#0a0e14
  • sideBar.foreground#c0caf5
  • sideBarSectionHeader.background#0f1419
  • sideBarSectionHeader.foreground#89b4fa
  • sideBarTitle.foreground#e0e8ff
  • statusBar.background#0a0e14
  • statusBar.debuggingBackground#ff6b8a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c0caf5
  • statusBar.noFolderBackground#0a0e14
  • tab.activeBackground#0f1419
  • tab.activeForeground#e0e8ff
  • tab.border#0a0e14
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#6c7a99
  • terminal.ansiBlack#414868
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#565f89
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#9ece6a
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#c0caf5
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#9ece6a
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#c0caf5
  • terminal.ansiYellow#e0af68
  • terminal.background#1a1b26
  • terminal.foreground#e0e8ff
  • titleBar.activeBackground#0a0e14
  • titleBar.activeForeground#e0e8ff
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#6c7a99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c7a99italic
keyword, storage.type, storage.modifier#cba6f7bold
keyword.control, keyword.operator#cba6f7bold
string, string.quoted#a6e3a1
constant.numeric, constant.language#fab387
constant.character.escape#f9e2af
entity.name.function, support.function#89b4fabold
entity.name.class, entity.name.type, support.class#f9e2afbold
variable, variable.other#e0e8ff
variable.parameter#f5c2e7
entity.name.tag#f38ba8bold
entity.other.attribute-name#cba6f7
support.type.property-name#89dceb
markup.heading#89b4fabold
markup.bold#f9e2afbold
markup.italic#cba6f7italic
markup.underlineunderline
markup.inline.raw#a6e3a1
punctuation.definition.tag#7f849c
meta.function-call#89b4fa
invalid#f38ba8bold