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#eaeaea
  • activityBar.foreground#666666
  • activityBarBadge.background#0f96ff
  • badge.background#949494
  • button.background#424242
  • dropdown.background#cad2d6
  • editor.background#fff
  • editor.findMatchBackground#d3ffdb
  • editor.findMatchHighlightBackground#bfddff
  • editor.foreground#57606c
  • editor.lineHighlightBackground#dfdfdf
  • editor.selectionBackground#dfdfdf
  • editorCursor.foreground#6e6e6e
  • editorGroup.dropBackground#C9D0D988
  • editorGroupHeader.tabsBackground#f7f7f7
  • editorLineNumber.foreground#979797
  • editorWhitespace.foreground#747369
  • errorForeground#ffeaea
  • focusBorder#dee5f4
  • inputOption.activeBorder#d1d1db
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#e9375b
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#0fd3ff
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffa073
  • list.activeSelectionBackground#e0e0e0
  • list.activeSelectionForeground#4c4c4c
  • list.focusBackground#9fcded
  • list.highlightForeground#0f96ff
  • list.inactiveSelectionBackground#e0e0e0
  • notification.background#595959
  • panel.background#ececec
  • peekView.border#3572ff
  • peekViewEditor.background#e8f2f9
  • peekViewEditor.matchHighlightBackground#d3e2ff
  • peekViewResult.background#f0f0f0
  • peekViewResult.matchHighlightBackground#f0f0f000
  • peekViewTitle.background#c8e0f1
  • pickerGroup.border#dee5f4
  • pickerGroup.foreground#A6B39B
  • progressBar.background#63a7f7
  • selection.background#d2dae7
  • sideBar.background#f4f4f4
  • sideBarSectionHeader.background#e5e5e5
  • statusBar.background#dfdfdf
  • statusBar.debuggingBackground#ffd5ba
  • statusBar.foreground#454545
  • statusBar.noFolderBackground#d3cbe1
  • tab.activeBackground#fff
  • tab.activeForeground#8e8e8e
  • tab.inactiveBackground#e2e2e2
  • tab.inactiveForeground#8e8e8e
  • titleBar.activeBackground#f7f7f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ee0000ff
variable.parameter.function#1e90ff
comment, punctuation.definition.comment#a7a7a7
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#717171
none#8e8e8e
keyword.operator#de0458
entity.name.atomtag.vinala-atomium#de0458
entity.name.echo.vinala-atomium#9f47ff
keyword#22a8cd
variable#ff7f50
entity.name.function, meta.require, support.function.any-method#00ee5f
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#ff2952
constant.numeric#f99157
none#f99157
none#f99157
constant#f99157
entity.name.tag#20b2aa
entity.name.subtag#00ff00
entity.other.attribute-name#f99157
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#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
Viow Color Themes by Youssef Had - VS Code Theme