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#3A90C8
  • activityBar.background#F0EFEA
  • activityBar.foreground#5A7D9A
  • activityBarBadge.background#3A90C8
  • activityBarBadge.foreground#FAF9F6
  • badge.background#5A7D9A
  • badge.foreground#FAF9F6
  • button.background#5A7D9A
  • button.foreground#FAF9F6
  • button.hoverBackground#5A7D9ACC
  • dropdown.background#F5F4F0
  • dropdown.border#5A7D9A
  • dropdown.foreground#2E2E2E
  • editor.background#FAF9F6
  • editor.findMatchBackground#FFB57840
  • editor.findMatchHighlightBackground#FFB57820
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#3A90C820
  • editor.lineHighlightBorder#3A90C860
  • editor.selectionBackground#5A7D9F40
  • editor.selectionHighlightBackground#5A7D9F30
  • editorBracketMatch.background#5A7D9F33
  • editorBracketMatch.border#5A7D9F
  • editorCursor.foreground#3A90C8
  • editorGroupHeader.tabsBackground#F0EFEA
  • editorIndentGuide.activeBackground#CCCCCC66
  • editorIndentGuide.background#CCCCCC33
  • editorLineNumber.activeForeground#5A7D9A
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#5A7D9A
  • gitDecoration.conflictingResourceForeground#EECB71
  • gitDecoration.deletedResourceForeground#D77569
  • gitDecoration.modifiedResourceForeground#5A7D9A
  • gitDecoration.untrackedResourceForeground#88C0A0
  • input.background#F5F4F0
  • input.border#5A7D9A
  • input.foreground#2E2E2E
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#5A7D9A
  • list.activeSelectionBackground#5A7D9A
  • list.activeSelectionForeground#FAF9F6
  • list.focusBackground#5A7D9A
  • list.highlightForeground#5A7D9A
  • list.hoverBackground#5A7D9A33
  • minimap.background#FAF9F6
  • minimapSlider.activeBackground#5A7D9A66
  • minimapSlider.background#5A7D9A22
  • minimapSlider.hoverBackground#5A7D9A44
  • panel.background#FAF9F6
  • panel.border#5A7D9A
  • panelTitle.activeBorder#5A7D9A
  • panelTitle.activeForeground#5A7D9A
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#5A7D9A88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC66
  • sideBar.background#F5F4F0
  • sideBar.foreground#3C3C3C
  • sideBarSectionHeader.background#F0EFEA
  • sideBarSectionHeader.foreground#5A7D9A
  • sideBarTitle.foreground#5A7D9A
  • statusBar.background#DDE3ED
  • statusBar.debuggingBackground#3A90C8
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#F0EFEA
  • statusBarItem.hoverBackground#3A90C822
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#3A90C8
  • tab.activeForeground#2E2E2E
  • tab.border#E0DFDC
  • tab.inactiveBackground#F5F4F0
  • tab.inactiveForeground#666666
  • terminal.ansiBlue#5A7D9A
  • terminal.ansiBrightBlue#6EAEDC
  • terminal.ansiBrightCyan#99D4E8
  • terminal.ansiBrightGreen#A3D9B7
  • terminal.ansiBrightMagenta#D6A5E0
  • terminal.ansiBrightRed#EF8A81
  • terminal.ansiBrightYellow#F7D27E
  • terminal.ansiCyan#7ABCC2
  • terminal.ansiGreen#88C0A0
  • terminal.ansiMagenta#C594C5
  • terminal.ansiRed#D77569
  • terminal.ansiYellow#EECB71
  • terminal.background#FAF9F6
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#F0EFEA
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#E8E7E3
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#FFB578
keyword, storage.type, storage.modifier#5A7D9Abold
keyword.operator, punctuation.accessor#5A7D9F
variable, variable.other#2E2E2E
variable.parameter#5A7D9Aitalic
entity.name.function, support.function#88C0A0
meta.function-call#5A7D9A
entity.name.class, entity.name.type.class, support.class#C594C5bold
entity.name.type, support.type#EECB71
entity.name.type.interface#7ABCC2italic
constant.numeric#FFB578
constant, constant.language, constant.character#FFB578
constant.language.boolean#FFB578bold
variable.other.property, support.variable.property#5A7D9A
meta.object-literal.key#5A7D9A
entity.name.tag, punctuation.definition.tag#5A7D9A
entity.other.attribute-name#C594C5italic
punctuation, meta.brace#5A7D9A
string.regexp#88C0A0
constant.character.escape#C594C5
meta.decorator, punctuation.decorator#EECB71
invalid, invalid.illegal#EF8A81strikethrough
markup.heading, entity.name.section#5A7D9Abold
markup.bold#EECB71bold
markup.italic#7ABCC2italic
markup.underline.link#5A7D9A
markup.inline.raw, markup.fenced_code#88C0A0
support.type.property-name.json#5A7D9A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#EECB71
support.type.property-name.css#88C0A0
support.constant.property-value.css#7ABCC2