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#D0403C
  • activityBar.background#EAE7E0
  • activityBar.foreground#D0403C
  • activityBarBadge.background#D0403C
  • activityBarBadge.foreground#F4F1EA
  • badge.background#D0403C
  • badge.foreground#F4F1EA
  • button.background#DDD9D2
  • button.foreground#403F3D
  • button.hoverBackground#C5C0B8
  • dropdown.background#EAE7E0
  • dropdown.border#DDD9D2
  • dropdown.foreground#403F3D
  • editor.background#F4F1EA
  • editor.findMatchBackground#D6A02E88
  • editor.findMatchHighlightBackground#D6A02E55
  • editor.foreground#403F3D
  • editor.lineHighlightBackground#FFF8E140
  • editor.lineHighlightBorder#FFF8E180
  • editor.selectionBackground#D0403C55
  • editor.selectionHighlightBackground#D0403C33
  • editorBracketMatch.background#D6A02E33
  • editorBracketMatch.border#D6A02E
  • editorCursor.foreground#D6A02E
  • editorGroupHeader.tabsBackground#EAE7E0
  • editorIndentGuide.activeBackground#B0AEAB88
  • editorIndentGuide.background#B0AEAB55
  • editorLineNumber.activeForeground#D0403C
  • editorLineNumber.foreground#A8A6A3
  • editorWhitespace.foreground#B0AEAB
  • focusBorder#D0403C
  • gitDecoration.conflictingResourceForeground#CFA441
  • gitDecoration.deletedResourceForeground#C44D58
  • gitDecoration.modifiedResourceForeground#D0403C
  • gitDecoration.untrackedResourceForeground#6A9A5C
  • input.background#EAE7E0
  • input.border#DDD9D2
  • input.foreground#403F3D
  • input.placeholderForeground#A8A6A3
  • inputOption.activeBorder#D0403C
  • list.activeSelectionBackground#D6A02E33
  • list.activeSelectionForeground#403F3D
  • list.focusBackground#DDD9D2
  • list.highlightForeground#D0403C
  • list.hoverBackground#DDD9D266
  • minimap.background#F4F1EA
  • minimapSlider.activeBackground#A8A6A3AA
  • minimapSlider.background#A8A6A366
  • minimapSlider.hoverBackground#A8A6A388
  • panel.background#F4F1EA
  • panel.border#DDD9D2
  • panelTitle.activeBorder#D0403C
  • panelTitle.activeForeground#403F3D
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#D0403C88
  • scrollbarSlider.background#B0AEAB44
  • scrollbarSlider.hoverBackground#B0AEAB66
  • sideBar.background#EAE7E0
  • sideBar.foreground#403F3D
  • sideBarSectionHeader.background#DDD9D2
  • sideBarSectionHeader.foreground#D0403C
  • sideBarTitle.foreground#D0403C
  • statusBar.background#DDD9D2
  • statusBar.debuggingBackground#D6A02E
  • statusBar.foreground#403F3D
  • statusBar.noFolderBackground#EAE7E0
  • statusBarItem.hoverBackground#CBC7BE
  • tab.activeBackground#F4F1EA
  • tab.activeBorder#D0403C
  • tab.activeForeground#403F3D
  • tab.border#DDD9D2
  • tab.inactiveBackground#EAE7E0
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#4F81BD
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#5F9EA0
  • terminal.ansiGreen#6A9A5C
  • terminal.ansiMagenta#A074C4
  • terminal.ansiRed#D0403C
  • terminal.ansiYellow#CFA441
  • terminal.background#F4F1EA
  • terminal.foreground#403F3D
  • titleBar.activeBackground#F4F1EA
  • titleBar.activeForeground#403F3D
  • titleBar.inactiveBackground#EAE7E0
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A6A3italic
string, string.quoted, string.template#D6A02E
keyword, storage.type, storage.modifier#D0403Cbold
keyword.operator, punctuation.accessor#A074C4
variable, variable.other#4F81BD
variable.parameter#4F81BDitalic
entity.name.function, support.function#6A9A5C
meta.function-call#6A9A5C
entity.name.class, entity.name.type.class, support.class#A074C4bold
entity.name.type, support.type#5F9EA0
entity.name.type.interface#5F9EA0italic
constant.numeric#CFA441
constant, constant.language, constant.character#CFA441
constant.language.boolean#CFA441bold
variable.other.property, support.variable.property#4F81BD
meta.object-literal.key#A074C4
entity.name.tag, punctuation.definition.tag#D0403C
entity.other.attribute-name#5F9EA0italic
punctuation, meta.brace#8A8A8A
string.regexp#CFA441
constant.character.escape#A074C4
meta.decorator, punctuation.decorator#CFA441
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#D0403Cbold
markup.bold#D6A02Ebold
markup.italic#5F9EA0italic
markup.underline.link#4F81BD
markup.inline.raw, markup.fenced_code#CFA441
support.type.property-name.json#4F81BD
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D0403C
support.type.property-name.css#5F9EA0
support.constant.property-value.css#CFA441