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#3A8EDC
  • activityBar.background#E3EFFB
  • activityBar.foreground#2E3A5C
  • activityBarBadge.background#3A8EDC
  • activityBarBadge.foreground#F5F9FF
  • badge.background#3A8EDC
  • badge.foreground#F5F9FF
  • button.background#3A8EDC
  • button.foreground#FFFFFF
  • button.hoverBackground#5FA9FF
  • dropdown.background#E3EFFB
  • dropdown.border#3A8EDC
  • dropdown.foreground#2E3A5C
  • editor.background#F5F9FF
  • editor.findMatchBackground#3A8EDC44
  • editor.findMatchHighlightBackground#3A8EDC22
  • editor.foreground#2E3A5C
  • editor.lineHighlightBackground#3A8EDC20
  • editor.lineHighlightBorder#3A8EDC40
  • editor.selectionBackground#3A8EDC55
  • editor.selectionHighlightBackground#3A8EDC33
  • editorBracketMatch.background#3A8EDC33
  • editorBracketMatch.border#3A8EDC
  • editorCursor.foreground#3A8EDC
  • editorGroupHeader.tabsBackground#E3EFFB
  • editorIndentGuide.activeBackground#A8B2C6AA
  • editorIndentGuide.background#A8B2C633
  • editorLineNumber.activeForeground#3A8EDC
  • editorLineNumber.foreground#A8B2C6
  • editorWhitespace.foreground#A8B2C6
  • focusBorder#3A8EDC
  • gitDecoration.conflictingResourceForeground#D8AA5A
  • gitDecoration.deletedResourceForeground#C75D5D
  • gitDecoration.modifiedResourceForeground#3A8EDC
  • gitDecoration.untrackedResourceForeground#6CA68F
  • input.background#E3EFFB
  • input.border#3A8EDC
  • input.foreground#2E3A5C
  • input.placeholderForeground#A8B2C6
  • inputOption.activeBorder#3A8EDC
  • list.activeSelectionBackground#3A8EDC55
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3A8EDC44
  • list.highlightForeground#3A8EDC
  • list.hoverBackground#3A8EDC33
  • minimap.background#F5F9FF
  • minimapSlider.activeBackground#3A8EDC66
  • minimapSlider.background#3A8EDC22
  • minimapSlider.hoverBackground#3A8EDC44
  • panel.background#F5F9FF
  • panel.border#D0E4F7
  • panelTitle.activeBorder#3A8EDC
  • panelTitle.activeForeground#3A8EDC
  • panelTitle.inactiveForeground#A8B2C6
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A8EDC88
  • scrollbarSlider.background#A8B2C544
  • scrollbarSlider.hoverBackground#A8B2C588
  • sideBar.background#E3EFFB
  • sideBar.foreground#2E3A5C
  • sideBarSectionHeader.background#E3EFFB
  • sideBarSectionHeader.foreground#3A8EDC
  • sideBarTitle.foreground#2E3A5C
  • statusBar.background#D0E4F7
  • statusBar.debuggingBackground#3A8EDC
  • statusBar.foreground#2E3A5C
  • statusBar.noFolderBackground#E3EFFB
  • statusBarItem.hoverBackground#3A8EDC55
  • tab.activeBackground#D0E4F7
  • tab.activeBorder#3A8EDC
  • tab.activeForeground#2E3A5C
  • tab.border#F5F9FF
  • tab.inactiveBackground#E3EFFB
  • tab.inactiveForeground#A8B2C6
  • terminal.ansiBlue#3A8EDC
  • terminal.ansiBrightBlue#5FA9FF
  • terminal.ansiBrightCyan#7AB4A2
  • terminal.ansiBrightGreen#7AB4A2
  • terminal.ansiBrightMagenta#9FA9D4
  • terminal.ansiBrightRed#FF6F6F
  • terminal.ansiBrightYellow#FFDF70
  • terminal.ansiCyan#7AB4A2
  • terminal.ansiGreen#6CA68F
  • terminal.ansiMagenta#A8B2C6
  • terminal.ansiRed#C75D5D
  • terminal.ansiYellow#D8AA5A
  • terminal.background#F5F9FF
  • terminal.foreground#2E3A5C
  • titleBar.activeBackground#E3EFFB
  • titleBar.activeForeground#2E3A5C
  • titleBar.inactiveBackground#F5F9FF
  • titleBar.inactiveForeground#A8B2C6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8B2C6italic
string, string.quoted, string.template#6CA68F
keyword, storage.type, storage.modifier#3A8EDCbold
keyword.operator, punctuation.accessor#7AB4A2
variable, variable.other#2E3A5C
variable.parameter#D8AA5Aitalic
entity.name.function, support.function#5FA9FF
meta.function-call#81C0FF
entity.name.class, entity.name.type.class, support.class#81C0FFbold
entity.name.type, support.type#81C0FF
entity.name.type.interface#A1C9FFitalic
constant.numeric#D8AA5A
constant, constant.language, constant.character#D8AA5A
constant.language.boolean#D8AA5Abold
variable.other.property, support.variable.property#6CA68F
meta.object-literal.key#6CA68F
entity.name.tag, punctuation.definition.tag#3A8EDC
entity.other.attribute-name#7AB4A2italic
punctuation, meta.brace#7AB4A2
string.regexp#6CA68F
constant.character.escape#7AB4A2
meta.decorator, punctuation.decorator#D8AA5A
invalid, invalid.illegal#C75D5Dstrikethrough
markup.heading, entity.name.section#3A8EDCbold
markup.bold#D8AA5Abold
markup.italic#7AB4A2italic
markup.underline.link#5FA9FF
markup.inline.raw, markup.fenced_code#6CA68F
support.type.property-name.json#3A8EDC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D8AA5A
support.type.property-name.css#6CA68F
support.constant.property-value.css#5FA9FF