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#070a0e
  • activityBar.foreground#39bae6
  • activityBar.inactiveForeground#565759
  • activityBarBadge.background#39bae6
  • activityBarBadge.foreground#ffffff
  • badge.background#39bae6
  • badge.foreground#ffffff
  • button.background#39bae6
  • button.foreground#ffffff
  • button.hoverBackground#51c2e9
  • dropdown.background#070a0e
  • editor.background#0a0e14
  • editor.findMatchBackground#39bae666
  • editor.findMatchHighlightBackground#39bae638
  • editor.foreground#b3b1ad
  • editor.lineHighlightBackground#191c22
  • editor.selectionBackground#39bae642
  • editorBracketMatch.border#39bae6
  • editorCursor.foreground#39bae6
  • editorGroupHeader.tabsBackground#090d12
  • editorIndentGuide.activeBackground1#b3b1ad38
  • editorIndentGuide.background1#b3b1ad14
  • editorLineNumber.activeForeground#39bae6
  • editorLineNumber.foreground#565759
  • editorSuggestWidget.selectedBackground#39bae642
  • editorWhitespace.foreground#b3b1ad1a
  • editorWidget.background#070a0e
  • focusBorder#39bae6
  • input.background#070a0e
  • input.foreground#b3b1ad
  • input.placeholderForeground#565759
  • list.activeSelectionBackground#39bae642
  • list.activeSelectionForeground#b3b1ad
  • list.hoverBackground#191c22
  • list.inactiveSelectionBackground#39bae624
  • panel.background#090c11
  • panelTitle.activeForeground#39bae6
  • scrollbarSlider.activeBackground#b3b1ad5c
  • scrollbarSlider.background#b3b1ad29
  • scrollbarSlider.hoverBackground#b3b1ad42
  • selection.background#39bae64d
  • sideBar.background#090c11
  • sideBar.foreground#b3b1ad
  • sideBarSectionHeader.background#0a0e14
  • sideBarTitle.foreground#39bae6
  • statusBar.background#070a0e
  • statusBar.foreground#b3b1ad
  • statusBar.noFolderBackground#070a0e
  • tab.activeBackground#0a0e14
  • tab.activeBorderTop#39bae6
  • tab.activeForeground#39bae6
  • tab.border#090d12
  • tab.inactiveBackground#090d12
  • tab.inactiveForeground#565759
  • terminal.background#0a0e14
  • terminal.foreground#b3b1ad
  • titleBar.activeBackground#070a0e
  • titleBar.activeForeground#b3b1ad
  • titleBar.inactiveBackground#070a0e
  • titleBar.inactiveForeground#565759

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4d5566italic
string, string.quoted, string.template#c2d94c
constant.numeric, constant.language, constant.character#e6b450
keyword, keyword.control, storage, storage.type, storage.modifier#ff8f40
entity.name.function, support.function, meta.function-call.generic#39bae6
variable, meta.definition.variable.name, variable.other.readwrite#b3b1ad
variable.parameter, parameter#959491
entity.name.type, support.type, support.class, entity.name.namespace#59c2ff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#95e6cb
keyword.operator#f29668
entity.name.tag, punctuation.definition.tag#ff8f40
entity.other.attribute-name#39bae6
constant.other.color, support.constant#e6b450
entity.name.type.class#59c2ffbold
markup.boldbold
markup.italicitalic
markup.heading#39bae6bold
invalid#0a0e14