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—