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