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#FF6F00
  • activityBar.background#F5F5F5
  • activityBar.foreground#5A2A83
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5A2A83
  • badge.foreground#FFFFFF
  • button.background#FF6F00
  • button.foreground#FFFFFF
  • button.hoverBackground#E65100
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#FF6F00
  • editor.findMatchHighlightBackground#FFCC80
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF8E1
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#FFECB3
  • editor.selectionHighlightBackground#FFE082
  • editorBracketMatch.background#FFE0B2
  • editorBracketMatch.border#FF9800
  • editorCursor.foreground#5A2A83
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#5A2A83
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#9C27B0
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#FFECB3
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFF3E0
  • list.highlightForeground#FF6F00
  • list.hoverBackground#FFF3E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#757575B0
  • minimapSlider.background#BDBDBD40
  • minimapSlider.hoverBackground#9E9E9E80
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#5A2A83
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#757575B0
  • scrollbarSlider.background#BDBDBD40
  • scrollbarSlider.hoverBackground#9E9E9E80
  • sideBar.background#FAFAFA
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#EFEFEF
  • sideBarSectionHeader.foreground#5A2A83
  • sideBarTitle.foreground#5A2A83
  • statusBar.background#5A2A83
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#4B1F70
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F00
  • tab.activeForeground#5A2A83
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#FF6F00
keyword, storage.type, storage.modifier#5A2A83bold
keyword.operator, punctuation.accessor#7E57C2
variable, variable.other#212121
variable.parameter#757575italic
entity.name.function, support.function#FF8F00
meta.function-call#FF8F00
entity.name.class, entity.name.type.class, support.class#5A2A83bold
entity.name.type, support.type#009688
entity.name.type.interface#7E57C2italic
constant.numeric#1976D2
constant, constant.language, constant.character#9C27B0
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#009688
meta.object-literal.key#5A2A83
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#009688italic
punctuation, meta.brace#616161
string.regexp#4CAF50
constant.character.escape#F44336
meta.decorator, punctuation.decorator#9C27B0
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#5A2A83bold
markup.bold#FF6F00bold
markup.italic#757575italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#5A2A83
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F00
support.type.property-name.css#009688
support.constant.property-value.css#4CAF50