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