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#E4002B
  • activityBar.background#F5F5F5
  • activityBar.foreground#212121
  • activityBarBadge.background#E4002B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E4002B
  • badge.foreground#FFFFFF
  • button.background#E4002B
  • button.foreground#FFFFFF
  • button.hoverBackground#D32F2F
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFF59D
  • editor.findMatchHighlightBackground#FFE082
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#E0E0E0
  • editor.selectionBackground#B3E5FC
  • editor.selectionHighlightBackground#E3F2FD
  • editorBracketMatch.background#C8E6C9
  • editorBracketMatch.border#66BB6A
  • editorCursor.foreground#E4002B
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#E4002B
  • gitDecoration.conflictingResourceForeground#D32F2F
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#E4002B
  • list.activeSelectionBackground#E3F2FD
  • list.activeSelectionForeground#212121
  • list.focusBackground#E1F5FE
  • list.highlightForeground#E4002B
  • list.hoverBackground#F1F8E9
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#78909C
  • minimapSlider.background#B0BEC5
  • minimapSlider.hoverBackground#90A4AE
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#E4002B
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#78909C
  • scrollbarSlider.background#B0BEC5
  • scrollbarSlider.hoverBackground#90A4AE
  • sideBar.background#FAFAFA
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#F0F0F0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#E4002B
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#D32F2F
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#E4002B
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#F44336
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#E4002B
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#4CAF50
keyword, storage.type, storage.modifier#E4002Bbold
keyword.operator, punctuation.accessor#FF9800
variable, variable.other#212121
variable.parameter#795548italic
entity.name.function, support.function#1976D2
meta.function-call#1565C0
entity.name.class, entity.name.type.class, support.class#D32F2Fbold
entity.name.type, support.type#00796B
entity.name.type.interface#009688italic
constant.numeric#FF5722
constant, constant.language, constant.character#9C27B0
constant.language.boolean#E4002Bbold
variable.other.property, support.variable.property#5D4037
meta.object-literal.key#3F51B5
entity.name.tag, punctuation.definition.tag#C2185B
entity.other.attribute-name#F57C00italic
punctuation, meta.brace#9E9E9E
string.regexp#8BC34A
constant.character.escape#D84315
meta.decorator, punctuation.decorator#607D8B
invalid, invalid.illegal#D50000strikethrough
markup.heading, entity.name.section#E4002Bbold
markup.bold#212121bold
markup.italic#212121italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#4E342E
support.type.property-name.json#3F51B5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D81B60
support.type.property-name.css#00796B
support.constant.property-value.css#F57C00