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—