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#f8f9fa
  • activityBar.foreground#c1121f
  • activityBar.inactiveForeground#6c757d
  • activityBarBadge.background#c1121f
  • activityBarBadge.foreground#ffffff
  • badge.background#c1121f
  • badge.foreground#ffffff
  • button.background#c1121f
  • button.foreground#ffffff
  • button.hoverBackground#a1111f
  • dropdown.background#ffffff
  • dropdown.border#dee2e6
  • editor.background#ffffff
  • editor.foreground#212529
  • editor.lineHighlightBackground#f8f9fa
  • editor.selectionBackground#c1121f40
  • editor.selectionHighlightBackground#c1121f20
  • editor.wordHighlightBackground#e9ecef
  • editor.wordHighlightStrongBackground#dee2e6
  • editorCursor.foreground#c1121f
  • editorGroup.border#dee2e6
  • editorGroupHeader.tabsBackground#f8f9fa
  • editorIndentGuide.activeBackground#c1121f
  • editorIndentGuide.background#e9ecef
  • editorLineNumber.activeForeground#c1121f
  • editorLineNumber.foreground#6c757d
  • editorWhitespace.foreground#e9ecef
  • input.background#ffffff
  • input.border#dee2e6
  • input.foreground#212529
  • input.placeholderForeground#6c757d
  • list.activeSelectionBackground#c1121f20
  • list.activeSelectionForeground#c1121f
  • list.hoverBackground#f8f9fa
  • list.inactiveSelectionBackground#e9ecef
  • panel.background#f8f9fa
  • panel.border#dee2e6
  • peekView.border#c1121f
  • peekViewEditor.background#ffffff
  • peekViewResult.background#f8f9fa
  • peekViewTitle.background#c1121f
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#c1121f50
  • scrollbarSlider.background#dee2e630
  • scrollbarSlider.hoverBackground#dee2e650
  • sideBar.background#f8f9fa
  • sideBar.border#dee2e6
  • sideBar.foreground#212529
  • sideBarSectionHeader.background#e9ecef
  • sideBarSectionHeader.foreground#212529
  • sideBarTitle.foreground#c1121f
  • statusBar.background#ffffff
  • statusBar.border#dee2e6
  • statusBar.debuggingBackground#c1121f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#212529
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#c1121f20
  • statusBarItem.hoverBackground#f8f9fa
  • tab.activeBackground#ffffff
  • tab.activeForeground#212529
  • tab.border#dee2e6
  • tab.inactiveBackground#f8f9fa
  • tab.inactiveForeground#6c757d
  • terminal.background#ffffff
  • terminal.foreground#212529
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#212529
  • titleBar.border#dee2e6
  • titleBar.inactiveBackground#f8f9fa
  • titleBar.inactiveForeground#6c757d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c757ditalic
string, string.quoted#198754
constant.numeric#fd7e14
constant.language#c1121f
constant.character, constant.other#e74c3c
variable#212529
keyword#c1121fbold
storage#495057bold
storage.type#0d6efdbold
entity.name.class#fd7e14bold
entity.name.function#0d6efdbold
variable.parameter#fd7e14
entity.name.tag#c1121f
entity.other.attribute-name#fd7e14
support.function#6f42c1
support.type, support.class#0d6efd
invalid#ffffff
invalid.deprecated#ffffff
meta.structure.dictionary.json string.quoted.double.json#198754
meta.structure.dictionary.key.json string.quoted.double.json#0d6efd
markup.bold#c1121fbold
markup.italic#fd7e14italic
markup.heading#c1121fbold
markup.underline.link#0d6efdunderline