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#110f1a
  • activityBar.foreground#7a7398
  • activityBarBadge.background#7b36e2
  • badge.background#4916b3
  • button.background#7b36e2
  • debugToolBar.background#2a1c3e
  • debugToolBar.border#100422
  • dropdown.background#202432
  • editor.background#110e1a
  • editor.findMatchBackground#42108c
  • editor.findMatchHighlightBackground#42108c99
  • editor.foreground#a497b5
  • editor.lineHighlightBackground#00000099
  • editor.selectionBackground#000
  • editorCursor.foreground#ffffff
  • editorGroup.border#7b36e2
  • editorGroup.dropBackground#7b36e244
  • editorGroupHeader.tabsBackground#110e1a
  • editorGutter.addedBackground#1f5ce9
  • editorGutter.deletedBackground#e9004b
  • editorGutter.modifiedBackground#00b70e
  • editorIndentGuide.activeBackground#ff000000
  • editorIndentGuide.background#7b36e244
  • editorLineNumber.foreground#e3d1ff33
  • editorWhitespace.foreground#7f66a3
  • editorWidget.background#2a1c3e
  • editorWidget.border#100422
  • errorForeground#ff0948
  • focusBorder#7b36e2
  • input.background#9c64ee22
  • input.border#9c64ee44
  • inputOption.activeBorder#9c64ee16
  • inputValidation.errorBackground#e31846ee
  • inputValidation.errorBorder#e31846
  • inputValidation.infoBackground#0071b7
  • inputValidation.infoBorder#094590
  • inputValidation.warningBackground#e97f00
  • inputValidation.warningBorder#ffaa41
  • list.activeSelectionBackground#00000077
  • list.activeSelectionForeground#ffffffaa
  • list.focusBackground#00000055
  • list.highlightForeground#7b36e2
  • list.hoverBackground#00000033
  • list.inactiveSelectionBackground#00000033
  • notification.background#58368a
  • panel.background#201329
  • peekView.border#5158d8
  • peekViewEditor.background#110028
  • peekViewEditor.matchHighlightBackground#001422
  • peekViewResult.background#0e0021
  • peekViewResult.matchHighlightBackground#2b0264
  • peekViewTitle.background#38385d
  • pickerGroup.border#490e7b
  • pickerGroup.foreground#8838ff
  • progressBar.background#4600b7
  • scrollbar.shadow#7e28ff11
  • scrollbarSlider.activeBackground#7e28ff99
  • scrollbarSlider.background#69588322
  • scrollbarSlider.hoverBackground#69588333
  • selection.background#3b446f
  • sideBar.background#110f1a
  • sideBar.foreground#7a7398
  • sideBarSectionHeader.background#00000044
  • statusBar.background#110e1a
  • statusBar.debuggingBackground#4b00bb
  • statusBar.foreground#85749f
  • statusBar.noFolderBackground#4b208b
  • tab.activeBackground#191526
  • tab.activeBorder#7b36e2
  • tab.inactiveBackground#161221
  • tab.inactiveForeground#60576f
  • titleBar.activeBackground#110E1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#d3d0c8ff—
variable.parameter.function#1ce566—
comment, punctuation.definition.comment#60576f—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d3d0c8—
none#e40043—
keyword.operator#008ed2—
entity.name.atomtag.vinala-atomium#e40043—
entity.name.echo.vinala-atomium#9f47ff—
keyword#e45100—
variable#a5d851—
entity.name.function, meta.require, support.function.any-method#008ed2—
support.class, entity.name.class, entity.name.type.class#9f47ff—
meta.class#00ffff—
keyword.other.special-method#6699cc—
storage#ae51d8—
support.function#66cccc—
string, constant.other.symbol, entity.other.inherited-class#c30051—
constant.numeric#f99157—
none#f99157—
none#f99157—
constant#f99157—
entity.name.tag#20b2aa—
entity.name.subtag#00ff00—
entity.other.attribute-name#00bcd4—
entity.other.attribute-name.id, punctuation.definition.entity#6699cc—
meta.selector#cc99cc—
none#f99157—
markup.heading punctuation.definition.heading, entity.name.section#6699cc
keyword.other.unit#f99157—
markup.bold, punctuation.definition.bold#ffcc66bold
markup.italic, punctuation.definition.italic#cc99ccitalic
markup.raw.inline#99cc99—
string.other.link#f2777a—
meta.link#f99157—
markup.list#f2777a—
markup.quote#f99157—
meta.separator#d3d0c8—
markup.inserted, markup.inserted.git_gutter#d21d52—
markup.deleted, markup.deleted.git_gutter#f2777a—
markup.changed, markup.changed.git_gutter#cc99cc—
markup.ignored, markup.ignored.git_gutter#515151—
markup.untracked, markup.untracked.git_gutter#515151—
constant.other.color#66cccc—
string.regexp#66cccc—
constant.character.escape#66cccc—
punctuation.section.embedded, variable.interpolation#d27b53—
invalid.illegal#2d2d2d—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#8bc34a—
meta.property-name, support.type.property-name#15b7ff—
keyword.other.important#ff0960bold
markup.deleted.git_gutter#F92672—
markup.inserted.git_gutter#A6E22E—
markup.changed.git_gutter#967EFB—
markup.ignored.git_gutter#565656—
markup.untracked.git_gutter#565656—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—