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#eeeeee
  • activityBar.foreground#39adb5
  • activityBar.inactiveForeground#cad3d8
  • activityBarBadge.background#39adb5
  • activityBarBadge.foreground#ffffff
  • badge.background#39adb5
  • badge.foreground#ffffff
  • button.background#39adb5
  • button.foreground#ffffff
  • button.hoverBackground#339ca3
  • dropdown.background#eeeeee
  • editor.background#fafafa
  • editor.findMatchBackground#39adb566
  • editor.findMatchHighlightBackground#39adb538
  • editor.foreground#90a4ae
  • editor.lineHighlightBackground#f1f1f1
  • editor.selectionBackground#39adb538
  • editorBracketMatch.border#39adb5
  • editorCursor.foreground#39adb5
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorIndentGuide.activeBackground1#90a4ae38
  • editorIndentGuide.background1#90a4ae14
  • editorLineNumber.activeForeground#39adb5
  • editorLineNumber.foreground#cad3d8
  • editorSuggestWidget.selectedBackground#39adb538
  • editorWhitespace.foreground#90a4ae1a
  • editorWidget.background#eeeeee
  • focusBorder#39adb5
  • input.background#eeeeee
  • input.foreground#90a4ae
  • input.placeholderForeground#cad3d8
  • list.activeSelectionBackground#39adb538
  • list.activeSelectionForeground#90a4ae
  • list.hoverBackground#f1f1f1
  • list.inactiveSelectionBackground#39adb524
  • panel.background#f4f4f4
  • panelTitle.activeForeground#39adb5
  • scrollbarSlider.activeBackground#90a4ae5c
  • scrollbarSlider.background#90a4ae29
  • scrollbarSlider.hoverBackground#90a4ae42
  • selection.background#39adb54d
  • sideBar.background#f4f4f4
  • sideBar.foreground#90a4ae
  • sideBarSectionHeader.background#fafafa
  • sideBarTitle.foreground#39adb5
  • statusBar.background#eeeeee
  • statusBar.foreground#90a4ae
  • statusBar.noFolderBackground#eeeeee
  • tab.activeBackground#fafafa
  • tab.activeBorderTop#39adb5
  • tab.activeForeground#39adb5
  • tab.border#f3f3f3
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#cad3d8
  • terminal.background#fafafa
  • terminal.foreground#90a4ae
  • titleBar.activeBackground#eeeeee
  • titleBar.activeForeground#90a4ae
  • titleBar.inactiveBackground#eeeeee
  • titleBar.inactiveForeground#cad3d8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b0bec5italic
string, string.quoted, string.template#91b859
constant.numeric, constant.language, constant.character#f76d47
keyword, keyword.control, storage, storage.type, storage.modifier#7c4dff
entity.name.function, support.function, meta.function-call.generic#6182b8
variable, meta.definition.variable.name, variable.other.readwrite#90a4ae
variable.parameter, parameter#a3b3bc
entity.name.type, support.type, support.class, entity.name.namespace#f6a434
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e53935
keyword.operator#39adb5
entity.name.tag, punctuation.definition.tag#7c4dff
entity.other.attribute-name#6182b8
constant.other.color, support.constant#f76d47
entity.name.type.class#f6a434bold
markup.boldbold
markup.italicitalic
markup.heading#39adb5bold
invalid#fafafa
ThemePaint by Toqir Ahmad - VS Code Theme