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#070511
  • activityBar.border#1A1730
  • activityBar.foreground#C9D1D9
  • activityBar.inactiveForeground#5B6470
  • activityBarBadge.background#9b70ff
  • activityBarBadge.foreground#0B0D14
  • badge.background#19144A
  • badge.foreground#e6dcff
  • breadcrumb.activeSelectionForeground#e6dcff
  • breadcrumb.background#070511
  • breadcrumb.foreground#7D8590
  • descriptionForeground#7D8590
  • diffEditor.insertedLineBackground#94D3A215
  • diffEditor.removedLineBackground#ff7aa215
  • dropdown.background#110B22
  • dropdown.border#1A1730
  • dropdown.foreground#C9D1D9
  • editor.background#0F0A1E
  • editor.findMatchBackground#241f4a
  • editor.findMatchBorder#b494ff
  • editor.findMatchHighlightBackground#19144A
  • editor.findMatchHighlightBorder#cdb8ff
  • editor.foreground#C9D1D9
  • editor.inactiveSelectionBackground#241f4a
  • editor.lineHighlightBackground#120D26
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#2d2559
  • editor.selectionHighlightBackground#1C1740
  • editor.wordHighlightBackground#171338
  • editor.wordHighlightStrongBackground#211A52
  • editorBracketMatch.background#19144A
  • editorBracketMatch.border#9b70ff
  • editorCursor.background#0F0A1E
  • editorCursor.foreground#cdb8ff
  • editorError.foreground#ff7aa2
  • editorGroupHeader.tabsBackground#070511
  • editorGutter.addedBackground#94D3A2
  • editorGutter.deletedBackground#ff7aa2
  • editorGutter.modifiedBackground#E2C08D
  • editorHoverWidget.background#110B22
  • editorHoverWidget.border#1A1730
  • editorIndentGuide.activeBackground1#3F3276
  • editorIndentGuide.background1#1A1632
  • editorInfo.foreground#74c7ec
  • editorLineNumber.activeForeground#C9D1D9
  • editorLineNumber.foreground#4E5563
  • editorRuler.foreground#1A1730
  • editorSuggestWidget.background#110B22
  • editorSuggestWidget.border#1A1730
  • editorSuggestWidget.highlightForeground#e6dcff
  • editorSuggestWidget.selectedBackground#19144A
  • editorWarning.foreground#F9E2AF
  • editorWhitespace.foreground#1B1733
  • errorForeground#ff7aa2
  • focusBorder#9b70ff
  • foreground#C9D1D9
  • gitDecoration.addedResourceForeground#94D3A2
  • gitDecoration.conflictingResourceForeground#F9E2AF
  • gitDecoration.deletedResourceForeground#ff7aa2
  • gitDecoration.ignoredResourceForeground#5B6470
  • gitDecoration.modifiedResourceForeground#E2C08D
  • gitDecoration.untrackedResourceForeground#94D3A2
  • input.background#110B22
  • input.border#1A1730
  • input.foreground#C9D1D9
  • input.placeholderForeground#5B6470
  • list.activeSelectionBackground#19144A
  • list.activeSelectionForeground#C9D1D9
  • list.focusOutline#00000000
  • list.highlightForeground#e6dcff
  • list.hoverBackground#0F0A1E
  • list.inactiveSelectionBackground#120D26
  • minimap.background#0F0A1E
  • minimap.findMatchHighlight#b494ff
  • minimap.selectionHighlight#2d2559
  • minimapGutter.addedBackground#cdb8ff
  • minimapGutter.deletedBackground#ff7aa2
  • minimapGutter.modifiedBackground#7859CD
  • panel.background#070511
  • panel.border#1A1730
  • peekView.border#1A1730
  • peekViewEditor.background#0F0A1E
  • peekViewResult.background#0B0716
  • peekViewTitle.background#070511
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#3F3276CC
  • scrollbarSlider.background#3F327666
  • scrollbarSlider.hoverBackground#3F327699
  • sideBar.background#0B0716
  • sideBar.border#1A1730
  • sideBar.foreground#C9D1D9
  • sideBarSectionHeader.background#0B0716
  • sideBarSectionHeader.foreground#C9D1D9
  • statusBar.background#070511
  • statusBar.border#1A1730
  • statusBar.debuggingBackground#523f93
  • statusBar.debuggingForeground#C9D1D9
  • statusBar.foreground#C9D1D9
  • tab.activeBackground#110B22
  • tab.activeForeground#C9D1D9
  • tab.border#1A1730
  • tab.inactiveBackground#0B0716
  • tab.inactiveForeground#7D8590
  • terminal.background#070511
  • terminal.foreground#C9D1D9
  • titleBar.activeBackground#070511
  • titleBar.activeForeground#C9D1D9
  • titleBar.inactiveBackground#070511
  • titleBar.inactiveForeground#7D8590

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5B6470italic
string, punctuation.definition.string#cdb8ff
string.template, string.regexp#e6dcff
constant.numeric, constant.language, constant.character, constant.other#F9E2AF
keyword, storage.type, storage.modifier#9b70ff
keyword.control#b494ff
entity.name.function, support.function, meta.function-call#e6dcff
entity.name.function.member, support.function.any-method#cdb8ff
entity.name.type, support.type, storage.type.class, meta.class#74c7ec
entity.name.type.interface, entity.name.type.type-parameter#89dceb
variable, meta.definition.variable, identifier#f5c2e7
variable.parameter, meta.parameter#e6dcff
variable.other.property, support.type.property-name#e6dcff
support.type.property-name.json, support.type.property-name.yaml, entity.name.tag.yaml#e6dcff
keyword.operator, punctuation, meta.brace, meta.delimiter#7D8590
entity.name.tag, support.class.component, meta.tag#cdb8ff
entity.other.attribute-name#74c7ec
markup.heading, entity.name.section.markdown#cdb8ffbold
markup.underline.link, string.other.link#74c7ecunderline
markup.inserted, punctuation.definition.inserted#cdb8ff
markup.deleted, punctuation.definition.deleted#ff7aa2
invalid, invalid.illegal#ff7aa2
StarGrider Neon Dark by roberto-dev - VS Code Theme