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#FF9800
  • activityBar.background#FFFFFF
  • activityBar.foreground#424242
  • activityBarBadge.background#FF9800
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF9800
  • badge.foreground#FFFFFF
  • button.background#FF9800
  • button.foreground#FFFFFF
  • button.hoverBackground#FB8C00
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFCC80
  • editor.findMatchHighlightBackground#FFECB3
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#FF980040
  • editor.selectionBackground#FFCC80
  • editor.selectionHighlightBackground#FFE0B2
  • editorBracketMatch.background#FFF3E0
  • editorBracketMatch.border#FF9800
  • editorCursor.foreground#FF9800
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#FF9800
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FF9800
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF9800
  • gitDecoration.conflictingResourceForeground#FF9800
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF9800
  • list.activeSelectionBackground#FFE0B2
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFE0B2
  • list.highlightForeground#FF9800
  • list.hoverBackground#FFF3E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FF980066
  • minimapSlider.background#FF980022
  • minimapSlider.hoverBackground#FF980044
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF9800
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF980088
  • scrollbarSlider.background#BDBDBD44
  • scrollbarSlider.hoverBackground#BDBDBD88
  • sideBar.background#FFFFFF
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#FF9800
  • sideBarTitle.foreground#424242
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#D6D6D6
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#FF9800
  • tab.activeForeground#212121
  • tab.border#C0C0C0
  • tab.inactiveBackground#E8E8E8
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#63A4FF
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#FF6659
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FBC02D
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FF9800bold
keyword.operator, punctuation.accessor#1976D2
variable, variable.other#212121
variable.parameter#424242italic
entity.name.function, support.function#1976D2
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#7B1FA2bold
entity.name.type, support.type#388E3C
entity.name.type.interface#388E3Citalic
constant.numeric#F57C00
constant, constant.language, constant.character#D32F2F
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#212121
meta.object-literal.key#7B1FA2
entity.name.tag, punctuation.definition.tag#D84315
entity.other.attribute-name#7B1FA2italic
punctuation, meta.brace#424242
string.regexp#F57C00
constant.character.escape#7B1FA2
meta.decorator, punctuation.decorator#FBC02D
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#FF9800bold
markup.bold#FF9800bold
markup.italic#424242italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF9800
support.type.property-name.css#009688
support.constant.property-value.css#F57C00