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#FF8A75
  • activityBar.background#E8E8E8
  • activityBar.foreground#2A9D8F
  • activityBarBadge.background#FF8A75
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FF8A75
  • badge.foreground#FAFAFA
  • button.background#2A9D8F
  • button.foreground#FAFAFA
  • button.hoverBackground#2A9D8F88
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#4AB5A044
  • editor.findMatchHighlightBackground#4AB5A022
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#D0F0F040
  • editor.lineHighlightBorder#D0F0F080
  • editor.selectionBackground#FF8A7540
  • editor.selectionHighlightBackground#FF8A7533
  • editorBracketMatch.background#FF8A7533
  • editorBracketMatch.border#FF8A75
  • editorCursor.foreground#FF8A75
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#BBBBBB88
  • editorIndentGuide.background#DDDDDD44
  • editorLineNumber.activeForeground#2A9D8F
  • editorLineNumber.foreground#BBBBBB
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF8A75
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF8A75
  • gitDecoration.modifiedResourceForeground#2A9D8F
  • gitDecoration.untrackedResourceForeground#4AB5A0
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2E2E2E
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#FF8A75
  • list.activeSelectionBackground#2A9D8F66
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#CCCCCC
  • list.highlightForeground#FF8A75
  • list.hoverBackground#CCCCCC66
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#2A9D8F66
  • minimapSlider.background#2A9D8F22
  • minimapSlider.hoverBackground#2A9D8F44
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FF8A75
  • panelTitle.activeForeground#2A9D8F
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF8A6888
  • scrollbarSlider.background#BBBBBB44
  • scrollbarSlider.hoverBackground#BBBBBB88
  • sideBar.background#F0F0F0
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#E5E5E5
  • sideBarSectionHeader.foreground#2A9D8F
  • sideBarTitle.foreground#2A9D8F
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FF8A75
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#E8E8E8
  • statusBarItem.hoverBackground#FF8A7580
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF8A75
  • tab.activeForeground#2E2E2E
  • tab.border#CCCCCC
  • tab.inactiveBackground#FAFAFA
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#2A9D8F
  • terminal.ansiBrightBlue#2A9D8F
  • terminal.ansiBrightCyan#4AB5A0
  • terminal.ansiBrightGreen#4AB5A0
  • terminal.ansiBrightMagenta#FF8A75
  • terminal.ansiBrightRed#FF8A75
  • terminal.ansiBrightYellow#FFB86C
  • terminal.ansiCyan#4AB5A0
  • terminal.ansiGreen#4AB5A0
  • terminal.ansiMagenta#FF8A75
  • terminal.ansiRed#FF8A75
  • terminal.ansiYellow#FFB86C
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#2A9D8F
keyword, storage.type, storage.modifier#FF8A75bold
keyword.operator, punctuation.accessor#4AB5A0
variable, variable.other#2E2E2E
variable.parameter#2A9D8Fitalic
entity.name.function, support.function#4AB5A0
meta.function-call#4AB5A0
entity.name.class, entity.name.type.class, support.class#FF8A75bold
entity.name.type, support.type#2A9D8F
entity.name.type.interface#4AB5A0italic
constant.numeric#FFB86C
constant, constant.language, constant.character#FFB86C
constant.language.boolean#FF8A75bold
variable.other.property, support.variable.property#4AB5A0
meta.object-literal.key#FF8A75
entity.name.tag, punctuation.definition.tag#FF8A75
entity.other.attribute-name#FF8A75italic
punctuation, meta.brace#4AB5A0
string.regexp#2A9D8F
constant.character.escape#FF8A75
meta.decorator, punctuation.decorator#4AB5A0
invalid, invalid.illegal#FF8A75strikethrough
markup.heading, entity.name.section#FF8A75bold
markup.bold#FF8A75bold
markup.italic#2A9D8Fitalic
markup.underline.link#4AB5A0
markup.inline.raw, markup.fenced_code#2A9D8F
support.type.property-name.json#FF8A75
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4AB5A0
support.type.property-name.css#2A9D8F
support.constant.property-value.css#2A9D8F