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#2B2D30
  • activityBar.foreground#DFE1E5
  • breadcrumb.activeSelectionForeground#DFE1E5
  • breadcrumb.background#2B2D30
  • breadcrumb.focusForeground#DFE1E5
  • breadcrumb.foreground#9DA0A8
  • diffEditor.insertedTextBackground#54915933
  • diffEditor.removedTextBackground#868A9133
  • editor.background#1E1F22
  • editor.findMatchBackground#2D543F
  • editor.findMatchBorder#42BD77
  • editor.findMatchHighlightBackground#114957a4
  • editor.findMatchHighlightBorder#165E70
  • editor.findRangeHighlightBackground#2D543F66
  • editor.foreground#BCBEC4
  • editor.inactiveSelectionBackground#26282eba
  • editor.lineHighlightBackground#26282E
  • editor.selectionBackground#2B2D30
  • editor.wordHighlightBackground#373b39a6
  • editor.wordHighlightStrongBackground#402f3399
  • editorBracketMatch.background#43454A
  • editorBracketMatch.border#43454A
  • editorCursor.foreground#CED0D6
  • editorError.foreground#FA6675
  • editorGutter.addedBackground#549159
  • editorGutter.deletedBackground#868A91
  • editorGutter.modifiedBackground#375FAD
  • editorHoverWidget.background#2B2D30
  • editorHoverWidget.border#43454A
  • editorIndentGuide.activeBackground1#666870
  • editorIndentGuide.background1#313438
  • editorInfo.foreground#857042
  • editorInlayHint.background#393B40
  • editorInlayHint.foreground#868A91
  • editorInlayHint.typeBackground#35538F
  • editorInlayHint.typeForeground#83ACFC
  • editorLineNumber.activeForeground#A1A3AB
  • editorLineNumber.foreground#4B5059
  • editorRuler.foreground#393B40
  • editorSuggestWidget.background#2B2D30
  • editorSuggestWidget.border#43454A
  • editorSuggestWidget.foreground#BCBEC4
  • editorSuggestWidget.selectedBackground#373B39
  • editorWarning.foreground#F2C55C
  • editorWhitespace.foreground#6F737A
  • gitDecoration.addedResourceForeground#73BD79
  • gitDecoration.conflictingResourceForeground#DE6A66
  • gitDecoration.deletedResourceForeground#6F737A
  • gitDecoration.ignoredResourceForeground#D69A6B
  • gitDecoration.modifiedResourceForeground#70AEFF
  • gitDecoration.renamedResourceForeground#70AEFF
  • gitDecoration.submoduleResourceForeground#CF84CF
  • gitDecoration.untrackedResourceForeground#73BD79
  • list.activeSelectionBackground#373B39
  • list.hoverBackground#43454A
  • list.inactiveSelectionBackground#373B39
  • notificationCenterHeader.background#25324D
  • notifications.background#25324D
  • notifications.foreground#CED0D6
  • panel.background#2B2D30
  • scrollbarSlider.activeBackground#FFFFFF4D
  • scrollbarSlider.background#FFFFFF26
  • scrollbarSlider.hoverBackground#FFFFFF4D
  • sideBar.background#2B2D30
  • sideBar.foreground#BCBEC4
  • statusBar.background#2B2D30
  • tab.activeBackground#1E1F22
  • tab.activeForeground#DFE1E5
  • tab.inactiveBackground#2B2D30
  • tab.inactiveForeground#9DA0A8
  • terminal.background#1E1F22
  • terminal.foreground#BCBEC4
  • textLink.activeForeground#B189F5
  • textLink.foreground#548AF7
  • titleBar.activeBackground#2B2D30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.line#7A7E85italic
comment.block.documentation, comment.block.jsdoc, comment.block.phpdoc#5F826Bitalic
comment.block.documentation entity.other.attribute-name, comment.block.documentation keyword, keyword.other.phpdoc, storage.type.class.phpdoc#67A37C
string, string.quoted, string.template#6AAB73
constant.character.escape, string.escape#CF8E6D
invalid.illegal.escape#F75464underline
constant.numeric, constant.language.boolean, constant.language.null#2AACB8
constant.other, variable.other.constant#C77DBBitalic
keyword, storage, storage.type, storage.modifier#CF8E6D
entity.name.function, support.function, meta.function-call, meta.function-call entity.name.function, variable.function#56A8F5
entity.name.type, entity.name.class, support.class, support.type, support.class.builtin, entity.other.inherited-class, meta.use support.class, meta.namespace support.class, meta.use entity.name.type#DFE1E5
variable.other.php, variable.parameter.php, variable.other.global.php, variable.other.member.php, variable.language.this.php, punctuation.definition.variable.php#C77DBB
variable.other.member, meta.property.object, support.variable.property#C77DBB
entity.name.tag, meta.tag, punctuation.definition.tag#D5B778
support.class.component, entity.name.tag.custom#2FBAA3
entity.other.attribute-name#BCBEC4
constant.character.entity, punctuation.definition.entity#56A8F5
support.type.property-name.css, support.type.vendored.property-name.css#BCBEC4
support.constant.color.w3c-standard-color-name.css#56A8F5
variable.parameter.url, variable.parameter.url.css, string.quoted.url.css#5C92FF
keyword.other.important#CF8E6Dbold
string.regexp#42C3D4
constant.other.character-class.set.regexp#B2AE60bold
constant.character.escape.regexp#CF8E6D
keyword.operator.quantifier.regexp, punctuation.definition.group.regexp, punctuation.section.regexp#BCBEC4
invalid.deprecated.escape.regexp#6F7587italic
markup.underline.link, markup.underline.link.image, meta.link.inline#56A8F5
storage.type.annotation, meta.annotation, entity.name.tag.yaml#B3AE60
variable.other.property, variable.other.property.php, variable.other.member, variable.other.member.php, support.variable.property, support.variable.property.php, meta.property, meta.property.object, meta.property.object.php#C77DBB
keyword.other.phpdoc, storage.type.phpdoc, entity.name.tag.phpdoc, entity.name.tag.documentation, comment.block.documentation keyword, comment.block.documentation storage, support.type.throws.phpdoc, punctuation.definition.keyword.phpdoc#67A37C