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.background#000
  • activityBar.border#282727
  • activityBar.foreground#aaa
  • activityBar.inactiveForeground#666
  • activityBarBadge.background#aaa
  • activityBarBadge.foreground#252424
  • badge.background#999
  • badge.foreground#252424
  • button.background#999
  • button.foreground#151414
  • button.hoverBackground#aaa
  • diffEditor.insertedTextBackground#7e914118
  • diffEditor.removedTextBackground#bb284618
  • dropdown.background#000
  • dropdown.border#282727
  • editor.background#000000
  • editor.findMatchBackground#fce4b633
  • editor.findMatchHighlightBackground#fcfcb622
  • editor.foreground#aaa
  • editor.rangeHighlightBackground#fcfcb622
  • editor.selectionBackground#b3d4fc44
  • editorCursor.foreground#fff
  • editorError.foreground#bb2846
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#282727
  • editorGutter.addedBackground#339bba44
  • editorGutter.deletedBackground#bb284644
  • editorGutter.modifiedBackground#31799844
  • editorLineNumber.activeForeground#aaa
  • editorLineNumber.foreground#777
  • editorLink.activeForeground#339bba
  • editorWarning.foreground6d5232
  • editorWidget.background#000
  • focusBorder#959290
  • gitDecoration.addedResourceForeground#7e9141
  • gitDecoration.deletedResourceForeground#bb2846
  • gitDecoration.modifiedResourceForeground#317998
  • gitDecoration.renamedResourceForeground#6d5232
  • input.background#000
  • input.border#282727
  • list.activeSelectionBackground#b3d4fc44
  • list.activeSelectionForeground#aaa
  • list.errorForeground#bb2846
  • list.focusBackground#b3d4fc44
  • list.highlightForeground#317998
  • list.hoverBackground#b3d4fc22
  • list.inactiveSelectionBackground#b3d4fc44
  • list.inactiveSelectionForeground#aaa
  • list.warningForeground#6d5232
  • notificationLink.foreground#317998
  • notificationsErrorIcon.foreground#9c4174
  • notificationsInfoIcon.foreground#317998
  • notificationsWarningIcon.foreground#6d5232
  • panel.background#000
  • panel.border#282727
  • progressBar.background#aaa
  • quickInput.background#000
  • sideBar.background#000
  • sideBar.border#282727
  • sideBar.foreground#aaa
  • sideBarTitle.foreground#777
  • statusBar.background#000
  • statusBar.border#282727
  • statusBar.debuggingBackground#593e4e
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#000
  • tab.activeBorder#000
  • tab.activeForeground#aaa
  • tab.border#282727
  • tab.inactiveBackground#000
  • tab.inactiveForeground#777
  • tab.selectedBorderTop#00000000
  • terminal.ansiBlack#000
  • terminal.ansiBlue#317998
  • terminal.ansiBrightBlack#222
  • terminal.ansiBrightBlue#75bddc
  • terminal.ansiBrightCyan#00cece
  • terminal.ansiBrightGreen#ccdd85
  • terminal.ansiBrightMagenta#dd85b8
  • terminal.ansiBrightRed#dd6c8a
  • terminal.ansiBrightWhite#ddd
  • terminal.ansiBrightYellow#ddba85
  • terminal.ansiCyan#008a8a
  • terminal.ansiGreen#7e9141
  • terminal.ansiMagenta#9c4174
  • terminal.ansiRed#bb2846
  • terminal.ansiWhite#4e5e6e
  • terminal.ansiYellow#6d5232
  • terminal.selectionBackground#b3d4fc44
  • textLink.activeForeground#339bba
  • textLink.foreground#339bba
  • titleBar.activeBackground#000
  • titleBar.border#282727
  • titleBar.inactiveBackground#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.other.attribute-name#d1949e—
constant, string.quoted.double.html, string#A0BE63—
comment, punctuation.definition.comment#708090—
entity.name.tag, property, support.type.property-name.json, support.type.property-name.css#BE6396—
entity.name.function, entity.name.type.class#BE6396—
entity.name.section.markdown, keyword, keyword.operator.new, storage.modifier, storage.type, variable.language.this#339bba—
markup.changed#6d5232—
markup.deleted#bb2846—
markup.inserted#7e9141—
keyword.operator#8F7454—
meta.brace.round, punctuation#777—
constant.numeric.css, keyword.other.unit, variable#aaa—
entity.name.tag.css, entity.name.tag.html, entity.name.tag.wildcard.css, entity.other.attribute-name.class.css, entity.other.attribute-name.html, entity.other.attribute-name.id.css, punctuation.definition.entity.css, tag#539bba—
entity.other.attribute-name.html#91bab8—