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—