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#8C1A0A
  • activityBar.background#F0EFEB
  • activityBar.foreground#C44133
  • activityBarBadge.background#C44133
  • activityBarBadge.foreground#FAF8F5
  • badge.background#C44133
  • badge.foreground#FAF8F5
  • button.background#C44133
  • button.foreground#FAF8F5
  • button.hoverBackground#8C1A0A
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#FAF8F5
  • editor.findMatchBackground#D8432D40
  • editor.findMatchHighlightBackground#D8432D20
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#C4413320
  • editor.lineHighlightBorder#C4413360
  • editor.selectionBackground#C4413340
  • editor.selectionHighlightBackground#C4413330
  • editorBracketMatch.background#C4413320
  • editorBracketMatch.border#C44133
  • editorCursor.foreground#C44133
  • editorGroupHeader.tabsBackground#FAF8F5
  • editorIndentGuide.activeBackground#8C1A0A
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#C44133
  • gitDecoration.conflictingResourceForeground#E6A23C
  • gitDecoration.deletedResourceForeground#8C1A0A
  • gitDecoration.modifiedResourceForeground#C44133
  • gitDecoration.untrackedResourceForeground#2A9D44
  • input.background#FFFFFF
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#C44133
  • list.activeSelectionBackground#C4413330
  • list.activeSelectionForeground#FAF8F5
  • list.focusBackground#C4413340
  • list.highlightForeground#C44133
  • list.hoverBackground#C4413320
  • minimap.background#FAF8F5
  • minimapSlider.activeBackground#C4413370
  • minimapSlider.background#C4413330
  • minimapSlider.hoverBackground#C4413350
  • panel.background#F5F4F0
  • panel.border#D3D1CD
  • panelTitle.activeBorder#C44133
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C4413380
  • scrollbarSlider.background#C0C0C080
  • scrollbarSlider.hoverBackground#C0C0C0A0
  • sideBar.background#F5F4F0
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E5E3DF
  • sideBarSectionHeader.foreground#8C1A0A
  • sideBarTitle.foreground#C44133
  • statusBar.background#8C1A0A
  • statusBar.debuggingBackground#C44133
  • statusBar.foreground#FAF8F5
  • statusBar.noFolderBackground#E5E3DF
  • statusBarItem.hoverBackground#C4413355
  • tab.activeBackground#FAF8F5
  • tab.activeBorder#C44133
  • tab.activeForeground#2B2B2B
  • tab.border#D3D1CD
  • tab.inactiveBackground#F2F1ED
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#285EA8
  • terminal.ansiBrightBlue#3A8DFF
  • terminal.ansiBrightCyan#12B5C4
  • terminal.ansiBrightGreen#4EE76E
  • terminal.ansiBrightMagenta#8E24AA
  • terminal.ansiBrightRed#E55E4D
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0F7C9D
  • terminal.ansiGreen#2A9D44
  • terminal.ansiMagenta#6A1B9A
  • terminal.ansiRed#C44133
  • terminal.ansiYellow#E6A23C
  • terminal.background#FAF8F5
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E5E3DF
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F2F1ED
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#D8432D—
keyword, storage.type, storage.modifier#C44133bold
keyword.operator, punctuation.accessor#8C1A0A—
variable, variable.other#2B2B2B—
variable.parameter#8C1A0Aitalic
entity.name.function, support.function#285EA8—
meta.function-call#2A9D44—
entity.name.class, entity.name.type.class, support.class#6A1B9Abold
entity.name.type, support.type#3A8DFF—
entity.name.type.interface#8E24AAitalic
constant.numeric#E6A23C—
constant, constant.language, constant.character#FFEB3B—
constant.language.boolean#C44133bold
variable.other.property, support.variable.property#0F7C9D—
meta.object-literal.key#8C1A0A—
entity.name.tag, punctuation.definition.tag#C44133—
entity.other.attribute-name#2A9D44italic
punctuation, meta.brace#8C1A0A—
string.regexp#E6A23C—
constant.character.escape#8C1A0A—
meta.decorator, punctuation.decorator#6A1B9A—
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#C44133bold
markup.bold#C44133bold
markup.italic#8C1A0Aitalic
markup.underline.link#285EA8—
markup.inline.raw, markup.fenced_code#2A9D44—
support.type.property-name.json#285EA8—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8C1A0A—
support.type.property-name.css#2A9D44—
support.constant.property-value.css#285EA8—