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—