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#5A81A5
  • activityBar.background#EEF0F3
  • activityBar.foreground#2C2C3E
  • activityBarBadge.background#5A81A5
  • activityBarBadge.foreground#FAFAFB
  • badge.background#5A81A5
  • badge.foreground#FAFAFB
  • button.background#5A81A5
  • button.foreground#FAFAFB
  • button.hoverBackground#5A81A580
  • dropdown.background#F2F2F5
  • dropdown.border#C0C0D0
  • dropdown.foreground#2C2C3E
  • editor.background#FAFAFB
  • editor.findMatchBackground#8C7A5E77
  • editor.findMatchHighlightBackground#8C7A5E44
  • editor.foreground#2C2C3E
  • editor.lineHighlightBackground#5A81A525
  • editor.lineHighlightBorder#5A81A540
  • editor.selectionBackground#5A81A540
  • editor.selectionHighlightBackground#5A81A525
  • editorBracketMatch.background#8C7A5E30
  • editorBracketMatch.border#8C7A5E
  • editorCursor.foreground#5A81A5
  • editorGroupHeader.tabsBackground#FAFAFB
  • editorIndentGuide.activeBackground#5A81A5A0
  • editorIndentGuide.background#C0C0D0AA
  • editorLineNumber.activeForeground#2C2C3E
  • editorLineNumber.foreground#A0A0B0
  • editorWhitespace.foreground#C0C0D0
  • focusBorder#5A81A5
  • gitDecoration.conflictingResourceForeground#C4A152
  • gitDecoration.deletedResourceForeground#A05252
  • gitDecoration.modifiedResourceForeground#5A81A5
  • gitDecoration.untrackedResourceForeground#3B8C70
  • input.background#F2F2F5
  • input.border#C0C0D0
  • input.foreground#2C2C3E
  • input.placeholderForeground#A0A0B0
  • inputOption.activeBorder#5A81A5
  • list.activeSelectionBackground#5A81A5
  • list.activeSelectionForeground#FAFAFB
  • list.focusBackground#5A81A520
  • list.highlightForeground#5A81A5
  • list.hoverBackground#5A81A530
  • minimap.background#FAFAFB
  • minimapSlider.activeBackground#5A81A566
  • minimapSlider.background#5A81A522
  • minimapSlider.hoverBackground#5A81A544
  • panel.background#FAFAFB
  • panel.border#C0C0D0
  • panelTitle.activeBorder#5A81A5
  • panelTitle.activeForeground#2C2C3E
  • panelTitle.inactiveForeground#A0A0B0
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#5A81A580
  • scrollbarSlider.background#C0C0D050
  • scrollbarSlider.hoverBackground#C0C0D070
  • sideBar.background#F2F2F5
  • sideBar.foreground#2C2C3E
  • sideBarSectionHeader.background#E5E5EC
  • sideBarSectionHeader.foreground#5A81A5
  • sideBarTitle.foreground#5A81A5
  • statusBar.background#E5E5EC
  • statusBar.debuggingBackground#5A81A5
  • statusBar.foreground#2C2C3E
  • statusBar.noFolderBackground#D9D9E0
  • statusBarItem.hoverBackground#5A81A580
  • tab.activeBackground#FAFAFB
  • tab.activeBorder#5A81A5
  • tab.activeForeground#2C2C3E
  • tab.border#E5E5EC
  • tab.inactiveBackground#F2F2F5
  • tab.inactiveForeground#A0A0B0
  • terminal.ansiBlue#5A81A5
  • terminal.ansiBrightBlue#7A9FC5
  • terminal.ansiBrightCyan#8DC4D9
  • terminal.ansiBrightGreen#A49B70
  • terminal.ansiBrightMagenta#C79EB0
  • terminal.ansiBrightRed#B86A6A
  • terminal.ansiBrightYellow#D9B96B
  • terminal.ansiCyan#6FA6B8
  • terminal.ansiGreen#8C7A5E
  • terminal.ansiMagenta#B58A9C
  • terminal.ansiRed#A05252
  • terminal.ansiYellow#C4A152
  • terminal.background#FAFAFB
  • terminal.foreground#2C2C3E
  • titleBar.activeBackground#EEF0F3
  • titleBar.activeForeground#2C2C3E
  • titleBar.inactiveBackground#F2F2F5
  • titleBar.inactiveForeground#A0A0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0B0italic
string, string.quoted, string.template#3B8C70
keyword, storage.type, storage.modifier#5A81A5bold
keyword.operator, punctuation.accessor#C0C0D0
variable, variable.other#2C2C3E
variable.parameter#C0C0D0italic
entity.name.function, support.function#5A81A5
meta.function-call#8C7A5E
entity.name.class, entity.name.type.class, support.class#5A81A5bold
entity.name.type, support.type#5A81A5
entity.name.type.interface#8C7A5Eitalic
constant.numeric#6FA6B8
constant, constant.language, constant.character#5A81A5
constant.language.boolean#5A81A5bold
variable.other.property, support.variable.property#2C2C3E
meta.object-literal.key#5A81A5
entity.name.tag, punctuation.definition.tag#5A81A5
entity.other.attribute-name#8C7A5Eitalic
punctuation, meta.brace#A0A0B0
string.regexp#6FA6B8
constant.character.escape#6FA6B8
meta.decorator, punctuation.decorator#B58A9C
invalid, invalid.illegal#A05252strikethrough
markup.heading, entity.name.section#5A81A5bold
markup.bold#5A81A5bold
markup.italic#8C7A5Eitalic
markup.underline.link#6FA6B8
markup.inline.raw, markup.fenced_code#3B8C70
support.type.property-name.json#6FA6B8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B58A9C
support.type.property-name.css#5A81A5
support.constant.property-value.css#3B8C70