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#0097A7
  • activityBar.background#E6F2F5
  • activityBar.foreground#0097A7
  • activityBarBadge.background#0097A7
  • activityBarBadge.foreground#F8FCFF
  • badge.background#0097A7
  • badge.foreground#F8FCFF
  • button.background#0097A7
  • button.foreground#FFFFFF
  • button.hoverBackground#007C8A
  • dropdown.background#FFFFFF
  • dropdown.border#0097A7
  • dropdown.foreground#2C3E50
  • editor.background#F8FCFF
  • editor.findMatchBackground#FFEB3B44
  • editor.findMatchHighlightBackground#FFEB3B22
  • editor.foreground#2C3E50
  • editor.lineHighlightBackground#B3E5F530
  • editor.lineHighlightBorder#B3E5F580
  • editor.selectionBackground#80D4E1AA
  • editor.selectionHighlightBackground#80D4E133
  • editorBracketMatch.background#0097A733
  • editorBracketMatch.border#0097A7
  • editorCursor.foreground#0097A7
  • editorGroupHeader.tabsBackground#F8FCFF
  • editorIndentGuide.activeBackground#C0D9DF88
  • editorIndentGuide.background#C0D9DF44
  • editorLineNumber.activeForeground#0097A7
  • editorLineNumber.foreground#5A6B7D
  • editorWhitespace.foreground#C0D9DF
  • focusBorder#0097A7
  • gitDecoration.conflictingResourceForeground#F9A825
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#0097A7
  • gitDecoration.untrackedResourceForeground#2A9D8F
  • input.background#FFFFFF
  • input.border#0097A7
  • input.foreground#2C3E50
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#0097A7
  • list.activeSelectionBackground#B3E5F5
  • list.activeSelectionForeground#2C3E50
  • list.focusBackground#B3E5F5
  • list.highlightForeground#0097A7
  • list.hoverBackground#B3E5F566
  • minimap.background#F8FCFF
  • minimapSlider.activeBackground#0097A766
  • minimapSlider.background#0097A722
  • minimapSlider.hoverBackground#0097A744
  • panel.background#F8FCFF
  • panel.border#E6F2F5
  • panelTitle.activeBorder#0097A7
  • panelTitle.activeForeground#0097A7
  • panelTitle.inactiveForeground#5A6B7D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0097A888
  • scrollbarSlider.background#C0D9DF44
  • scrollbarSlider.hoverBackground#C0D9DF88
  • sideBar.background#F0FAFD
  • sideBar.foreground#2C3E50
  • sideBarSectionHeader.background#E6F2F5
  • sideBarSectionHeader.foreground#5A6B7D
  • sideBarTitle.foreground#0097A7
  • statusBar.background#D0E8ED
  • statusBar.debuggingBackground#FFCDD2
  • statusBar.foreground#2C3E50
  • statusBar.noFolderBackground#D0E8ED
  • statusBarItem.hoverBackground#B3E5F5
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#0097A7
  • tab.activeForeground#2C3E50
  • tab.border#C0D9DF
  • tab.inactiveBackground#F0FAFD
  • tab.inactiveForeground#5A6B7D
  • terminal.ansiBlue#0097A7
  • terminal.ansiBrightBlue#33B5E5
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#21A179
  • terminal.ansiBrightMagenta#E91E63
  • terminal.ansiBrightRed#F44336
  • terminal.ansiBrightYellow#FFC107
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#2A9D8F
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#F9A825
  • terminal.background#F8FCFF
  • terminal.foreground#2C3E50
  • titleBar.activeBackground#E6F2F5
  • titleBar.activeForeground#2C3E50
  • titleBar.inactiveBackground#D0E8ED
  • titleBar.inactiveForeground#5A6B7D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#2A9D8F
keyword, storage.type, storage.modifier#0097A7bold
keyword.operator, punctuation.accessor#5A6B7D
variable, variable.other#2C3E50
variable.parameter#008080italic
entity.name.function, support.function#0097A7
meta.function-call#5A6B7D
entity.name.class, entity.name.type.class, support.class#006699bold
entity.name.type, support.type#0097A7
entity.name.type.interface#008080italic
constant.numeric#2A9D8F
constant, constant.language, constant.character#0097A7
constant.language.boolean#0097A7bold
variable.other.property, support.variable.property#5A6B7D
meta.object-literal.key#0097A7
entity.name.tag, punctuation.definition.tag#0097A7
entity.other.attribute-name#5A6B7Ditalic
punctuation, meta.brace#5A6B7D
string.regexp#2A9D8F
constant.character.escape#D81B60
meta.decorator, punctuation.decorator#FF9800
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#0097A7bold
markup.bold#0097A7bold
markup.italic#5A6B7Ditalic
markup.underline.link#008080
markup.inline.raw, markup.fenced_code#2A9D8F
support.type.property-name.json#0097A7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF9800
support.type.property-name.css#5A6B7D
support.constant.property-value.css#00ACC1