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#3A81C3
  • activityBar.background#E6F4FF
  • activityBar.foreground#3A81C3
  • activityBarBadge.background#3A81C3
  • activityBarBadge.foreground#F0F9FF
  • badge.background#7A99B8
  • badge.foreground#F0F9FF
  • button.background#3A81C3
  • button.foreground#F0F9FF
  • button.hoverBackground#7A99B2
  • dropdown.background#FFFFFF
  • dropdown.border#3A81C3
  • dropdown.foreground#1E3A5B
  • editor.background#F0F9FF
  • editor.findMatchBackground#7A99B444
  • editor.findMatchHighlightBackground#7A99B422
  • editor.foreground#1E3A5B
  • editor.lineHighlightBackground#3A81C340
  • editor.lineHighlightBorder#3A81C380
  • editor.selectionBackground#3A81C340
  • editor.selectionHighlightBackground#3A81C320
  • editorBracketMatch.background#3A81C330
  • editorBracketMatch.border#3A81C380
  • editorCursor.foreground#3A81C3
  • editorGroupHeader.tabsBackground#F5FCFF
  • editorIndentGuide.activeBackground#B0D8FF80
  • editorIndentGuide.background#B0D8FF40
  • editorLineNumber.activeForeground#3A81C3
  • editorLineNumber.foreground#7A99B8
  • editorWhitespace.foreground#B0D8FF
  • focusBorder#3A81C3
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#3A81C3
  • gitDecoration.untrackedResourceForeground#6BCB8D
  • input.background#FFFFFF
  • input.border#3A81C3
  • input.foreground#1E3A5B
  • input.placeholderForeground#A8A8A8
  • inputOption.activeBorder#3A81C3
  • list.activeSelectionBackground#3A81C340
  • list.activeSelectionForeground#1E3A5B
  • list.focusBackground#3A81C340
  • list.highlightForeground#3A81C3
  • list.hoverBackground#3A81C320
  • minimap.background#F0F9FF
  • minimapSlider.activeBackground#3A81C566
  • minimapSlider.background#3A81C522
  • minimapSlider.hoverBackground#3A81C544
  • panel.background#F5FCFF
  • panel.border#3A81C3
  • panelTitle.activeBorder#3A81C3
  • panelTitle.activeForeground#1E3A5B
  • panelTitle.inactiveForeground#7A99B8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7A99B8AA
  • scrollbarSlider.background#7A99B444
  • scrollbarSlider.hoverBackground#7A99B488
  • sideBar.background#E0F3FF
  • sideBar.foreground#1E3A5B
  • sideBarSectionHeader.background#D4EDFF
  • sideBarSectionHeader.foreground#3A81C3
  • sideBarTitle.foreground#3A81C3
  • statusBar.background#CCE9FF
  • statusBar.debuggingBackground#3A81C3
  • statusBar.foreground#1E3A5B
  • statusBar.noFolderBackground#E6F4FF
  • statusBarItem.hoverBackground#B8DEFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#3A81C3
  • tab.activeForeground#1E3A5B
  • tab.border#CCE9FF
  • tab.inactiveBackground#F5FCFF
  • tab.inactiveForeground#7A99B8
  • terminal.ansiBlue#3A81C3
  • terminal.ansiBrightBlue#5FA6E0
  • terminal.ansiBrightCyan#8BD8E5
  • terminal.ansiBrightGreen#80E0A2
  • terminal.ansiBrightMagenta#D19EF5
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFE98E
  • terminal.ansiCyan#5CC0E0
  • terminal.ansiGreen#6BCB8D
  • terminal.ansiMagenta#B983D9
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#F5C061
  • terminal.background#F0F9FF
  • terminal.foreground#1E3A5B
  • titleBar.activeBackground#E6F4FF
  • titleBar.activeForeground#1E3A5B
  • titleBar.inactiveBackground#F5FCFF
  • titleBar.inactiveForeground#7A99B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#00BFFF—
keyword, storage.type, storage.modifier#A3D4E5bold
keyword.operator, punctuation.accessor#7FA9B2—
variable, variable.other#2C3E50—
variable.parameter#7FA9B2italic
entity.name.function, support.function#5A9BD8—
meta.function-call#5A9BD8—
entity.name.class, entity.name.type.class, support.class#3B6FA0bold
entity.name.type, support.type#3B6FA0—
entity.name.type.interface#6CA0E0italic
constant.numeric#FF8C00—
constant, constant.language, constant.character#FFB400—
constant.language.boolean#FF8C00bold
variable.other.property, support.variable.property#7FA9B2—
meta.object-literal.key#A3D4E5—
entity.name.tag, punctuation.definition.tag#A3D4E5—
entity.other.attribute-name#8E6C9Citalic
punctuation, meta.brace#2C3E50—
string.regexp#FF6F61—
constant.character.escape#FF6F61—
meta.decorator, punctuation.decorator#FFC107—
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#A3D4E5bold
markup.bold#FFB400bold
markup.italic#8E6C9Citalic
markup.underline.link#7FA9B2—
markup.inline.raw, markup.fenced_code#00BFFF—
support.type.property-name.json#A3D4E5—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD54F—
support.type.property-name.css#5A9BD8—
support.constant.property-value.css#00BFFF—