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#006D8C
  • activityBar.background#E0F4FF
  • activityBar.foreground#006D8C
  • activityBarBadge.background#00B8D4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#00B8D4
  • badge.foreground#FFFFFF
  • button.background#00B8D4
  • button.foreground#FFFFFF
  • button.hoverBackground#0097A7
  • dropdown.background#E0F4FF
  • dropdown.border#80D8FF
  • dropdown.foreground#2B2B2B
  • editor.background#F5F9FF
  • editor.findMatchBackground#FFEB3B40
  • editor.findMatchHighlightBackground#FFEB3B20
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#B3E5FC40
  • editor.lineHighlightBorder#B3E5FC
  • editor.selectionBackground#80D8FF80
  • editor.selectionHighlightBackground#80D8FF40
  • editorBracketMatch.background#80D8FF33
  • editorBracketMatch.border#80D8FF
  • editorCursor.foreground#006D8C
  • editorGroupHeader.tabsBackground#F5F9FF
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#006D8C
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#006D8C
  • gitDecoration.conflictingResourceForeground#FBC02D
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#006D8C
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#E0F4FF
  • input.border#80D8FF
  • input.foreground#2B2B2B
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#006D8C
  • list.activeSelectionBackground#80D8FF66
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#80D8FF66
  • list.highlightForeground#006D8C
  • list.hoverBackground#80D8FF33
  • minimap.background#F5F9FF
  • minimapSlider.activeBackground#80D8FF88
  • minimapSlider.background#80D8FF44
  • minimapSlider.hoverBackground#80D8FF66
  • panel.background#F5F9FF
  • panel.border#80D8FF
  • panelTitle.activeBorder#006D8C
  • panelTitle.activeForeground#006D8C
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#80D8FF88
  • scrollbarSlider.background#80D8FF44
  • scrollbarSlider.hoverBackground#80D8FF66
  • sideBar.background#E8F7FF
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#D0ECFF
  • sideBarSectionHeader.foreground#006D8C
  • sideBarTitle.foreground#006D8C
  • statusBar.background#CDEFFF
  • statusBar.debuggingBackground#FFAB40
  • statusBar.foreground#006D8C
  • statusBar.noFolderBackground#E0F4FF
  • statusBarItem.hoverBackground#9ED9FF
  • tab.activeBackground#CDEFFF
  • tab.activeBorder#006D8C
  • tab.activeForeground#006D8C
  • tab.border#F5F9FF
  • tab.inactiveBackground#F5F9FF
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#006D8C
  • terminal.ansiBrightBlue#0097A7
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FBC02D
  • terminal.background#F5F9FF
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#D0ECFF
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F5F9FF
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#00BCD4
keyword, storage.type, storage.modifier#006D8Cbold
keyword.operator, punctuation.accessor#00B8D4
variable, variable.other#65737E
variable.parameter#9E9E9Eitalic
entity.name.function, support.function#D81B60
meta.function-call#006D8C
entity.name.class, entity.name.type.class, support.class#00C853bold
entity.name.type, support.type#00C853
entity.name.type.interface#66FFCCitalic
constant.numeric#FBC02D
constant, constant.language, constant.character#D81B60
constant.language.boolean#006D8Cbold
variable.other.property, support.variable.property#00B8D4
meta.object-literal.key#D81B60
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#FF9800italic
punctuation, meta.brace#2B2B2B
string.regexp#00C853
constant.character.escape#D81B60
meta.decorator, punctuation.decorator#FFF176
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#006D8Cbold
markup.bold#D81B60bold
markup.italic#9E9E9Eitalic
markup.underline.link#006D8C
markup.inline.raw, markup.fenced_code#00BCD4
support.type.property-name.json#006D8C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D81B60
support.type.property-name.css#65737E
support.constant.property-value.css#00BCD4