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#5FA8D3
  • activityBar.background#E0EFF9
  • activityBar.foreground#345B78
  • activityBarBadge.background#5FA8D3
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5FA8D3
  • badge.foreground#FFFFFF
  • button.background#A1D6FF
  • button.foreground#2C3E50
  • button.hoverBackground#5FA8D3
  • dropdown.background#E8F3FF
  • dropdown.border#D4E8F7
  • dropdown.foreground#2C3E50
  • editor.background#F5FAFF
  • editor.findMatchBackground#5FA8D844
  • editor.findMatchHighlightBackground#5FA8D822
  • editor.foreground#2C3E50
  • editor.lineHighlightBackground#D9EBFF40
  • editor.lineHighlightBorder#D9EBFF80
  • editor.selectionBackground#A1D6FF55
  • editor.selectionHighlightBackground#A1D6FF33
  • editorBracketMatch.background#5FA8D833
  • editorBracketMatch.border#5FA8D8
  • editorCursor.foreground#5FA8D3
  • editorGroupHeader.tabsBackground#E0EFF9
  • editorIndentGuide.activeBackground#B0C4D680
  • editorIndentGuide.background#B0C4D640
  • editorLineNumber.activeForeground#5FA8D3
  • editorLineNumber.foreground#A0B9C9
  • editorWhitespace.foreground#B0C4D6
  • focusBorder#5FA8D3
  • gitDecoration.conflictingResourceForeground#d19a66
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#61AFEF
  • gitDecoration.untrackedResourceForeground#98C379
  • input.background#E8F3FF
  • input.border#D4E8F7
  • input.foreground#2C3E50
  • input.placeholderForeground#A0B9C9
  • inputOption.activeBorder#5FA8D3
  • list.activeSelectionBackground#D4E8F7
  • list.activeSelectionForeground#2C3E50
  • list.focusBackground#D4E8F7
  • list.highlightForeground#5FA8D3
  • list.hoverBackground#D4E8F766
  • minimap.background#F5FAFF
  • minimapSlider.activeBackground#5FA8D566
  • minimapSlider.background#5FA8D522
  • minimapSlider.hoverBackground#5FA8D544
  • panel.background#F5FAFF
  • panel.border#D4E8F7
  • panelTitle.activeBorder#5FA8D3
  • panelTitle.activeForeground#5FA8D3
  • panelTitle.inactiveForeground#7A8A99
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#B0C4D6AA
  • scrollbarSlider.background#B0C4D644
  • scrollbarSlider.hoverBackground#B0C4D688
  • sideBar.background#E8F3FF
  • sideBar.foreground#345B78
  • sideBarSectionHeader.background#E0EFF9
  • sideBarSectionHeader.foreground#345B78
  • sideBarTitle.foreground#5FA8D3
  • statusBar.background#D4E8F7
  • statusBar.debuggingBackground#A1D6FF
  • statusBar.foreground#2C3E50
  • statusBar.noFolderBackground#E0EFF9
  • statusBarItem.hoverBackground#A1D6FF80
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#5FA8D3
  • tab.activeForeground#2C3E50
  • tab.border#D0DDEB
  • tab.inactiveBackground#E8F3FF
  • tab.inactiveForeground#7A8A99
  • terminal.ansiBlue#5FA8D3
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#ff6c6b
  • terminal.ansiBrightYellow#d19a66
  • terminal.ansiCyan#0FA9A9
  • terminal.ansiGreen#56C19A
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#E5C07B
  • terminal.background#F5FAFF
  • terminal.foreground#2C3E50
  • titleBar.activeBackground#E0EFF9
  • titleBar.activeForeground#2C3E50
  • titleBar.inactiveBackground#D4E8F7
  • titleBar.inactiveForeground#7A8A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8A99italic
string, string.quoted, string.template#0FA9A9
keyword, storage.type, storage.modifier#5FA8D3bold
keyword.operator, punctuation.accessor#A0B9C9
variable, variable.other#2C3E50
variable.parameter#6A7A8Fitalic
entity.name.function, support.function#61AFEF
meta.function-call#56B6C2
entity.name.class, entity.name.type.class, support.class#345B78bold
entity.name.type, support.type#5FA8D3
entity.name.type.interface#0FA9A9italic
constant.numeric#D19A66
constant, constant.language, constant.character#E5C07B
constant.language.boolean#D19A66bold
variable.other.property, support.variable.property#56B6C2
meta.object-literal.key#61AFEF
entity.name.tag, punctuation.definition.tag#A0B9C9
entity.other.attribute-name#c678dditalic
punctuation, meta.brace#A0B9C9
string.regexp#98C379
constant.character.escape#c678dd
meta.decorator, punctuation.decorator#E5C07B
invalid, invalid.illegal#FF5370strikethrough
markup.heading, entity.name.section#5FA8D3bold
markup.bold#E5C07Bbold
markup.italic#c678dditalic
markup.underline.link#61AFEF
markup.inline.raw, markup.fenced_code#0FA9A9
support.type.property-name.json#61AFEF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E5C07B
support.type.property-name.css#61AFEF
support.constant.property-value.css#98C379