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#C84F57
  • activityBar.background#F5E9E5
  • activityBar.foreground#C84F57
  • activityBarBadge.background#C84F57
  • activityBarBadge.foreground#FFF7F2
  • badge.background#C84F57
  • badge.foreground#FFF7F2
  • button.background#C84F57
  • button.foreground#FFFFFF
  • button.hoverBackground#D86A5B
  • dropdown.background#FFFFFF
  • dropdown.border#C0B4AF
  • dropdown.foreground#2B2A28
  • editor.background#FFF7F2
  • editor.findMatchBackground#C84F4477
  • editor.findMatchHighlightBackground#C84F4455
  • editor.foreground#2B2A28
  • editor.lineHighlightBackground#FFFFFF4D
  • editor.lineHighlightBorder#FFFFFF33
  • editor.selectionBackground#C84F5740
  • editor.selectionHighlightBackground#C84F5733
  • editorBracketMatch.background#C84F3333
  • editorBracketMatch.border#C84F66
  • editorCursor.foreground#C84F57
  • editorGroupHeader.tabsBackground#FFF7F2
  • editorIndentGuide.activeBackground#C0B4AF88
  • editorIndentGuide.background#C0B4AF44
  • editorLineNumber.activeForeground#C84F57
  • editorLineNumber.foreground#B0A5A0
  • editorWhitespace.foreground#C0B4AF
  • focusBorder#C84F57
  • gitDecoration.conflictingResourceForeground#D9A66A
  • gitDecoration.deletedResourceForeground#C84F57
  • gitDecoration.modifiedResourceForeground#5AA89E
  • gitDecoration.untrackedResourceForeground#5AA89E
  • input.background#FFFFFF
  • input.border#C0B4AF
  • input.foreground#2B2A28
  • input.placeholderForeground#A09A94
  • inputOption.activeBorder#C84F57
  • list.activeSelectionBackground#D8B3A8
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#D8B3A8
  • list.highlightForeground#C84F57
  • list.hoverBackground#D8B3A866
  • minimap.background#FFF7F2
  • minimapSlider.activeBackground#C0B4AF66
  • minimapSlider.background#C0B4AF22
  • minimapSlider.hoverBackground#C0B4AF44
  • panel.background#FFF7F2
  • panel.border#C0B4AF
  • panelTitle.activeBorder#C84F57
  • panelTitle.activeForeground#C84F57
  • panelTitle.inactiveForeground#A09A94
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C0B4AFCC
  • scrollbarSlider.background#C0B4AF44
  • scrollbarSlider.hoverBackground#C0B4AF88
  • sideBar.background#F2ECE8
  • sideBar.foreground#2B2A28
  • sideBarSectionHeader.background#F5E9E5
  • sideBarSectionHeader.foreground#C84F57
  • sideBarTitle.foreground#C84F57
  • statusBar.background#E0D4D0
  • statusBar.debuggingBackground#C84F57
  • statusBar.foreground#2B2A28
  • statusBar.noFolderBackground#F5E9E5
  • statusBarItem.hoverBackground#D8B3A8
  • tab.activeBackground#FFF7F2
  • tab.activeBorder#C84F57
  • tab.activeForeground#2B2A28
  • tab.border#D9CBC8
  • tab.inactiveBackground#F2ECE8
  • tab.inactiveForeground#A09A94
  • terminal.ansiBlue#3A5F7C
  • terminal.ansiBrightBlue#5A6E8C
  • terminal.ansiBrightCyan#78B5AB
  • terminal.ansiBrightGreen#78C5A0
  • terminal.ansiBrightMagenta#C5A1C0
  • terminal.ansiBrightRed#E07A71
  • terminal.ansiBrightYellow#E8B87A
  • terminal.ansiCyan#5AA89E
  • terminal.ansiGreen#5AA89E
  • terminal.ansiMagenta#A390A9
  • terminal.ansiRed#C84F57
  • terminal.ansiYellow#D9A66A
  • terminal.background#FFF7F2
  • terminal.foreground#2B2A28
  • titleBar.activeBackground#F5E9E5
  • titleBar.activeForeground#2B2A28
  • titleBar.inactiveBackground#FFF7F2
  • titleBar.inactiveForeground#A09A94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A09A94italic
string, string.quoted, string.template#5AA89E
keyword, storage.type, storage.modifier#C84F57bold
keyword.operator, punctuation.accessor#BFA5A0
variable, variable.other#2B2A28
variable.parameter#BFA5A0italic
entity.name.function, support.function#3A5F7C
meta.function-call#5A6E8C
entity.name.class, entity.name.type.class, support.class#C84F57bold
entity.name.type, support.type#4F8F89
entity.name.type.interface#5AA89Eitalic
constant.numeric#D9A66A
constant, constant.language, constant.character#C84F57
constant.language.boolean#C84F57bold
variable.other.property, support.variable.property#5AA89E
meta.object-literal.key#3A5F7C
entity.name.tag, punctuation.definition.tag#C84F57
entity.other.attribute-name#BFA5A0italic
punctuation, meta.brace#2B2A28
string.regexp#5AA89E
constant.character.escape#BFA5A0
meta.decorator, punctuation.decorator#A390A9
invalid, invalid.illegal#C84F57strikethrough
markup.heading, entity.name.section#C84F57bold
markup.bold#C84F57bold
markup.italic#5AA89Eitalic
markup.underline.link#3A5F7C
markup.inline.raw, markup.fenced_code#5AA89E
support.type.property-name.json#3A5F7C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A390A9
support.type.property-name.css#5AA89E
support.constant.property-value.css#D9A66A