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#101813
  • activityBar.foreground#52b788
  • activityBar.inactiveForeground#637266
  • activityBarBadge.background#52b788
  • activityBarBadge.foreground#ffffff
  • badge.background#52b788
  • badge.foreground#ffffff
  • button.background#52b788
  • button.foreground#ffffff
  • button.hoverBackground#67c096
  • dropdown.background#101813
  • editor.background#16211a
  • editor.findMatchBackground#52b78866
  • editor.findMatchHighlightBackground#52b78838
  • editor.foreground#c2d4c4
  • editor.lineHighlightBackground#242e28
  • editor.selectionBackground#52b78842
  • editorBracketMatch.border#52b788
  • editorCursor.foreground#52b788
  • editorGroupHeader.tabsBackground#141e17
  • editorIndentGuide.activeBackground1#c2d4c438
  • editorIndentGuide.background1#c2d4c414
  • editorLineNumber.activeForeground#52b788
  • editorLineNumber.foreground#637266
  • editorSuggestWidget.selectedBackground#52b78842
  • editorWhitespace.foreground#c2d4c41a
  • editorWidget.background#101813
  • focusBorder#52b788
  • input.background#101813
  • input.foreground#c2d4c4
  • input.placeholderForeground#637266
  • list.activeSelectionBackground#52b78842
  • list.activeSelectionForeground#c2d4c4
  • list.hoverBackground#242e28
  • list.inactiveSelectionBackground#52b78824
  • panel.background#131c16
  • panelTitle.activeForeground#52b788
  • scrollbarSlider.activeBackground#c2d4c45c
  • scrollbarSlider.background#c2d4c429
  • scrollbarSlider.hoverBackground#c2d4c442
  • selection.background#52b7884d
  • sideBar.background#131c16
  • sideBar.foreground#c2d4c4
  • sideBarSectionHeader.background#16211a
  • sideBarTitle.foreground#52b788
  • statusBar.background#101813
  • statusBar.foreground#c2d4c4
  • statusBar.noFolderBackground#101813
  • tab.activeBackground#16211a
  • tab.activeBorderTop#52b788
  • tab.activeForeground#52b788
  • tab.border#141e17
  • tab.inactiveBackground#141e17
  • tab.inactiveForeground#637266
  • terminal.background#16211a
  • terminal.foreground#c2d4c4
  • titleBar.activeBackground#101813
  • titleBar.activeForeground#c2d4c4
  • titleBar.inactiveBackground#101813
  • titleBar.inactiveForeground#637266

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5b7062italic
string, string.quoted, string.template#95d5b2
constant.numeric, constant.language, constant.character#d9a05b
keyword, keyword.control, storage, storage.type, storage.modifier#74c69d
entity.name.function, support.function, meta.function-call.generic#52b788
variable, meta.definition.variable.name, variable.other.readwrite#c2d4c4
variable.parameter, parameter#a3b4a5
entity.name.type, support.type, support.class, entity.name.namespace#a7d9b0
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e08e6d
keyword.operator#40916c
entity.name.tag, punctuation.definition.tag#74c69d
entity.other.attribute-name#52b788
constant.other.color, support.constant#d9a05b
entity.name.type.class#a7d9b0bold
markup.boldbold
markup.italicitalic
markup.heading#52b788bold
invalid#16211a