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#E0E0E0
  • activityBar.foreground#333333
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F00
  • badge.foreground#FFFFFF
  • button.background#FF6F00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8F00
  • dropdown.background#E0E0E0
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#F5F5F5
  • editor.findMatchBackground#FF6F0044
  • editor.findMatchHighlightBackground#FF6F0022
  • editor.foreground#333333
  • editor.lineHighlightBackground#FF6F0010
  • editor.lineHighlightBorder#FF6F0010
  • editor.selectionBackground#FFC10740
  • editor.selectionHighlightBackground#FFC10720
  • editorBracketMatch.background#FFC10733
  • editorBracketMatch.border#FFC107
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#BBBBBB
  • editorIndentGuide.background#BBBBBB80
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#AAAAAA
  • editorWhitespace.foreground#BBBBBB80
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FFC107
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FFAB40
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#E0E0E0
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#FF6F0010
  • list.activeSelectionForeground#FF6F00
  • list.focusBackground#FF6F0010
  • list.highlightForeground#FF6F00
  • list.hoverBackground#FF6F0010
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#FF6F6677
  • minimapSlider.background#FF6F2233
  • minimapSlider.hoverBackground#FF6F4455
  • panel.background#F5F5F5
  • panel.border#D0D0D0
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#FF6F88
  • scrollbarSlider.background#BBBBBB40
  • scrollbarSlider.hoverBackground#BBBBBB80
  • sideBar.background#EEEEEE
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#D6D6D6
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#CCCCCC
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF6F00
  • tab.activeForeground#FF6F00
  • tab.border#CCCCCC
  • tab.inactiveBackground#E0E0E0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFC107
  • terminal.background#FFFFFF
  • terminal.foreground#333333
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00C853
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#FFAB40
variable, variable.other#333333
variable.parameter#FFAB40italic
entity.name.function, support.function#FFC107
meta.function-call#FFC107
entity.name.class, entity.name.type.class, support.class#FF8F00bold
entity.name.type, support.type#FFAB40
entity.name.type.interface#FFAB40italic
constant.numeric#FFC107
constant, constant.language, constant.character#FFC107
constant.language.boolean#FFC107bold
variable.other.property, support.variable.property#2196F3
meta.object-literal.key#FFCC80
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#FFAB40italic
punctuation, meta.brace#333333
string.regexp#FFC107
constant.character.escape#FFAB40
meta.decorator, punctuation.decorator#FFC107
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FFC107bold
markup.italic#FFAB40italic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#00C853
support.type.property-name.json#FFCC80
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F00
support.type.property-name.css#FFAB40
support.constant.property-value.css#00C853