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#EEEEEE
  • activityBar.foreground#1976D2
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FF6F00
  • badge.foreground#FAFAFA
  • button.background#FF6F00
  • button.foreground#FAFAFA
  • button.hoverBackground#FF8F33
  • dropdown.background#EEEEEE
  • dropdown.border#1976D2
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#1976D280
  • editor.findMatchHighlightBackground#1976D240
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF3E0
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#FFCC8010
  • editor.selectionHighlightBackground#FFCC8020
  • editorBracketMatch.background#1976D240
  • editorBracketMatch.border#1976D2
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#BDBDBD80
  • editorIndentGuide.background#E0E0E080
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#EEEEEE
  • input.border#1976D2
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#1976D240
  • list.activeSelectionForeground#212121
  • list.focusBackground#1976D280
  • list.highlightForeground#FF6F00
  • list.hoverBackground#1976D260
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#1976D266
  • minimapSlider.background#1976D222
  • minimapSlider.hoverBackground#1976D244
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FF6F0088
  • scrollbarSlider.background#9E9E9E40
  • scrollbarSlider.hoverBackground#9E9E9E80
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#EEEEEE
  • sideBarSectionHeader.foreground#1976D2
  • sideBarTitle.foreground#1976D2
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#EEEEEE
  • statusBarItem.hoverBackground#D5D5D5
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F00
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#EEEEEE
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#1976D2
variable, variable.other#212121
variable.parameter#FF6F00italic
entity.name.function, support.function#00ACC1
meta.function-call#0097A7
entity.name.class, entity.name.type.class, support.class#FFEB3Bbold
entity.name.type, support.type#FFEB3B
entity.name.type.interface#FFEB3Bitalic
constant.numeric#FF9800
constant, constant.language, constant.character#FFC107
constant.language.boolean#FF5722bold
variable.other.property, support.variable.property#00ACC1
meta.object-literal.key#0097A7
entity.name.tag, punctuation.definition.tag#1976D2
entity.other.attribute-name#FFEB3Bitalic
punctuation, meta.brace#212121
string.regexp#FF9800
constant.character.escape#FFEB3B
meta.decorator, punctuation.decorator#FFC107
invalid, invalid.illegal#FF1744strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FF6F00bold
markup.italic#FFEB3Bitalic
markup.underline.link#00ACC1
markup.inline.raw, markup.fenced_code#00897B
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F00
support.type.property-name.css#00ACC1
support.constant.property-value.css#00897B