Skip to main content
Coding Theme

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.

  • editor.background#181c1f
  • editor.findMatchBackground#ffcc00
  • editor.findMatchHighlightBackground#ffff0050
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#2e2e2e
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#ffffff50
  • editorBracketMatch.background#004f00
  • editorBracketMatch.border#006600
  • editorCursor.foreground#00ff4c
  • editorGroupHeader.tabsBackground#2e2e2e
  • editorWhitespace.foreground#444c53
  • menu.background#241818
  • panel.background#1e1e1e
  • panel.border#007acc
  • panelTitle.activeBorder#73ff00
  • panelTitle.activeForeground#73ff00
  • panelTitle.inactiveForeground#807070
  • sideBar.background#12161a
  • sideBar.border#1a1a1a
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#302d2d
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#2d76e4
  • statusBar.background#181c1f
  • statusBar.debuggingBackground#cc3700
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#979393
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#005f87
  • statusBarItem.hoverBackground#005f87
  • statusBarItem.prominentBackground#007acc
  • statusBarItem.prominentHoverBackground#005f87
  • tab.activeBackground#284c64
  • tab.activeBorder#73ff00
  • tab.activeBorderTop#73ff00
  • tab.hoverBackground#4b748f
  • tab.inactiveBackground#333333
  • tab.unfocusedActiveBorder#00ff00
  • tab.unfocusedHoverBackground#284c64
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3b8eea
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3ad353
  • terminal.ansiMagenta#bb68bb
  • terminal.ansiRed#f14c4c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#dbdb50
  • terminal.background#181c1f
  • terminal.foreground#d4d4d4
  • titleBar.activeBackground#3d3e41
  • titleBar.border#4b748f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#646972italic
punctuation.terminator, punctuation.separator#b8aeae
variable.other#e6466e
variable.language#e6b863
entity.other.inherited-class#e6b863bold
support.function#57cfdf
constant.other.color#ffffff
invalid, invalid.illegal#70ac10
storage.type, storage.modifier#cf4eba
keyword.operator.assignment#57dfd3
keyword.operator#97a2b6
keyword.operator.comparison#57dfd3
string.quoted.double#91be6c
constant.numeric#e6b863
keyword.control, punctuation.section.embedded, keyword.other.substitution#cf4eba
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#df5057
meta.function-call, variable.function, entity.name.function, keyword.other.special-method#16b8c4
meta.block variable.other#f07178
support.other.variable, string.other.link#f07178
constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#c540b3
constant.language#e68c25bold
support.constant#df9a4b
string#91be6c
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#e6b863
support.type#84979e
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#bebebe
punctuation.definition.tag#c3b4c7
entity.other.attribute-name#db9f44
entity.other.attribute-value#98c379
Yondog Dark Theme by Kirik - VS Code Theme