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#E9C46A
  • activityBar.background#264653
  • activityBar.foreground#FAF3E0
  • activityBarBadge.background#E9C46A
  • activityBarBadge.foreground#264653
  • badge.background#264653
  • badge.foreground#FAF3E0
  • button.background#E9C46A
  • button.foreground#264653
  • button.hoverBackground#F4A261
  • dropdown.background#FFFFFF
  • dropdown.border#D3C0A5
  • dropdown.foreground#333333
  • editor.background#FAF3E0
  • editor.findMatchBackground#F4A261
  • editor.findMatchHighlightBackground#F4A26180
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9E6
  • editor.lineHighlightBorder#E9C46A
  • editor.selectionBackground#B4C8D1
  • editor.selectionHighlightBackground#E0E5EB
  • editorBracketMatch.background#E9C46A30
  • editorBracketMatch.border#E9C46A
  • editorCursor.foreground#264653
  • editorGroupHeader.tabsBackground#FAF3E0
  • editorIndentGuide.activeBackground#C5B5A5
  • editorIndentGuide.background#E0D5C9
  • editorLineNumber.activeForeground#264653
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#264653
  • gitDecoration.conflictingResourceForeground#9D5C63
  • gitDecoration.deletedResourceForeground#D55E00
  • gitDecoration.modifiedResourceForeground#2A9D8F
  • gitDecoration.untrackedResourceForeground#E9C46A
  • input.background#FFFFFF
  • input.border#D3C0A5
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#E9C46A
  • list.activeSelectionBackground#B4C8D1
  • list.activeSelectionForeground#264653
  • list.focusBackground#B4C8D1
  • list.highlightForeground#E9C46A
  • list.hoverBackground#E0E5EB
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#A8C0B4
  • minimapSlider.background#D3C0A5
  • minimapSlider.hoverBackground#B4C8D1
  • panel.background#FAF3E0
  • panel.border#D3C0A5
  • panelTitle.activeBorder#E9C46A
  • panelTitle.activeForeground#264653
  • panelTitle.inactiveForeground#666666
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackground#A8C0B4
  • scrollbarSlider.background#D3C0A5
  • scrollbarSlider.hoverBackground#B4C8D1
  • sideBar.background#F5E9D3
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#FAF3E0
  • sideBarSectionHeader.foreground#264653
  • sideBarTitle.foreground#264653
  • statusBar.background#E9C46A
  • statusBar.debuggingBackground#F4A261
  • statusBar.foreground#264653
  • statusBar.noFolderBackground#A8C0B4
  • statusBarItem.hoverBackground#F4A261
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#E9C46A
  • tab.activeForeground#264653
  • tab.border#D3C0A5
  • tab.inactiveBackground#F5E9D3
  • tab.inactiveForeground#666666
  • terminal.ansiBlue#264653
  • terminal.ansiBrightBlue#264653
  • terminal.ansiBrightCyan#2A9D8F
  • terminal.ansiBrightGreen#2A9D8F
  • terminal.ansiBrightMagenta#9D5C63
  • terminal.ansiBrightRed#D55E00
  • terminal.ansiBrightYellow#F4A261
  • terminal.ansiCyan#2A9D8F
  • terminal.ansiGreen#2A9D8F
  • terminal.ansiMagenta#9D5C63
  • terminal.ansiRed#D55E00
  • terminal.ansiYellow#E9C46A
  • terminal.background#FAF3E0
  • terminal.foreground#333333
  • titleBar.activeBackground#264653
  • titleBar.activeForeground#FAF3E0
  • titleBar.inactiveBackground#A8C0B4
  • titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#2A9D8F
keyword, storage.type, storage.modifier#264653bold
keyword.operator, punctuation.accessor#264653
variable, variable.other#333333
variable.parameter#666666italic
entity.name.function, support.function#D55E00
meta.function-call#D55E00
entity.name.class, entity.name.type.class, support.class#9D5C63bold
entity.name.type, support.type#9D5C63
entity.name.type.interface#9D5C63italic
constant.numeric#E9C46A
constant, constant.language, constant.character#E9C46A
constant.language.boolean#D55E00bold
variable.other.property, support.variable.property#2A9D8F
meta.object-literal.key#264653
entity.name.tag, punctuation.definition.tag#264653
entity.other.attribute-name#9D5C63italic
punctuation, meta.brace#333333
string.regexp#9D5C63
constant.character.escape#D55E00
meta.decorator, punctuation.decorator#9D5C63
invalid, invalid.illegal#D55E00strikethrough
markup.heading, entity.name.section#264653bold
markup.bold#264653bold
markup.italic#264653italic
markup.underline.link#2A9D8F
markup.inline.raw, markup.fenced_code#2A9D8F
support.type.property-name.json#264653
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#264653
support.type.property-name.css#2A9D8F
support.constant.property-value.css#E9C46A
themesmith by CyberBoost - VS Code Theme