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#3B8EDC
  • activityBar.background#E6F3FF
  • activityBar.foreground#3B8EDC
  • activityBarBadge.background#3B8EDC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3B8EDC
  • badge.foreground#1E2B3C
  • button.background#5A9BD5
  • button.foreground#FFFFFF
  • button.hoverBackground#5A9BD5AA
  • dropdown.background#E8F9FF
  • dropdown.border#3B8EDC
  • dropdown.foreground#1E2B3C
  • editor.background#F0F8FF
  • editor.findMatchBackground#4FC1A580
  • editor.findMatchHighlightBackground#4FC1A540
  • editor.foreground#1E2B3C
  • editor.lineHighlightBackground#E8F9FF33
  • editor.lineHighlightBorder#3B8EDC
  • editor.selectionBackground#C2E0FF
  • editor.selectionHighlightBackground#3B8ED940
  • editorBracketMatch.background#4FC1A533
  • editorBracketMatch.border#4FC1A5
  • editorCursor.foreground#1E2B3C
  • editorGroupHeader.tabsBackground#E8F9FF
  • editorIndentGuide.activeBackground#3B8EDC
  • editorIndentGuide.background#C0DFF544
  • editorLineNumber.activeForeground#1E2B3C
  • editorLineNumber.foreground#7A8B9C
  • editorWhitespace.foreground#7A8B9C
  • focusBorder#3B8EDC
  • gitDecoration.conflictingResourceForeground#E5C07B
  • gitDecoration.deletedResourceForeground#D96C6C
  • gitDecoration.modifiedResourceForeground#3B8EDC
  • gitDecoration.untrackedResourceForeground#5A9BD5
  • input.background#E8F9FF
  • input.border#3B8EDC
  • input.foreground#1E2B3C
  • input.placeholderForeground#7A8B9C
  • inputOption.activeBorder#5A9BD5
  • list.activeSelectionBackground#C2E0FF
  • list.activeSelectionForeground#1E2B3C
  • list.focusBackground#C2E0FF
  • list.highlightForeground#5A9BD5
  • list.hoverBackground#C2E0FF66
  • minimap.background#F0F8FF
  • minimapSlider.activeBackground#3B8ED966
  • minimapSlider.background#3B8ED922
  • minimapSlider.hoverBackground#3B8ED944
  • panel.background#F0F8FF
  • panel.border#3B8EDC
  • panelTitle.activeBorder#5A9BD5
  • panelTitle.activeForeground#1E2B3C
  • panelTitle.inactiveForeground#7A8B9C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3B8ED9CC
  • scrollbarSlider.background#3B8ED944
  • scrollbarSlider.hoverBackground#3B8ED988
  • sideBar.background#E8F9FF
  • sideBar.foreground#1E2B3C
  • sideBarSectionHeader.background#E6F3FF
  • sideBarSectionHeader.foreground#5A9BD5
  • sideBarTitle.foreground#3B8EDC
  • statusBar.background#5A9BD5
  • statusBar.debuggingBackground#4FC1A5
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#3B8EDC
  • statusBarItem.hoverBackground#3B8EDCAA
  • tab.activeBackground#D2EDFF
  • tab.activeBorder#5A9BD5
  • tab.activeForeground#1E2B3C
  • tab.border#C0DFF5
  • tab.inactiveBackground#E8F9FF
  • tab.inactiveForeground#7A8B9C
  • terminal.ansiBlue#3B8EDC
  • terminal.ansiBrightBlue#B8E0FF
  • terminal.ansiBrightCyan#A7F0F0
  • terminal.ansiBrightGreen#9FD9C8
  • terminal.ansiBrightMagenta#B8A0FF
  • terminal.ansiBrightRed#FF7F7F
  • terminal.ansiBrightYellow#FFF5A0
  • terminal.ansiCyan#4FC1A5
  • terminal.ansiGreen#5A9BD5
  • terminal.ansiMagenta#9E6AFF
  • terminal.ansiRed#D96C6C
  • terminal.ansiYellow#E5C07B
  • terminal.background#F0F8FF
  • terminal.foreground#1E2B3C
  • titleBar.activeBackground#D2EDFF
  • titleBar.activeForeground#1E2B3C
  • titleBar.inactiveBackground#F0F8FF
  • titleBar.inactiveForeground#3B8EDC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8B9Citalic
string, string.quoted, string.template#4FC1A5
keyword, storage.type, storage.modifier#3B8EDCbold
keyword.operator, punctuation.accessor#5A9BD5
variable, variable.other#1E2B3C
variable.parameter#5A9BD5italic
entity.name.function, support.function#4FC1A5
meta.function-call#3B8EDC
entity.name.class, entity.name.type.class, support.class#5A9BD5bold
entity.name.type, support.type#3B8EDC
entity.name.type.interface#4FC1A5italic
constant.numeric#5A9BD5
constant, constant.language, constant.character#E5C07B
constant.language.boolean#D96C6Cbold
variable.other.property, support.variable.property#4FC1A5
meta.object-literal.key#3B8EDC
entity.name.tag, punctuation.definition.tag#5A9BD5
entity.other.attribute-name#4FC1A5italic
punctuation, meta.brace#3B8EDC
string.regexp#4FC1A5
constant.character.escape#5A9BD5
meta.decorator, punctuation.decorator#E5C07B
invalid, invalid.illegal#D96C6Cstrikethrough
markup.heading, entity.name.section#5A9BD5bold
markup.bold#D96C6Cbold
markup.italic#5A9BD5italic
markup.underline.link#3B8EDC
markup.inline.raw, markup.fenced_code#4FC1A5
support.type.property-name.json#3B8EDC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E5C07B
support.type.property-name.css#3B8EDC
support.constant.property-value.css#4FC1A5