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#D77A3C
  • activityBar.background#B3DFF5
  • activityBar.foreground#2C3E50
  • activityBarBadge.background#D77A3C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D77A3C
  • badge.foreground#FFFFFF
  • button.background#D77A3C
  • button.foreground#FFFFFF
  • button.hoverBackground#E89B5C
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0C0
  • dropdown.foreground#2C3E50
  • editor.background#FAF3E0
  • editor.findMatchBackground#D77A3C80
  • editor.findMatchHighlightBackground#D77A3C40
  • editor.foreground#8B5E3C
  • editor.lineHighlightBackground#E8C54733
  • editor.lineHighlightBorder#D77A3C
  • editor.selectionBackground#B3DFF5AA
  • editor.selectionHighlightBackground#B3DFF580
  • editorBracketMatch.background#E8C54733
  • editorBracketMatch.border#D77A3C
  • editorCursor.foreground#2C3E50
  • editorGroupHeader.tabsBackground#F5E9D3
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#2C3E50
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#D77A3C
  • gitDecoration.conflictingResourceForeground#B892C5
  • gitDecoration.deletedResourceForeground#D77A3C
  • gitDecoration.modifiedResourceForeground#5A9BD5
  • gitDecoration.untrackedResourceForeground#8ABF50
  • input.background#FFFFFF
  • input.border#C0C0C0
  • input.foreground#2C3E50
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#D77A3C
  • list.activeSelectionBackground#B3DFF5
  • list.activeSelectionForeground#2C3E50
  • list.focusBackground#E8C54733
  • list.highlightForeground#D77A3C
  • list.hoverBackground#E0D5C3
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#80808080
  • minimapSlider.background#C0C0C040
  • minimapSlider.hoverBackground#A0A0A060
  • panel.background#FAF3E0
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D77A3C
  • panelTitle.activeForeground#2C3E50
  • panelTitle.inactiveForeground#6A7B8C
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#80808080
  • scrollbarSlider.background#C0C0C040
  • scrollbarSlider.hoverBackground#A0A0A060
  • sideBar.background#F5E9D3
  • sideBar.foreground#4B382A
  • sideBarSectionHeader.background#E0D5C3
  • sideBarSectionHeader.foreground#4B382A
  • sideBarTitle.foreground#4B382A
  • statusBar.background#A1B57D
  • statusBar.debuggingBackground#D77A3C
  • statusBar.foreground#2C3E50
  • statusBar.noFolderBackground#E8C547
  • statusBarItem.hoverBackground#E0D5C3
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#D77A3C
  • tab.activeForeground#2C3E50
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5E9D3
  • tab.inactiveForeground#4B382A
  • terminal.ansiBlue#5A9BD5
  • terminal.ansiBrightBlue#7EB9FF
  • terminal.ansiBrightCyan#89D6EB
  • terminal.ansiBrightGreen#A5D96C
  • terminal.ansiBrightMagenta#CDA5E0
  • terminal.ansiBrightRed#E89B5C
  • terminal.ansiBrightYellow#F2D36E
  • terminal.ansiCyan#6CB4C9
  • terminal.ansiGreen#8ABF50
  • terminal.ansiMagenta#B892C5
  • terminal.ansiRed#D77A3C
  • terminal.ansiYellow#E8C547
  • terminal.background#FAF3E0
  • terminal.foreground#2C3E50
  • titleBar.activeBackground#B3DFF5
  • titleBar.activeForeground#2C3E50
  • titleBar.inactiveBackground#D0E9F5
  • titleBar.inactiveForeground#6A7B8C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A7B8Citalic
string, string.quoted, string.template#8ABF50
keyword, storage.type, storage.modifier#5A9BD5bold
keyword.operator, punctuation.accessor#B892C5
variable, variable.other#8B5E3C
variable.parameter#A1B57Ditalic
entity.name.function, support.function#D77A3C
meta.function-call#E8C547
entity.name.class, entity.name.type.class, support.class#2C3E50bold
entity.name.type, support.type#B892C5
entity.name.type.interface#6CB4C9italic
constant.numeric#7EB9FF
constant, constant.language, constant.character#5A9BD5
constant.language.boolean#D77A3Cbold
variable.other.property, support.variable.property#8B5E3C
meta.object-literal.key#4B382A
entity.name.tag, punctuation.definition.tag#B892C5
entity.other.attribute-name#E6B8C7italic
punctuation, meta.brace#6A7B8C
string.regexp#8ABF50
constant.character.escape#D77A3C
meta.decorator, punctuation.decorator#6CB4C9
invalid, invalid.illegal#D77A3Cstrikethrough
markup.heading, entity.name.section#2C3E50bold
markup.bold#D77A3Cbold
markup.italic#A1B57Ditalic
markup.underline.link#5A9BD5
markup.inline.raw, markup.fenced_code#8B5E3C
support.type.property-name.json#5A9BD5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B892C5
support.type.property-name.css#8ABF50
support.constant.property-value.css#D77A3C