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#B0524B
  • activityBar.background#F5E6D0
  • activityBar.foreground#4A4A4A
  • activityBarBadge.background#C73535
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C73535
  • badge.foreground#FFFFFF
  • button.background#B0524B
  • button.foreground#FFFFFF
  • button.hoverBackground#C73535
  • dropdown.background#FFF9F0
  • dropdown.border#D0C0B0
  • dropdown.foreground#4A4A4A
  • editor.background#FFF9F0
  • editor.findMatchBackground#C73535
  • editor.findMatchHighlightBackground#D9A441
  • editor.foreground#4A4A4A
  • editor.lineHighlightBackground#F0E8DE
  • editor.lineHighlightBorder#D0C0B0
  • editor.selectionBackground#A8C9E5
  • editor.selectionHighlightBackground#F5E6D0
  • editorBracketMatch.background#F5E6D0
  • editorBracketMatch.border#B0524B
  • editorCursor.foreground#4A4A4A
  • editorGroupHeader.tabsBackground#FFF9F0
  • editorIndentGuide.activeBackground#A8C9E5
  • editorIndentGuide.background#E2E2E2
  • editorLineNumber.activeForeground#4A4A4A
  • editorLineNumber.foreground#8A8A8A
  • editorWhitespace.foreground#C0B0A0
  • focusBorder#B0524B
  • gitDecoration.conflictingResourceForeground#D9A441
  • gitDecoration.deletedResourceForeground#C73535
  • gitDecoration.modifiedResourceForeground#A8C9E5
  • gitDecoration.untrackedResourceForeground#8A9A5B
  • input.background#FFF9F0
  • input.border#D0C0B0
  • input.foreground#4A4A4A
  • input.placeholderForeground#8A8A8A
  • inputOption.activeBorder#B0524B
  • list.activeSelectionBackground#A8C9E5
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#F0E8DE
  • list.highlightForeground#C73535
  • list.hoverBackground#F5E6D0
  • minimap.background#FFF9F0
  • minimapSlider.activeBackground#A09080
  • minimapSlider.background#D0C0B0
  • minimapSlider.hoverBackground#B0A090
  • panel.background#FFF9F0
  • panel.border#D0C0B0
  • panelTitle.activeBorder#B0524B
  • panelTitle.activeForeground#4A4A4A
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#C0B0A0
  • scrollbarSlider.activeBackground#A09080
  • scrollbarSlider.background#D0C0B0
  • scrollbarSlider.hoverBackground#B0A090
  • sideBar.background#FFF9F0
  • sideBar.foreground#4A4A4A
  • sideBarSectionHeader.background#F5E6D0
  • sideBarSectionHeader.foreground#4A4A4A
  • sideBarTitle.foreground#4A4A4A
  • statusBar.background#A8C9E5
  • statusBar.debuggingBackground#B0524B
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#8A9A5B
  • statusBarItem.hoverBackground#C73535
  • tab.activeBackground#FFF9F0
  • tab.activeBorder#B0524B
  • tab.activeForeground#4A4A4A
  • tab.border#D0C0B0
  • tab.inactiveBackground#E2E2E2
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#A8C9E5
  • terminal.ansiBrightBlue#C0DFF5
  • terminal.ansiBrightCyan#A0BFA0
  • terminal.ansiBrightGreen#A0C090
  • terminal.ansiBrightMagenta#D96A6A
  • terminal.ansiBrightRed#E06060
  • terminal.ansiBrightYellow#E4B86A
  • terminal.ansiCyan#8A9A5B
  • terminal.ansiGreen#8A9A5B
  • terminal.ansiMagenta#B0524B
  • terminal.ansiRed#C73535
  • terminal.ansiYellow#D9A441
  • terminal.background#FFF9F0
  • terminal.foreground#4A4A4A
  • titleBar.activeBackground#F5E6D0
  • titleBar.activeForeground#4A4A4A
  • titleBar.inactiveBackground#E2E2E2
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A9A5Bitalic
string, string.quoted, string.template#B0524B
keyword, storage.type, storage.modifier#C73535bold
keyword.operator, punctuation.accessor#A67855
variable, variable.other#4A4A4A
variable.parameter#8A9A5Bitalic
entity.name.function, support.function#A8C9E5
meta.function-call#A8C9E5
entity.name.class, entity.name.type.class, support.class#B0524Bbold
entity.name.type, support.type#A67855
entity.name.type.interface#8A9A5Bitalic
constant.numeric#D9A441
constant, constant.language, constant.character#B0524B
constant.language.boolean#C73535bold
variable.other.property, support.variable.property#4A4A4A
meta.object-literal.key#A67855
entity.name.tag, punctuation.definition.tag#B0524B
entity.other.attribute-name#A67855italic
punctuation, meta.brace#4A4A4A
string.regexp#8A9A5B
constant.character.escape#C73535
meta.decorator, punctuation.decorator#A8C9E5
invalid, invalid.illegal#C73535strikethrough
markup.heading, entity.name.section#B0524Bbold
markup.bold#C73535bold
markup.italic#8A9A5Bitalic
markup.underline.link#A8C9E5
markup.inline.raw, markup.fenced_code#A67855
support.type.property-name.json#B0524B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8A9A5B
support.type.property-name.css#A67855
support.constant.property-value.css#D9A441