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.activeBorder#e53935
  • activityBar.background#e0e0e0
  • activityBar.foreground#e53935
  • activityBarBadge.background#e53935
  • activityBarBadge.foreground#ffffff
  • badge.background#e53935
  • badge.foreground#ffffff
  • button.background#e53935
  • button.foreground#ffffff
  • button.hoverBackground#d32f2f
  • dropdown.background#ffffff
  • dropdown.border#bdbdbd
  • dropdown.foreground#212121
  • editor.background#f5f5f5
  • editor.findMatchBackground#ff8a80
  • editor.findMatchHighlightBackground#ffccbc
  • editor.foreground#212121
  • editor.lineHighlightBackground#ffebee
  • editor.lineHighlightBorder#e57373
  • editor.selectionBackground#ffccbc
  • editor.selectionHighlightBackground#ffe0b2
  • editorBracketMatch.background#ffccbc
  • editorBracketMatch.border#e53935
  • editorCursor.foreground#e53935
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorIndentGuide.activeBackground#e53935
  • editorIndentGuide.background#cfd8dc
  • editorLineNumber.activeForeground#e53935
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#bdbdbd
  • focusBorder#e53935
  • gitDecoration.conflictingResourceForeground#fdd835
  • gitDecoration.deletedResourceForeground#d32f2f
  • gitDecoration.modifiedResourceForeground#e53935
  • gitDecoration.untrackedResourceForeground#43a047
  • input.background#ffffff
  • input.border#bdbdbd
  • input.foreground#212121
  • input.placeholderForeground#9e9e9e
  • inputOption.activeBorder#e53935
  • list.activeSelectionBackground#e53935
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ffab91
  • list.highlightForeground#e53935
  • list.hoverBackground#ffccbc66
  • minimap.background#f5f5f5
  • minimapSlider.activeBackground#e5393599
  • minimapSlider.background#e5393533
  • minimapSlider.hoverBackground#e5393566
  • panel.background#f5f5f5
  • panel.border#cfd8dc
  • panelTitle.activeBorder#e53935
  • panelTitle.activeForeground#e53935
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#e53935
  • scrollbarSlider.background#bdbdbd66
  • scrollbarSlider.hoverBackground#9e9e9e99
  • sideBar.background#e0e0e0
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#f5f5f5
  • sideBarSectionHeader.foreground#e53935
  • sideBarTitle.foreground#e53935
  • statusBar.background#d6d6d6
  • statusBar.debuggingBackground#e53935
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#e0e0e0
  • statusBarItem.hoverBackground#ffcccc
  • tab.activeBackground#ffffff
  • tab.activeBorder#e53935
  • tab.activeForeground#212121
  • tab.border#bdbdbd
  • tab.inactiveBackground#e0e0e0
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#1e88e5
  • terminal.ansiBrightBlue#42a5f5
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#66bb6a
  • terminal.ansiBrightMagenta#ab47bc
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#00acc1
  • terminal.ansiGreen#43a047
  • terminal.ansiMagenta#8e24aa
  • terminal.ansiRed#e53935
  • terminal.ansiYellow#fdd835
  • terminal.background#f5f5f5
  • terminal.foreground#212121
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e9e9eitalic
string, string.quoted, string.template#2e7d32
keyword, storage.type, storage.modifier#e53935bold
keyword.operator, punctuation.accessor#ff7043
variable, variable.other#212121
variable.parameter#ff7043italic
entity.name.function, support.function#ffb300
meta.function-call#ffca28
entity.name.class, entity.name.type.class, support.class#7e57c2bold
entity.name.type, support.type#5c6bc0
entity.name.type.interface#5c6bc0italic
constant.numeric#ff7043
constant, constant.language, constant.character#ff7043
constant.language.boolean#ff7043bold
variable.other.property, support.variable.property#212121
meta.object-literal.key#ff7043
entity.name.tag, punctuation.definition.tag#e53935
entity.other.attribute-name#ff7043italic
punctuation, meta.brace#ff7043
string.regexp#ff7043
constant.character.escape#ff7043
meta.decorator, punctuation.decorator#fdd835
invalid, invalid.illegal#d32f2fstrikethrough
markup.heading, entity.name.section#e53935bold
markup.bold#ffb300bold
markup.italic#ff7043italic
markup.underline.link#ffb300
markup.inline.raw, markup.fenced_code#2e7d32
support.type.property-name.json#e53935
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff7043
support.type.property-name.css#7e57c2
support.constant.property-value.css#2e7d32