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