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.activeBackground#222
  • activityBar.activeBorder#0000
  • activityBar.background#333
  • activityBar.foreground#fff
  • activityBarBadge.background#37c
  • activityBarTop.activeBackground#222
  • activityBarTop.activeBorder#0000
  • activityBarTop.background#333
  • dropdown.background#333
  • editor.background#141414
  • editor.findMatchBackground#888
  • editor.findMatchHighlightBackground#fff4
  • editor.inactiveSelectionBackground#3337
  • editor.lineHighlightBackground#fff2
  • editor.selectionBackground#444
  • editor.selectionHighlightBackground#fff3
  • editorBracketHighlight.foreground1#fd0
  • editorBracketHighlight.foreground2#f90
  • editorBracketHighlight.foreground3#f40
  • editorCursor.foreground#fff
  • editorGroup.border#444
  • editorGroup.dropBackground#fff2
  • editorGroupHeader.tabsBackground#222
  • editorHoverWidget.background#222
  • editorIndentGuide.activeBackground1#777
  • editorIndentGuide.background1#333
  • editorLightBulb.foreground#ff0
  • editorLightBulbAutoFix.foreground#7f8
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#ccc
  • editorMarkerNavigationWarning.background#eee
  • editorOverviewRuler.warningForeground#eee
  • editorRuler.foreground#444a
  • editorStickyScroll.background#141414aa
  • editorStickyScroll.shadow#141414aa
  • editorStickyScrollGutter.background#141414aa
  • editorSuggestWidget.background#222
  • editorSuggestWidget.selectedBackground#444
  • editorWarning.foreground#ccc
  • editorWidget.background#444
  • extensionButton.prominentBackground#7f87
  • input.background#141414
  • inputOption.activeBackground#777
  • list.activeSelectionBackground#777
  • list.hoverBackground#555
  • list.warningForeground#ef7
  • menu.selectionBackground#333
  • panel.background#141414
  • panelSection.dropBackground#fff1
  • panelSectionHeader.background#222
  • selection.background#fff4
  • sideBar.background#222
  • sideBar.dropBackground#333
  • sideBarSectionHeader.background#444
  • statusBar.background#444
  • tab.activeBackground#141414
  • tab.inactiveBackground#2d2d2d
  • terminal.ansiBlack#777
  • terminal.ansiBlue#39f
  • terminal.ansiBrightBlack#999
  • terminal.ansiBrightBlue#9ef
  • terminal.ansiBrightCyan#3ce
  • terminal.ansiBrightGreen#0f4
  • terminal.ansiBrightMagenta#eaf
  • terminal.ansiBrightRed#f00
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#ff0
  • terminal.ansiCyan#0bd
  • terminal.ansiGreen#7f8
  • terminal.ansiMagenta#a8f
  • terminal.ansiRed#f44
  • terminal.ansiWhite#eee
  • terminal.ansiYellow#ef7
  • titleBar.activeBackground#222
  • tree.indentGuidesStroke#777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
anchor#eaf
comment#777
constant#37c
constant.character.escape#777
constant.language.merge#eaf
entity#ec7
entity.name.function#9ef
entity.name.type.anchor#7be
entity.name.tag.reference#7be
entity.name.context#eee
source.github-actions-workflow entity.name, source.yaml entity.name, source.helm entity.name#b97
entity.other.document#eee
entity.other.inherited-class#ec7
entity.other.attribute-name#b97
entity.other.attribute-name.attribute#b97
entity.other.attribute-name.parent-selector-suffix punctuation#ec7
source.css entity.other.attribute-name#ec7
text entity.other.attribute-name#b97
entity.other.ng-binding-name.template entity#eaf
entity.other.ng-binding-name.property entity#7be
entity.other.ng-binding-name.event entity, entity.other.ng-binding-name.two-way entity#9ef
keyword#aaa
keyword.control#eaf
keyword.control.as, case-clause keyword.control#a8f
keyword.control.-, keyword.control.@, keyword.control.-@, keyword.control.import, keyword.control.export, keyword.control.from#aaa
keyword.control.at-rule#aaa
keyword.control.at-rule.media#eaf
keyword.directive#b97
keyword.operator#eee
keyword.operator.expression#eaf
keyword.operator.expression.import#aaa
keyword.operator.new#a8f
keyword.other.important#eee
keyword.other.debugger#eaf
keyword.other.special-method#9ef
meta.attribute-selector#7f8
meta.property-name, meta.object-literal.key#b97
meta.function, meta.function-call#9ef
meta.function support, meta.function-call support#37c
meta.brace#eee
meta.type, meta.selector#ec7
punctuation#eee
punctuation.definition.comment, punctuation.definition.interpolation, punctuation.definition.string, punctuation.definition.tag, punctuation.definition.template-expression, punctuation.definition.type, punctuation.definition.typeparameters, punctuation.definition.variable#777
punctuation.definition.anchor#eaf
punctuation.definition.constant#aaa
source.nginx punctuation.definition.variable#aaa
punctuation.section, punctuation.support, punctuation.terminator#777
punctuation.section.function, punctuation.section.property-list, punctuation.support.function, punctuation.support.property-list, punctuation.terminator.function, punctuation.terminator.property-list#eee
storage#a8f
storage.modifier#aaa
string#7f8
string.ipaddress#37c
support.constant#37c
support.constant.mathematical-symbols#eee
support.class, support.type#ec7
support.class.property-name, support.class.map.key, support.type.property-name, support.type.map.key#b97
support.class.object.module, support.type.object.module#aaa
support.function#9ef
support.variable#7be
text.html#eee
variable#7be
variable.language#37c
variable.parameter.url#7f8
🕹 Arcade by Chris Bailey - VS Code Theme