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#EEEEEE
  • activityBar.foreground#212121
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FAFAFA
  • badge.background#D32F2F
  • badge.foreground#FAFAFA
  • button.background#D32F2F
  • button.foreground#FAFAFA
  • button.hoverBackground#E53935
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#D32F2F40
  • editor.findMatchHighlightBackground#D32F2F20
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF3E020
  • editor.lineHighlightBorder#FFB30080
  • editor.selectionBackground#FFCDD240
  • editor.selectionHighlightBackground#FFCDD220
  • editorBracketMatch.background#FFCC8033
  • editorBracketMatch.border#D32F2F
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#E0E0E080
  • editorIndentGuide.background#E0E0E040
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#F57C00
  • gitDecoration.deletedResourceForeground#C62828
  • gitDecoration.modifiedResourceForeground#D32F2F
  • gitDecoration.untrackedResourceForeground#43A047
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#B0B0B0
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#D32F2F40
  • list.activeSelectionForeground#212121
  • list.focusBackground#D32F2F40
  • list.highlightForeground#D32F2F
  • list.hoverBackground#D32F2F20
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#D32F2F22
  • minimapSlider.hoverBackground#D32F2F44
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D32F2F88
  • scrollbarSlider.background#9E9E9E44
  • scrollbarSlider.hoverBackground#9E9E9E88
  • sideBar.background#F0F0F0
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#D32F2F
  • statusBar.background#D32F2F
  • statusBar.debuggingBackground#C62828
  • statusBar.foreground#FAFAFA
  • statusBar.noFolderBackground#D32F2F
  • statusBarItem.hoverBackground#E53935
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFB300
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#43A047
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#F57C00
  • terminal.background#212121
  • terminal.foreground#FAFAFA
  • titleBar.activeBackground#FFEBEE
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#43A047
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#F57C00
variable, variable.other#212121
variable.parameter#F57C00italic
entity.name.function, support.function#1976D2
meta.function-call#F57C00
entity.name.class, entity.name.type.class, support.class#D32F2Fbold
entity.name.type, support.type#1976D2
entity.name.type.interface#F57C00italic
constant.numeric#F57C00
constant, constant.language, constant.character#D32F2F
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#212121
meta.object-literal.key#1976D2
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#F57C00italic
punctuation, meta.brace#9E9E9E
string.regexp#D32F2F
constant.character.escape#F57C00
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#C62828strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#F57C00italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#43A047
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#1976D2
support.constant.property-value.css#D32F2F