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#D32F2F
  • activityBar.background#FFE082
  • activityBar.foreground#D32F2F
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFF8E1
  • badge.background#D32F2F
  • badge.foreground#FFF8E1
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFE082
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FFF8E1
  • editor.findMatchBackground#D32F2F44
  • editor.findMatchHighlightBackground#D32F2F22
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF3E0AA
  • editor.lineHighlightBorder#D32F2F
  • editor.selectionBackground#FF8A80AA
  • editor.selectionHighlightBackground#FF8A8080
  • editorBracketMatch.background#FFCC80AA
  • editorBracketMatch.border#D32F2F
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FFF8E1
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#B0BEC5
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#0288D1
  • gitDecoration.untrackedResourceForeground#7CB342
  • input.background#FFE082
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#FFCC80
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFCC80
  • list.highlightForeground#D32F2F
  • list.hoverBackground#FFCC8080
  • minimap.background#FFF8E1
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#B0BEC59A
  • minimapSlider.hoverBackground#B0BEC5CC
  • panel.background#FFF8E1
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#D32F2F
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#D32F2F88
  • scrollbarSlider.background#B0BEC5AA
  • scrollbarSlider.hoverBackground#B0BEC5CC
  • sideBar.background#FFE082
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFE082
  • sideBarSectionHeader.foreground#D32F2F
  • sideBarTitle.foreground#D32F2F
  • statusBar.background#FFCC80
  • statusBar.debuggingBackground#C62828
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#FFE082
  • statusBarItem.hoverBackground#FFAB40
  • tab.activeBackground#FFF8E1
  • tab.activeBorder#D32F2F
  • tab.activeForeground#D32F2F
  • tab.border#FFF8E1
  • tab.inactiveBackground#FFE082
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#0288D1
  • terminal.ansiBrightBlue#039BE5
  • terminal.ansiBrightCyan#00ACC1
  • terminal.ansiBrightGreen#8BC34A
  • terminal.ansiBrightMagenta#E91E63
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FFC107
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#C2185B
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFB300
  • terminal.background#FFF8E1
  • terminal.foreground#212121
  • titleBar.activeBackground#FFE082
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#FFF8E1
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#0097A7
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#0288D1
variable, variable.other#212121
variable.parameter#FF6F00italic
entity.name.function, support.function#00ACC1
meta.function-call#4DD0E1
entity.name.class, entity.name.type.class, support.class#D32F2Fbold
entity.name.type, support.type#0097A7
entity.name.type.interface#FFB300italic
constant.numeric#FF9800
constant, constant.language, constant.character#D32F2F
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#0288D1
meta.object-literal.key#0097A7
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#FF6F00italic
punctuation, meta.brace#212121
string.regexp#FF9800
constant.character.escape#D32F2F
meta.decorator, punctuation.decorator#C2185B
invalid, invalid.illegal#FF1744strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#0288D1italic
markup.underline.link#0097A7
markup.inline.raw, markup.fenced_code#7CB342
support.type.property-name.json#0097A7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D32F2F
support.type.property-name.css#0288D1
support.constant.property-value.css#FF9800