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#181b25
  • activityBar.foreground#cdcdcd
  • activityBarBadge.background#004597
  • badge.background#165fb3AA
  • button.background#002daa
  • dropdown.background#202432
  • editor.background#202432
  • editor.findMatchBackground#00338b
  • editor.findMatchHighlightBackground#00000055
  • editor.foreground#d3d0c8
  • editor.lineHighlightBackground#ffffff33
  • editor.selectionBackground#00000055
  • editorCursor.foreground#ffffff
  • editorGroup.border#1591ffaa
  • editorGroup.dropBackground#004cbd88
  • editorGroupHeader.tabsBackground#191c28
  • editorGutter.addedBackground#1f5ce9
  • editorGutter.deletedBackground#e9004b
  • editorGutter.modifiedBackground#00b70e
  • editorLineNumber.foreground#979797
  • editorWhitespace.foreground#747369
  • errorForeground#ff0948
  • focusBorder#165fb3
  • inputOption.activeBorder#0d2c5a
  • inputValidation.errorBackground#e31846ee
  • inputValidation.errorBorder#e31846
  • inputValidation.infoBackground#0071b7
  • inputValidation.infoBorder#0098c9
  • inputValidation.warningBackground#e97f00
  • inputValidation.warningBorder#ffaa41
  • list.activeSelectionBackground#00000077
  • list.activeSelectionForeground#ffffffaa
  • list.focusBackground#00000055
  • list.highlightForeground#0f96ff
  • list.hoverBackground#00000033
  • list.inactiveSelectionBackground#00000033
  • notification.background#48469c
  • panel.background#252f46
  • peekView.border#3572ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#001422
  • peekViewResult.background#001422
  • peekViewResult.matchHighlightBackground#004f7e
  • peekViewTitle.background#38385d
  • pickerGroup.border#0e377b
  • pickerGroup.foreground#2fb8ff
  • progressBar.background#0025b7
  • selection.background#3b446f
  • sideBar.background#1c1f2b
  • sideBarSectionHeader.background#1b375c
  • statusBar.background#001432
  • statusBar.debuggingBackground#ff732f
  • statusBar.noFolderBackground#1b6fff
  • tab.activeBackground#202432
  • tab.activeBorder#1591ff
  • tab.inactiveBackground#1e2228
  • titleBar.activeBackground#191c28

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d3d0c8ff
variable.parameter.function#1e90ff
comment, punctuation.definition.comment#747369
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d3d0c8
none#d3d0c8
keyword.operator#ef002f
entity.name.atomtag.vinala-atomium#de0458
entity.name.echo.vinala-atomium#9f47ff
keyword#22a8cd
variable#a97bff
entity.name.function, meta.require, support.function.any-method#01a84f
support.class, entity.name.class, entity.name.type.class#1be4ff
meta.class#00ffff
keyword.other.special-method#6699cc
storage#3e87dc
support.function#66cccc
string, constant.other.symbol, entity.other.inherited-class#fe5c7b
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#15b7ff
meta.property-name, support.type.property-name#8bc34a
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