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#A3B97F
  • activityBar.background#E5F2F9
  • activityBar.foreground#2A5D78
  • activityBarBadge.background#A3B97F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#F5C542
  • badge.foreground#333333
  • button.background#A3B97F
  • button.foreground#FFFFFF
  • button.hoverBackground#8FAE6F
  • dropdown.background#FFFFFF
  • dropdown.border#A0D8F1
  • dropdown.foreground#333333
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFF59D
  • editor.findMatchHighlightBackground#FFF9C4
  • editor.foreground#333333
  • editor.lineHighlightBackground#E0F4FF
  • editor.lineHighlightBorder#A0D8F1
  • editor.selectionBackground#CDE8FF
  • editor.selectionHighlightBackground#E5F5FF
  • editorBracketMatch.background#D0E8FF
  • editorBracketMatch.border#A0D8F1
  • editorCursor.foreground#2A5D78
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#A0D8F1
  • editorIndentGuide.background#DDDDDD
  • editorLineNumber.activeForeground#2A5D78
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#A3B97F
  • gitDecoration.conflictingResourceForeground#A07FA3
  • gitDecoration.deletedResourceForeground#D66F6F
  • gitDecoration.modifiedResourceForeground#7AAE5E
  • gitDecoration.untrackedResourceForeground#5DA9B4
  • input.background#FFFFFF
  • input.border#A0D8F1
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#A3B97F
  • list.activeSelectionBackground#CDE8FF
  • list.activeSelectionForeground#2A5D78
  • list.focusBackground#D0E8FF
  • list.highlightForeground#A3B97F
  • list.hoverBackground#E5F2F9
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#AAAAAAAA
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#BBBBBB99
  • panel.background#FAFAFA
  • panel.border#E5E5E5
  • panelTitle.activeBorder#A3B97F
  • panelTitle.activeForeground#2A5D78
  • panelTitle.inactiveForeground#666666
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackground#AAAAAAAA
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB99
  • sideBar.background#F0F8FF
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E5F2F9
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#2A5D78
  • statusBar.background#A3B97F
  • statusBar.debuggingBackground#F5C542
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#A0D8F1
  • statusBarItem.hoverBackground#8FAE6F
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#A3B97F
  • tab.activeForeground#2A5D78
  • tab.border#E5E5E5
  • tab.inactiveBackground#F0F8FF
  • tab.inactiveForeground#666666
  • terminal.ansiBlue#2A5D78
  • terminal.ansiBrightBlue#3B78A0
  • terminal.ansiBrightCyan#71B9C4
  • terminal.ansiBrightGreen#8DC56A
  • terminal.ansiBrightMagenta#B18FBE
  • terminal.ansiBrightRed#E58B8B
  • terminal.ansiBrightYellow#F8D063
  • terminal.ansiCyan#5DA9B4
  • terminal.ansiGreen#7AAE5E
  • terminal.ansiMagenta#A07FA3
  • terminal.ansiRed#D66F6F
  • terminal.ansiYellow#F5C542
  • terminal.background#FAFAFA
  • terminal.foreground#333333
  • titleBar.activeBackground#A0D8F1
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#C5E0EF
  • titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#7AAE5E
keyword, storage.type, storage.modifier#2A5D78bold
keyword.operator, punctuation.accessor#2A5D78
variable, variable.other#333333
variable.parameter#5DA9B4italic
entity.name.function, support.function#A07FA3
meta.function-call#A07FA3
entity.name.class, entity.name.type.class, support.class#A0D8F1bold
entity.name.type, support.type#5DA9B4
entity.name.type.interface#5DA9B4italic
constant.numeric#D66F6F
constant, constant.language, constant.character#D66F6F
constant.language.boolean#D66F6Fbold
variable.other.property, support.variable.property#7AAE5E
meta.object-literal.key#A0D8F1
entity.name.tag, punctuation.definition.tag#A07FA3
entity.other.attribute-name#5DA9B4italic
punctuation, meta.brace#999999
string.regexp#F5C542
constant.character.escape#D66F6F
meta.decorator, punctuation.decorator#A07FA3
invalid, invalid.illegal#D66F6Fstrikethrough
markup.heading, entity.name.section#2A5D78bold
markup.bold#2A5D78bold
markup.italic#2A5D78italic
markup.underline.link#A0D8F1
markup.inline.raw, markup.fenced_code#7AAE5E
support.type.property-name.json#A0D8F1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A07FA3
support.type.property-name.css#7AAE5E
support.constant.property-value.css#D66F6F