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#FF6A00
  • activityBar.background#1E1F26
  • activityBar.foreground#9DA5B4
  • activityBarBadge.background#FF6A00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5A7D9A
  • badge.foreground#FFFFFF
  • button.background#FF6A00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8C33
  • dropdown.background#1E1F26
  • dropdown.border#4B4E58
  • dropdown.foreground#C5C8C6
  • editor.background#0B0C10
  • editor.findMatchBackground#FF6A0055
  • editor.findMatchHighlightBackground#FF6A0033
  • editor.foreground#C5C8C6
  • editor.lineHighlightBackground#1E1F26
  • editor.lineHighlightBorder#FF6A00
  • editor.selectionBackground#3E4451
  • editor.selectionHighlightBackground#3E4451
  • editorBracketMatch.background#FF6A0033
  • editorBracketMatch.border#FF6A00
  • editorCursor.foreground#FF6A00
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#9DA5B4
  • editorIndentGuide.background#4B4E58
  • editorLineNumber.activeForeground#FF6A00
  • editorLineNumber.foreground#5A7D9A
  • editorWhitespace.foreground#4B4E58
  • focusBorder#FF6A00
  • gitDecoration.conflictingResourceForeground#C678DD
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#E5C07B
  • gitDecoration.untrackedResourceForeground#98C379
  • input.background#1E1F26
  • input.border#4B4E58
  • input.foreground#C5C8C6
  • input.placeholderForeground#5A7D9A
  • inputOption.activeBorder#FF6A00
  • list.activeSelectionBackground#3E4451
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3E4451
  • list.highlightForeground#FF6A00
  • list.hoverBackground#2A2D38
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF6A00
  • minimapSlider.background#4B4E58
  • minimapSlider.hoverBackground#5A7D9A
  • panel.background#14161F
  • panel.border#0B0C10
  • panelTitle.activeBorder#FF6A00
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#9DA5B4
  • scrollbar.shadow#0B0C10
  • scrollbarSlider.activeBackground#FF6A00
  • scrollbarSlider.background#4B4E58
  • scrollbarSlider.hoverBackground#5A7D9A
  • sideBar.background#14161F
  • sideBar.foreground#C5C8C6
  • sideBarSectionHeader.background#1E1F26
  • sideBarSectionHeader.foreground#C5C8C6
  • sideBarTitle.foreground#9DA5B4
  • statusBar.background#20222A
  • statusBar.debuggingBackground#FF6A00
  • statusBar.foreground#C5C8C6
  • statusBar.noFolderBackground#20222A
  • statusBarItem.hoverBackground#2A2D38
  • tab.activeBackground#0B0C10
  • tab.activeBorder#FF6A00
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C10
  • tab.inactiveBackground#14161F
  • tab.inactiveForeground#9DA5B4
  • terminal.ansiBlue#5A7D9A
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#C678DD
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#E5C07B
  • terminal.background#0B0C10
  • terminal.foreground#C5C8C6
  • titleBar.activeBackground#0B0C10
  • titleBar.activeForeground#C5C8C6
  • titleBar.inactiveBackground#14161F
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A7D9Aitalic
string, string.quoted, string.template#98C379
keyword, storage.type, storage.modifier#FF6A00bold
keyword.operator, punctuation.accessor#C678DD
variable, variable.other#C5C8C6
variable.parameter#9DA5B4italic
entity.name.function, support.function#61AFEF
meta.function-call#56B6C2
entity.name.class, entity.name.type.class, support.class#E5C07Bbold
entity.name.type, support.type#E06C75
entity.name.type.interface#56B6C2italic
constant.numeric#D19A66
constant, constant.language, constant.character#D19A66
constant.language.boolean#E06C75bold
variable.other.property, support.variable.property#E5C07B
meta.object-literal.key#61AFEF
entity.name.tag, punctuation.definition.tag#FF6A00
entity.other.attribute-name#C678DDitalic
punctuation, meta.brace#9DA5B4
string.regexp#56B6C2
constant.character.escape#D19A66
meta.decorator, punctuation.decorator#C678DD
invalid, invalid.illegal#E06C75strikethrough
markup.heading, entity.name.section#FF6A00bold
markup.bold#FF6A00bold
markup.italic#C5C8C6italic
markup.underline.link#61AFEF
markup.inline.raw, markup.fenced_code#98C379
support.type.property-name.json#61AFEF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C678DD
support.type.property-name.css#98C379
support.constant.property-value.css#56B6C2