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#FFFFFF
  • activityBar.foreground#FFC107
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAF5
  • editor.findMatchBackground#D32F2FAA
  • editor.findMatchHighlightBackground#D32F2F66
  • editor.foreground#212121
  • editor.lineHighlightBackground#EEEEEE80
  • editor.lineHighlightBorder#D32F2F80
  • editor.selectionBackground#BBDEFB80
  • editor.selectionHighlightBackground#90CAF980
  • editorBracketMatch.background#FFECB3
  • editorBracketMatch.border#FFC107
  • editorCursor.foreground#FFC107
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#D32F2F
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FFC107
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FFC107
  • gitDecoration.conflictingResourceForeground#FFC107
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#42A5F5
  • gitDecoration.untrackedResourceForeground#66BB6A
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#D1C4E9
  • list.activeSelectionForeground#212121
  • list.focusBackground#D1C4E9
  • list.highlightForeground#D32F2F
  • list.hoverBackground#E0E0E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#D32F2F22
  • minimapSlider.hoverBackground#D32F2F44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#FFC107
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#D32F2F88
  • scrollbarSlider.background#BDBDBD44
  • scrollbarSlider.hoverBackground#BDBDBD88
  • sideBar.background#F0F0F0
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#FFC107
  • sideBarTitle.foreground#FFC107
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.hoverBackground#D1C4E9
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#FFC107
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#42A5F5
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFB300
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#FFC107
variable, variable.other#212121
variable.parameter#FF9800italic
entity.name.function, support.function#42A5F5
meta.function-call#66BB6A
entity.name.class, entity.name.type.class, support.class#AB47BCbold
entity.name.type, support.type#7E57C2
entity.name.type.interface#26C6DAitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FF9800
constant.language.boolean#FFC107bold
variable.other.property, support.variable.property#66BB6A
meta.object-literal.key#42A5F5
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#FF9800italic
punctuation, meta.brace#212121
string.regexp#FFB300
constant.character.escape#FF9800
meta.decorator, punctuation.decorator#26C6DA
invalid, invalid.illegal#E57373strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#FF9800bold
markup.italic#FFB300italic
markup.underline.link#42A5F5
markup.inline.raw, markup.fenced_code#66BB6A
support.type.property-name.json#42A5F5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF9800
support.type.property-name.css#42A5F5
support.constant.property-value.css#66BB6A