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#040407
  • activityBar.foreground#19f6ff
  • activityBar.inactiveForeground#6b7478
  • activityBarBadge.background#19f6ff
  • activityBarBadge.foreground#1a1a1a
  • badge.background#19f6ff
  • badge.foreground#1a1a1a
  • button.background#19f6ff
  • button.foreground#1a1a1a
  • button.hoverBackground#35f7ff
  • dropdown.background#040407
  • editor.background#05060a
  • editor.findMatchBackground#19f6ff66
  • editor.findMatchHighlightBackground#19f6ff38
  • editor.foreground#e8faff
  • editor.lineHighlightBackground#141519
  • editor.selectionBackground#19f6ff42
  • editorBracketMatch.border#19f6ff
  • editorCursor.foreground#19f6ff
  • editorGroupHeader.tabsBackground#050509
  • editorIndentGuide.activeBackground1#e8faff38
  • editorIndentGuide.background1#e8faff14
  • editorLineNumber.activeForeground#19f6ff
  • editorLineNumber.foreground#6b7478
  • editorSuggestWidget.selectedBackground#19f6ff42
  • editorWhitespace.foreground#e8faff1a
  • editorWidget.background#040407
  • focusBorder#19f6ff
  • input.background#040407
  • input.foreground#e8faff
  • input.placeholderForeground#6b7478
  • list.activeSelectionBackground#19f6ff42
  • list.activeSelectionForeground#e8faff
  • list.hoverBackground#141519
  • list.inactiveSelectionBackground#19f6ff24
  • panel.background#040509
  • panelTitle.activeForeground#19f6ff
  • scrollbarSlider.activeBackground#e8faff5c
  • scrollbarSlider.background#e8faff29
  • scrollbarSlider.hoverBackground#e8faff42
  • selection.background#19f6ff4d
  • sideBar.background#040509
  • sideBar.foreground#e8faff
  • sideBarSectionHeader.background#05060a
  • sideBarTitle.foreground#19f6ff
  • statusBar.background#040407
  • statusBar.foreground#e8faff
  • statusBar.noFolderBackground#040407
  • tab.activeBackground#05060a
  • tab.activeBorderTop#19f6ff
  • tab.activeForeground#19f6ff
  • tab.border#050509
  • tab.inactiveBackground#050509
  • tab.inactiveForeground#6b7478
  • terminal.background#05060a
  • terminal.foreground#e8faff
  • titleBar.activeBackground#040407
  • titleBar.activeForeground#e8faff
  • titleBar.inactiveBackground#040407
  • titleBar.inactiveForeground#6b7478

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4a5560italic
string, string.quoted, string.template#19f6ff
constant.numeric, constant.language, constant.character#f8f33c
keyword, keyword.control, storage, storage.type, storage.modifier#ff2079
entity.name.function, support.function, meta.function-call.generic#7afcff
variable, meta.definition.variable.name, variable.other.readwrite#e8faff
variable.parameter, parameter#bfced3
entity.name.type, support.type, support.class, entity.name.namespace#a17fff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff5470
keyword.operator#ff2079
entity.name.tag, punctuation.definition.tag#ff2079
entity.other.attribute-name#7afcff
constant.other.color, support.constant#f8f33c
entity.name.type.class#a17fffbold
markup.boldbold
markup.italicitalic
markup.heading#19f6ffbold
invalid#05060a