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#FFB347
  • activityBar.background#120200
  • activityBar.foreground#FF6F3C
  • activityBarBadge.background#FFB347
  • activityBarBadge.foreground#1F0503
  • badge.background#FFB347
  • badge.foreground#1F0503
  • button.background#2A0E0A
  • button.foreground#FFFFFF
  • button.hoverBackground#311A19
  • dropdown.background#260704
  • dropdown.border#2A0E0A
  • dropdown.foreground#F5E8E0
  • editor.background#1F0503
  • editor.findMatchBackground#FF4E1F44
  • editor.findMatchHighlightBackground#FF4E1F22
  • editor.foreground#F5E8E0
  • editor.lineHighlightBackground#2E0F0C80
  • editor.lineHighlightBorder#2E0F0C
  • editor.selectionBackground#C9301555
  • editor.selectionHighlightBackground#C9301533
  • editorBracketMatch.background#FF4E1F33
  • editorBracketMatch.border#FF4E1F
  • editorCursor.foreground#FFB347
  • editorGroupHeader.tabsBackground#1F0503
  • editorIndentGuide.activeBackground#4A2A2588
  • editorIndentGuide.background#4A2A2544
  • editorLineNumber.activeForeground#FFB347
  • editorLineNumber.foreground#5A3F3F
  • editorWhitespace.foreground#4A2A25
  • focusBorder#FFB347
  • gitDecoration.conflictingResourceForeground#FFB16D
  • gitDecoration.deletedResourceForeground#FF3B2F
  • gitDecoration.modifiedResourceForeground#FF6F3C
  • gitDecoration.untrackedResourceForeground#B38A6D
  • input.background#260704
  • input.border#2A0E0A
  • input.foreground#F5E8E0
  • input.placeholderForeground#5A3F3F
  • inputOption.activeBorder#FFB347
  • list.activeSelectionBackground#2A0E0A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A0E0A
  • list.highlightForeground#FFB347
  • list.hoverBackground#2A0E0A66
  • minimap.background#1F0503
  • minimapSlider.activeBackground#FF4E1F66
  • minimapSlider.background#FF4E1F22
  • minimapSlider.hoverBackground#FF4E1F44
  • panel.background#1F0503
  • panel.border#2A0E0A
  • panelTitle.activeBorder#FFB347
  • panelTitle.activeForeground#FFB347
  • panelTitle.inactiveForeground#E0D4D0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF4E1F88
  • scrollbarSlider.background#5A3F3F44
  • scrollbarSlider.hoverBackground#5A3F3F88
  • sideBar.background#260704
  • sideBar.foreground#E0D4D0
  • sideBarSectionHeader.background#120200
  • sideBarSectionHeader.foreground#FFB347
  • sideBarTitle.foreground#FF6F3C
  • statusBar.background#2A0E0A
  • statusBar.debuggingBackground#C93015
  • statusBar.foreground#F5E8E0
  • statusBar.noFolderBackground#120200
  • statusBarItem.hoverBackground#311A19
  • tab.activeBackground#2A0E0A
  • tab.activeBorder#FFB347
  • tab.activeForeground#FFFFFF
  • tab.border#1F0503
  • tab.inactiveBackground#260704
  • tab.inactiveForeground#E0D4D0
  • terminal.ansiBlue#8A7F78
  • terminal.ansiBrightBlue#A89C94
  • terminal.ansiBrightCyan#C1B5AD
  • terminal.ansiBrightGreen#D1A896
  • terminal.ansiBrightMagenta#E8C5B8
  • terminal.ansiBrightRed#FF8B6D
  • terminal.ansiBrightYellow#FFB16D
  • terminal.ansiCyan#A89C94
  • terminal.ansiGreen#B38A6D
  • terminal.ansiMagenta#D1A896
  • terminal.ansiRed#FF6F3C
  • terminal.ansiYellow#FFAA5C
  • terminal.background#1F0503
  • terminal.foreground#F5E8E0
  • titleBar.activeBackground#120200
  • titleBar.activeForeground#F5E8E0
  • titleBar.inactiveBackground#1F0503
  • titleBar.inactiveForeground#E0D4D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A3F3Fitalic
string, string.quoted, string.template#FFAA5C
keyword, storage.type, storage.modifier#FF4E1Abold
keyword.operator, punctuation.accessor#FF874B
variable, variable.other#E8D4C9
variable.parameter#F2C9A0italic
entity.name.function, support.function#FF874B
meta.function-call#F2C9A0
entity.name.class, entity.name.type.class, support.class#FF4E1Abold
entity.name.type, support.type#FFAA5C
entity.name.type.interface#F2C9A0italic
constant.numeric#FFAA5C
constant, constant.language, constant.character#FF6F3C
constant.language.boolean#FFAA5Cbold
variable.other.property, support.variable.property#F2C9A0
meta.object-literal.key#FF874B
entity.name.tag, punctuation.definition.tag#FF4E1A
entity.other.attribute-name#F2C9A0italic
punctuation, meta.brace#FF874B
string.regexp#FFAA5C
constant.character.escape#F2C9A0
meta.decorator, punctuation.decorator#FFAA5C
invalid, invalid.illegal#FF3B2Fstrikethrough
markup.heading, entity.name.section#FF4E1Abold
markup.bold#FF6F3Cbold
markup.italic#F2C9A0italic
markup.underline.link#FF6F3C
markup.inline.raw, markup.fenced_code#B58D6D
support.type.property-name.json#FF874B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFAA5C
support.type.property-name.css#FF874B
support.constant.property-value.css#FF6F3C