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#D9643E
  • activityBar.background#EFE7E2
  • activityBar.foreground#3B302F
  • activityBarBadge.background#D9643E
  • activityBarBadge.foreground#FAF5ED
  • badge.background#D9643E
  • badge.foreground#FAF5ED
  • button.background#D9643E
  • button.foreground#FAF5ED
  • button.hoverBackground#C04A2E
  • dropdown.background#FFFFFF
  • dropdown.border#D0C5C0
  • dropdown.foreground#3B302F
  • editor.background#FAF5ED
  • editor.findMatchBackground#C04A2E30
  • editor.findMatchHighlightBackground#C04A2E20
  • editor.foreground#3B302F
  • editor.lineHighlightBackground#D9643E15
  • editor.lineHighlightBorder#D9643E30
  • editor.selectionBackground#D9643E30
  • editor.selectionHighlightBackground#D9643E20
  • editorBracketMatch.background#D9643E15
  • editorBracketMatch.border#D9643E
  • editorCursor.foreground#C04A2E
  • editorGroupHeader.tabsBackground#FAF5ED
  • editorIndentGuide.activeBackground#D9643E
  • editorIndentGuide.background#D0C5C0
  • editorLineNumber.activeForeground#3B302F
  • editorLineNumber.foreground#8A7E7C
  • editorWhitespace.foreground#D0C5C0
  • focusBorder#D9643E
  • gitDecoration.conflictingResourceForeground#B9757F
  • gitDecoration.deletedResourceForeground#C04A2E
  • gitDecoration.modifiedResourceForeground#D9643E
  • gitDecoration.untrackedResourceForeground#6F9C57
  • input.background#FFFFFF
  • input.border#D0C5C0
  • input.foreground#3B302F
  • input.placeholderForeground#8A7E7C
  • inputOption.activeBorder#D9643E
  • list.activeSelectionBackground#D9643E30
  • list.activeSelectionForeground#FAF5ED
  • list.focusBackground#D9643E15
  • list.highlightForeground#D9643E
  • list.hoverBackground#D9643E20
  • minimap.background#FAF5ED
  • minimapSlider.activeBackground#D964370
  • minimapSlider.background#D0C5C040
  • minimapSlider.hoverBackground#D0C5C060
  • panel.background#FAF5ED
  • panel.border#D0C5C0
  • panelTitle.activeBorder#D9643E
  • panelTitle.activeForeground#3B302F
  • panelTitle.inactiveForeground#8A7E7C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D9643EC0
  • scrollbarSlider.background#D0C5C0A0
  • scrollbarSlider.hoverBackground#D0C5C0C0
  • sideBar.background#F3EAE5
  • sideBar.foreground#3B302F
  • sideBarSectionHeader.background#E9DCD8
  • sideBarSectionHeader.foreground#3B302F
  • sideBarTitle.foreground#3B302F
  • statusBar.background#D9643E
  • statusBar.debuggingBackground#C04A2E
  • statusBar.foreground#FAF5ED
  • statusBar.noFolderBackground#D0C5C0
  • statusBarItem.hoverBackground#D9643E55
  • tab.activeBackground#FAF5ED
  • tab.activeBorder#D9643E
  • tab.activeForeground#3B302F
  • tab.border#D0C5C0
  • tab.inactiveBackground#F3EAE5
  • tab.inactiveForeground#8A7E7C
  • terminal.ansiBlue#5A6B91
  • terminal.ansiBrightBlue#7A8CBF
  • terminal.ansiBrightCyan#7FD1A5
  • terminal.ansiBrightGreen#7FD17A
  • terminal.ansiBrightMagenta#E58FAF
  • terminal.ansiBrightRed#E58F5A
  • terminal.ansiBrightYellow#FF9A5A
  • terminal.ansiCyan#5C9A86
  • terminal.ansiGreen#6F9C57
  • terminal.ansiMagenta#B9757F
  • terminal.ansiRed#C04A2E
  • terminal.ansiYellow#D9643E
  • terminal.background#FAF5ED
  • terminal.foreground#3B302F
  • titleBar.activeBackground#E9DCD8
  • titleBar.activeForeground#3B302F
  • titleBar.inactiveBackground#F3EAE5
  • titleBar.inactiveForeground#8A7E7C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F8C8Ditalic
string, string.quoted, string.template#D3626C—
keyword, storage.type, storage.modifier#D85B27bold
keyword.operator, punctuation.accessor#394046—
variable, variable.other#394046—
variable.parameter#6B8E23italic
entity.name.function, support.function#8C5A33—
meta.function-call#8C5A33—
entity.name.class, entity.name.type.class, support.class#3A5F8Cbold
entity.name.type, support.type#3A5F8C—
entity.name.type.interface#3A5F8Citalic
constant.numeric#6B8E23—
constant, constant.language, constant.character#FF7043—
constant.language.boolean#D85B27bold
variable.other.property, support.variable.property#394046—
meta.object-literal.key#394046—
entity.name.tag, punctuation.definition.tag#D85B27—
entity.other.attribute-name#D3626Citalic
punctuation, meta.brace#21252B—
string.regexp#D3626C—
constant.character.escape#D85B27—
meta.decorator, punctuation.decorator#FF7043—
invalid, invalid.illegal#FF5F57strikethrough
markup.heading, entity.name.section#FF7043bold
markup.bold#D85B27bold
markup.italic#8C5A33italic
markup.underline.link#3A5F8C—
markup.inline.raw, markup.fenced_code#6B8E23—
support.type.property-name.json#3A5F8C—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF7043—
support.type.property-name.css#8C5A33—
support.constant.property-value.css#6B8E23—