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#B8860B
  • activityBar.background#F5F4EF
  • activityBar.foreground#2E2B28
  • activityBarBadge.background#B8860B
  • activityBarBadge.foreground#FAF9F5
  • badge.background#B8860B
  • badge.foreground#FAF9F5
  • button.background#5A6A93
  • button.foreground#FAF9F5
  • button.hoverBackground#5A6A93AA
  • dropdown.background#F5F4EF
  • dropdown.border#E2E0DB
  • dropdown.foreground#2E2B28
  • editor.background#FAF9F5
  • editor.findMatchBackground#B8860B44
  • editor.findMatchHighlightBackground#B8860B22
  • editor.foreground#2E2B28
  • editor.lineHighlightBackground#EDEAE5CC
  • editor.lineHighlightBorder#B8860B33
  • editor.selectionBackground#B0C4DE33
  • editor.selectionHighlightBackground#B0C4DE22
  • editorBracketMatch.background#B8860B33
  • editorBracketMatch.border#B8860B
  • editorCursor.foreground#2E2B28
  • editorGroupHeader.tabsBackground#F5F4EF
  • editorIndentGuide.activeBackground#5A6A93
  • editorIndentGuide.background#E2E0DB
  • editorLineNumber.activeForeground#2E2B28
  • editorLineNumber.foreground#A09F9B
  • editorWhitespace.foreground#D0CDC7
  • focusBorder#B8860B
  • gitDecoration.conflictingResourceForeground#D4A017
  • gitDecoration.deletedResourceForeground#C84C4C
  • gitDecoration.modifiedResourceForeground#256F62
  • gitDecoration.untrackedResourceForeground#2A7F62
  • input.background#F5F4EF
  • input.border#E2E0DB
  • input.foreground#2E2B28
  • input.placeholderForeground#A09F9B
  • inputOption.activeBorder#B8860B
  • list.activeSelectionBackground#B8860B
  • list.activeSelectionForeground#FAF9F5
  • list.focusBackground#B8860B66
  • list.highlightForeground#B8860B
  • list.hoverBackground#B8860B66
  • minimap.background#FAF9F5
  • minimapSlider.activeBackground#5A6A93CC
  • minimapSlider.background#5A6A9344
  • minimapSlider.hoverBackground#5A6A9388
  • panel.background#FAF9F5
  • panel.border#E2E0DB
  • panelTitle.activeBorder#B8860B
  • panelTitle.activeForeground#2E2B28
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B8860B88
  • scrollbarSlider.background#C0BFB844
  • scrollbarSlider.hoverBackground#C0BFB888
  • sideBar.background#F2F1EC
  • sideBar.foreground#2E2B28
  • sideBarSectionHeader.background#F5F4EF
  • sideBarSectionHeader.foreground#2E2B28
  • sideBarTitle.foreground#2E2B28
  • statusBar.background#B8860B
  • statusBar.debuggingBackground#256F62
  • statusBar.foreground#FAF9F5
  • statusBar.noFolderBackground#5A6A93
  • statusBarItem.hoverBackground#B8860B80
  • tab.activeBackground#FAF9F5
  • tab.activeBorder#B8860B
  • tab.activeForeground#2E2B28
  • tab.border#E2E0DB
  • tab.inactiveBackground#F2F1EC
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#5A6A93
  • terminal.ansiBrightBlue#7B9EC6
  • terminal.ansiBrightCyan#4FA78D
  • terminal.ansiBrightGreen#5F9E6A
  • terminal.ansiBrightMagenta#C58AD1
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#256F62
  • terminal.ansiGreen#2A7F62
  • terminal.ansiMagenta#A074C4
  • terminal.ansiRed#C84C4C
  • terminal.ansiYellow#D4A017
  • terminal.background#FAF9F5
  • terminal.foreground#2E2B28
  • titleBar.activeBackground#FAF9F5
  • titleBar.activeForeground#2E2B28
  • titleBar.inactiveBackground#F2F1EC
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E8E8Eitalic
string, string.quoted, string.template#0A7F71
keyword, storage.type, storage.modifier#D4AF37bold
keyword.operator, punctuation.accessor#6C7A89
variable, variable.other#212121
variable.parameter#6C7A89italic
entity.name.function, support.function#D4AF37
meta.function-call#BFA74C
entity.name.class, entity.name.type.class, support.class#D4AF37bold
entity.name.type, support.type#6C7A89
entity.name.type.interface#D4AF37italic
constant.numeric#0A7F71
constant, constant.language, constant.character#6C7A89
constant.language.boolean#D4AF37bold
variable.other.property, support.variable.property#6C7A89
meta.object-literal.key#D4AF37
entity.name.tag, punctuation.definition.tag#D4AF37
entity.other.attribute-name#6C7A89italic
punctuation, meta.brace#6C7A89
string.regexp#0A7F71
constant.character.escape#D4AF37
meta.decorator, punctuation.decorator#D4AF37
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#D4AF37bold
markup.bold#D4AF37bold
markup.italic#6C7A89italic
markup.underline.link#D4AF37
markup.inline.raw, markup.fenced_code#0A7F71
support.type.property-name.json#D4AF37
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6C7A89
support.type.property-name.css#D4AF37
support.constant.property-value.css#0A7F71