Skip to main content
CodingTheme

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#9f47ffitalic
keyword#e45100italic
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...