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#D4AF37
  • activityBar.background#F5E9D5
  • activityBar.foreground#2E2B28
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#FAF4E6
  • badge.background#A61E2D
  • badge.foreground#FAF4E6
  • button.background#D4AF37
  • button.foreground#FAF4E6
  • button.hoverBackground#C9A437
  • dropdown.background#FFFFFF
  • dropdown.border#D4AF37
  • dropdown.foreground#2E2B28
  • editor.background#FAF4E6
  • editor.findMatchBackground#A61E2D80
  • editor.findMatchHighlightBackground#A61E2D40
  • editor.foreground#2E2B28
  • editor.lineHighlightBackground#FFF9E6
  • editor.lineHighlightBorder#D4AF37
  • editor.selectionBackground#C9A43780
  • editor.selectionHighlightBackground#E5D5B580
  • editorBracketMatch.background#FFF4C4
  • editorBracketMatch.border#D4AF37
  • editorCursor.foreground#A61E2D
  • editorGroupHeader.tabsBackground#F5E9D5
  • editorIndentGuide.activeBackground#A61E2D
  • editorIndentGuide.background#D0CBC5
  • editorLineNumber.activeForeground#2E2B28
  • editorLineNumber.foreground#8A837E
  • editorWhitespace.foreground#C0B9B2
  • focusBorder#A61E2D
  • gitDecoration.conflictingResourceForeground#A61E2D
  • gitDecoration.deletedResourceForeground#B0304B
  • gitDecoration.modifiedResourceForeground#3B6C48
  • gitDecoration.untrackedResourceForeground#6A9C8B
  • input.background#FFFFFF
  • input.border#D4AF37
  • input.foreground#2E2B28
  • input.placeholderForeground#8A837E
  • inputOption.activeBorder#A61E2D
  • list.activeSelectionBackground#C9A437
  • list.activeSelectionForeground#FAF4E6
  • list.focusBackground#C9A437
  • list.highlightForeground#A61E2D
  • list.hoverBackground#E5D5B5
  • minimap.background#FAF4E6
  • minimapSlider.activeBackground#C0B9B2FF
  • minimapSlider.background#C0B9B2AA
  • minimapSlider.hoverBackground#C0B9B2CC
  • panel.background#F5E9D5
  • panel.border#D4AF37
  • panelTitle.activeBorder#A61E2D
  • panelTitle.activeForeground#2E2B28
  • panelTitle.inactiveForeground#8A837E
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#C0B9B2AA
  • scrollbarSlider.background#C0B9B226
  • scrollbarSlider.hoverBackground#C0B9B266
  • sideBar.background#F5E9D5
  • sideBar.foreground#2E2B28
  • sideBarSectionHeader.background#EAE0CF
  • sideBarSectionHeader.foreground#2E2B28
  • sideBarTitle.foreground#2E2B28
  • statusBar.background#D4AF37
  • statusBar.debuggingBackground#A61E2D
  • statusBar.foreground#2E2B28
  • statusBar.noFolderBackground#EAE0CF
  • statusBarItem.hoverBackground#C9A437
  • tab.activeBackground#FAF4E6
  • tab.activeBorder#A61E2D
  • tab.activeForeground#2E2B28
  • tab.border#D4AF37
  • tab.inactiveBackground#F5E9D5
  • tab.inactiveForeground#8A837E
  • terminal.ansiBlue#3B6C48
  • terminal.ansiBrightBlue#5A8F6A
  • terminal.ansiBrightCyan#81B9A5
  • terminal.ansiBrightGreen#4E9A44
  • terminal.ansiBrightMagenta#C4475A
  • terminal.ansiBrightRed#D04B5C
  • terminal.ansiBrightYellow#E6C44D
  • terminal.ansiCyan#6A9C8B
  • terminal.ansiGreen#3C7A31
  • terminal.ansiMagenta#A61E2D
  • terminal.ansiRed#B0304B
  • terminal.ansiYellow#D4AF37
  • terminal.background#FAF4E6
  • terminal.foreground#2E2B28
  • titleBar.activeBackground#EAE0CF
  • titleBar.activeForeground#2E2B28
  • titleBar.inactiveBackground#F5E9D5
  • titleBar.inactiveForeground#8A837E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A837Eitalic
string, string.quoted, string.template#D4AF37
keyword, storage.type, storage.modifier#A61E2Dbold
keyword.operator, punctuation.accessor#3B6C48
variable, variable.other#2E2B28
variable.parameter#6A9C8Bitalic
entity.name.function, support.function#3C7A31
meta.function-call#3C7A31
entity.name.class, entity.name.type.class, support.class#A61E2Dbold
entity.name.type, support.type#3B6C48
entity.name.type.interface#3B6C48italic
constant.numeric#B0304B
constant, constant.language, constant.character#B0304B
constant.language.boolean#A61E2Dbold
variable.other.property, support.variable.property#6A9C8B
meta.object-literal.key#6A9C8B
entity.name.tag, punctuation.definition.tag#A61E2D
entity.other.attribute-name#6A9C8Bitalic
punctuation, meta.brace#2E2B28
string.regexp#3C7A31
constant.character.escape#B0304B
meta.decorator, punctuation.decorator#3B6C48
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#A61E2Dbold
markup.bold#A61E2Dbold
markup.italic#6A9C8Bitalic
markup.underline.link#3B6C48
markup.inline.raw, markup.fenced_code#D4AF37
support.type.property-name.json#3B6C48
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A61E2D
support.type.property-name.css#3C7A31
support.constant.property-value.css#D4AF37