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#FFB74D
  • activityBar.background#0C1012
  • activityBar.foreground#FFB74D
  • activityBarBadge.background#FFB74D
  • activityBarBadge.foreground#0F0C0D
  • badge.background#FFB74D
  • badge.foreground#0F0C0D
  • button.background#191E21
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2A
  • dropdown.background#151A1C
  • dropdown.border#1B1F21
  • dropdown.foreground#E1E1E1
  • editor.background#0F0C0D
  • editor.findMatchBackground#FFB74D44
  • editor.findMatchHighlightBackground#FFB74D22
  • editor.foreground#E1E1E1
  • editor.lineHighlightBackground#191E2140
  • editor.lineHighlightBorder#191E2180
  • editor.selectionBackground#4A7A8C55
  • editor.selectionHighlightBackground#4A7A8C33
  • editorBracketMatch.background#FFB74D33
  • editorBracketMatch.border#FFB74D
  • editorCursor.foreground#FFB74D
  • editorGroupHeader.tabsBackground#0F0C0D
  • editorIndentGuide.activeBackground#4A7A8C88
  • editorIndentGuide.background#3A3A3A44
  • editorLineNumber.activeForeground#FFB74D
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#FFB74D
  • gitDecoration.conflictingResourceForeground#FFB74D
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#A4E043
  • input.background#151A1C
  • input.border#1B1F21
  • input.foreground#E1E1E1
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#FFB74D
  • list.activeSelectionBackground#191E21
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#191E21
  • list.highlightForeground#FFB74D
  • list.hoverBackground#191E2166
  • minimap.background#0F0C0D
  • minimapSlider.activeBackground#FFB74D66
  • minimapSlider.background#FFB74D22
  • minimapSlider.hoverBackground#FFB74D44
  • panel.background#0F0C0D
  • panel.border#1B1F21
  • panelTitle.activeBorder#FFB74D
  • panelTitle.activeForeground#FFB74D
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB74D88
  • scrollbarSlider.background#3A3A3A44
  • scrollbarSlider.hoverBackground#3A3A3A88
  • sideBar.background#111416
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#151A1C
  • sideBarSectionHeader.foreground#FFB74D
  • sideBarTitle.foreground#FFB74D
  • statusBar.background#1B1F21
  • statusBar.debuggingBackground#FFB74D
  • statusBar.foreground#E1E1E1
  • statusBar.noFolderBackground#0C1012
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#191E21
  • tab.activeBorder#FFB74D
  • tab.activeForeground#FFFFFF
  • tab.border#0F0C0D
  • tab.inactiveBackground#111416
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#7AB8FF
  • terminal.ansiBrightCyan#8AD8F3
  • terminal.ansiBrightGreen#B8FF6B
  • terminal.ansiBrightMagenta#E5B6FF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFD78A
  • terminal.ansiCyan#5FC3D1
  • terminal.ansiGreen#A4E043
  • terminal.ansiMagenta#C58BFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFB74D
  • terminal.background#0F0C0D
  • terminal.foreground#E1E1E1
  • titleBar.activeBackground#0C1012
  • titleBar.activeForeground#E1E1E1
  • titleBar.inactiveBackground#0F0C0D
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#A4E043
keyword, storage.type, storage.modifier#FFB74Dbold
keyword.operator, punctuation.accessor#FFB74D
variable, variable.other#E1E1E1
variable.parameter#FFCD85italic
entity.name.function, support.function#FFCD85
meta.function-call#E1E1E1
entity.name.class, entity.name.type.class, support.class#FFB74Dbold
entity.name.type, support.type#FFB74D
entity.name.type.interface#FFCD85italic
constant.numeric#FFB74D
constant, constant.language, constant.character#FFCD85
constant.language.boolean#FFB74Dbold
variable.other.property, support.variable.property#E1E1E1
meta.object-literal.key#FFB74D
entity.name.tag, punctuation.definition.tag#FFB74D
entity.other.attribute-name#FFCD85italic
punctuation, meta.brace#8A8A8A
string.regexp#FFB74D
constant.character.escape#FFCD85
meta.decorator, punctuation.decorator#FFB74D
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#FFB74Dbold
markup.bold#FFCD85bold
markup.italic#FFCD85italic
markup.underline.link#A4E043
markup.inline.raw, markup.fenced_code#A4E043
support.type.property-name.json#FFB74D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB74D
support.type.property-name.css#FFB74D
support.constant.property-value.css#A4E043