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#212121
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#3F51B5
  • button.foreground#FFFFFF
  • button.hoverBackground#5C6BC0
  • dropdown.background#FFFFFF
  • dropdown.border#3F51B5
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#D32F2F30
  • editor.findMatchHighlightBackground#D32F2F20
  • editor.foreground#212121
  • editor.lineHighlightBackground#E3F2FD
  • editor.lineHighlightBorder#90CAF9
  • editor.selectionBackground#D32F2F40
  • editor.selectionHighlightBackground#90CAF940
  • editorBracketMatch.background#90CAF940
  • editorBracketMatch.border#90CAF9
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#BDBDBD
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#FDD835
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#3F51B5
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#3F51B5
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#D1C4E9
  • list.activeSelectionForeground#212121
  • list.focusBackground#D1C4E9
  • list.highlightForeground#D32F2F
  • list.hoverBackground#EDE7F6
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#D32F2F22
  • minimapSlider.hoverBackground#D32F2F44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#D32F2F80
  • scrollbarSlider.background#BDBDBD40
  • scrollbarSlider.hoverBackground#9E9E9E80
  • sideBar.background#F5F5F5
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#D32F2F
  • sideBarTitle.foreground#D32F2F
  • statusBar.background#EEEEEE
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#D1C4E9
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#3F51B5
  • terminal.ansiBrightBlue#7986CB
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FDD835
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#388E3C
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#3F51B5
variable, variable.other#E0E0E0
variable.parameter#9E9E9Eitalic
entity.name.function, support.function#7986CB
meta.function-call#5C6BC0
entity.name.class, entity.name.type.class, support.class#FFB74Dbold
entity.name.type, support.type#FFB74D
entity.name.type.interface#FFB74Ditalic
constant.numeric#FDD835
constant, constant.language, constant.character#FFB74D
constant.language.boolean#FDD835bold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#7986CB
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#9C27B0italic
punctuation, meta.brace#E0E0E0
string.regexp#F57C00
constant.character.escape#9C27B0
meta.decorator, punctuation.decorator#FDD835
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#9E9E9Eitalic
markup.underline.link#3F51B5
markup.inline.raw, markup.fenced_code#388E3C
support.type.property-name.json#7986CB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB74D
support.type.property-name.css#7986CB
support.constant.property-value.css#3F51B5