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#FFB84D
  • activityBar.background#2b1505
  • activityBar.foreground#FFB84D
  • activityBarBadge.background#FF7F00
  • activityBarBadge.foreground#ffffff
  • badge.background#FF8C00
  • badge.foreground#ffffff
  • button.background#FF8C00
  • button.foreground#ffffff
  • button.hoverBackground#FF9F33
  • dropdown.background#261a0e
  • dropdown.border#7a5c44
  • dropdown.foreground#F5E8D0
  • editor.background#201111
  • editor.findMatchBackground#FFB84D44
  • editor.findMatchHighlightBackground#FFB84D22
  • editor.foreground#F5E8D0
  • editor.lineHighlightBackground#FF8C0040
  • editor.lineHighlightBorder#FF8C0060
  • editor.selectionBackground#FF8C0030
  • editor.selectionHighlightBackground#FF8C0020
  • editorBracketMatch.background#FFB84D33
  • editorBracketMatch.border#FFB84D
  • editorCursor.foreground#FFB84D
  • editorGroupHeader.tabsBackground#201111
  • editorIndentGuide.activeBackground#7a5c4480
  • editorIndentGuide.background#7a5c4440
  • editorLineNumber.activeForeground#FFB84D
  • editorLineNumber.foreground#9a7a5c
  • editorWhitespace.foreground#7a5c44
  • focusBorder#FF8C00
  • gitDecoration.conflictingResourceForeground#FFDB4D
  • gitDecoration.deletedResourceForeground#FF6E4D
  • gitDecoration.modifiedResourceForeground#FFB84D
  • gitDecoration.untrackedResourceForeground#B7FF6E
  • input.background#261a0e
  • input.border#7a5c44
  • input.foreground#F5E8D0
  • input.placeholderForeground#9a7a5c
  • inputOption.activeBorder#FFB84D
  • list.activeSelectionBackground#FF8C00
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#FF8C00
  • list.highlightForeground#FFB84D
  • list.hoverBackground#FF8C0044
  • minimap.background#201111
  • minimapSlider.activeBackground#FFB84D66
  • minimapSlider.background#FFB84D22
  • minimapSlider.hoverBackground#FFB84D44
  • panel.background#201111
  • panel.border#FF8C00
  • panelTitle.activeBorder#FFB84D
  • panelTitle.activeForeground#FFB84D
  • panelTitle.inactiveForeground#F5D1A9
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB84D88
  • scrollbarSlider.background#9a7a5c44
  • scrollbarSlider.hoverBackground#9a7a5c88
  • sideBar.background#261a0e
  • sideBar.foreground#F5D1A9
  • sideBarSectionHeader.background#2b1505
  • sideBarSectionHeader.foreground#FFB84D
  • sideBarTitle.foreground#FFB84D
  • statusBar.background#FF8C00
  • statusBar.debuggingBackground#FFB84D
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2b1505
  • statusBarItem.hoverBackground#FF9F33
  • tab.activeBackground#3a1e0a
  • tab.activeBorder#FFB84D
  • tab.activeForeground#ffffff
  • tab.border#201111
  • tab.inactiveBackground#261a0e
  • tab.inactiveForeground#F5D1A9
  • terminal.ansiBlue#6EB5FF
  • terminal.ansiBrightBlue#99CCFF
  • terminal.ansiBrightCyan#99FFFF
  • terminal.ansiBrightGreen#CCFF99
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFEE99
  • terminal.ansiCyan#6EFFFF
  • terminal.ansiGreen#B7FF6E
  • terminal.ansiMagenta#FF6EFF
  • terminal.ansiRed#FF6E4D
  • terminal.ansiYellow#FFDB4D
  • terminal.background#201111
  • terminal.foreground#F5E8D0
  • titleBar.activeBackground#2b1505
  • titleBar.activeForeground#F5E8D0
  • titleBar.inactiveBackground#201111
  • titleBar.inactiveForeground#F5D1A9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a7a5citalic
string, string.quoted, string.template#FFD166
keyword, storage.type, storage.modifier#FF8C00bold
keyword.operator, punctuation.accessor#FFB84D
variable, variable.other#F5E8D0
variable.parameter#FFC966italic
entity.name.function, support.function#FFB84D
meta.function-call#FFD1A9
entity.name.class, entity.name.type.class, support.class#FF9C33bold
entity.name.type, support.type#FF9C33
entity.name.type.interface#6EB5FFitalic
constant.numeric#FFC966
constant, constant.language, constant.character#FFB84D
constant.language.boolean#FFC966bold
variable.other.property, support.variable.property#FFD1A9
meta.object-literal.key#FF9C33
entity.name.tag, punctuation.definition.tag#FF8C00
entity.other.attribute-name#FFC966italic
punctuation, meta.brace#FFB84D
string.regexp#FFC966
constant.character.escape#6EB5FF
meta.decorator, punctuation.decorator#FFC966
invalid, invalid.illegal#FF4C33strikethrough
markup.heading, entity.name.section#FF8C00bold
markup.bold#FFC966bold
markup.italic#FFD166italic
markup.underline.link#6EB5FF
markup.inline.raw, markup.fenced_code#B7FF6E
support.type.property-name.json#FF8C00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC966
support.type.property-name.css#FF9C33
support.constant.property-value.css#FFD166