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—