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#08131f
  • activityBar.foreground#3aa6ff
  • activityBar.inactiveForeground#516575
  • activityBarBadge.background#3aa6ff
  • activityBarBadge.foreground#ffffff
  • badge.background#3aa6ff
  • badge.foreground#ffffff
  • button.background#3aa6ff
  • button.foreground#ffffff
  • button.hoverBackground#52b1ff
  • dropdown.background#08131f
  • editor.background#0b1a2b
  • editor.findMatchBackground#3aa6ff66
  • editor.findMatchHighlightBackground#3aa6ff38
  • editor.foreground#a7c0d0
  • editor.lineHighlightBackground#1a2838
  • editor.selectionBackground#3aa6ff42
  • editorBracketMatch.border#3aa6ff
  • editorCursor.foreground#3aa6ff
  • editorGroupHeader.tabsBackground#0a1727
  • editorIndentGuide.activeBackground1#a7c0d038
  • editorIndentGuide.background1#a7c0d014
  • editorLineNumber.activeForeground#3aa6ff
  • editorLineNumber.foreground#516575
  • editorSuggestWidget.selectedBackground#3aa6ff42
  • editorWhitespace.foreground#a7c0d01a
  • editorWidget.background#08131f
  • focusBorder#3aa6ff
  • input.background#08131f
  • input.foreground#a7c0d0
  • input.placeholderForeground#516575
  • list.activeSelectionBackground#3aa6ff42
  • list.activeSelectionForeground#a7c0d0
  • list.hoverBackground#1a2838
  • list.inactiveSelectionBackground#3aa6ff24
  • panel.background#091625
  • panelTitle.activeForeground#3aa6ff
  • scrollbarSlider.activeBackground#a7c0d05c
  • scrollbarSlider.background#a7c0d029
  • scrollbarSlider.hoverBackground#a7c0d042
  • selection.background#3aa6ff4d
  • sideBar.background#091625
  • sideBar.foreground#a7c0d0
  • sideBarSectionHeader.background#0b1a2b
  • sideBarTitle.foreground#3aa6ff
  • statusBar.background#08131f
  • statusBar.foreground#a7c0d0
  • statusBar.noFolderBackground#08131f
  • tab.activeBackground#0b1a2b
  • tab.activeBorderTop#3aa6ff
  • tab.activeForeground#3aa6ff
  • tab.border#0a1727
  • tab.inactiveBackground#0a1727
  • tab.inactiveForeground#516575
  • terminal.background#0b1a2b
  • terminal.foreground#a7c0d0
  • titleBar.activeBackground#08131f
  • titleBar.activeForeground#a7c0d0
  • titleBar.inactiveBackground#08131f
  • titleBar.inactiveForeground#516575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#41576bitalic
string, string.quoted, string.template#5fd3a2
constant.numeric, constant.language, constant.character#f0a35e
keyword, keyword.control, storage, storage.type, storage.modifier#56b6ff
entity.name.function, support.function, meta.function-call.generic#74c0ff
variable, meta.definition.variable.name, variable.other.readwrite#a7c0d0
variable.parameter, parameter#8ba2b2
entity.name.type, support.type, support.class, entity.name.namespace#5ad1d1
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff7a93
keyword.operator#3aa6ff
entity.name.tag, punctuation.definition.tag#56b6ff
entity.other.attribute-name#74c0ff
constant.other.color, support.constant#f0a35e
entity.name.type.class#5ad1d1bold
markup.boldbold
markup.italicitalic
markup.heading#3aa6ffbold
invalid#0b1a2b