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.

  • activityBar.background#181818
  • activityBar.foreground#BEBEBE
  • badge.background#73c936
  • badge.foreground#181818
  • debugToolBar.background#282828
  • debugToolBar.border#282828
  • dropdown.background#282828
  • dropdown.border#282828
  • editor.background#181818
  • editor.findMatchBackground#52494e
  • editor.findMatchHighlightBackground#52494e
  • editor.findRangeHighlightBackground#52494e
  • editor.hoverHighlightBackground#52494e
  • editor.lineHighlightBackground#282828
  • editor.selectionBackground#453d41
  • editor.selectionHighlightBackground#282828
  • editor.wordHighlightBackground#52494e
  • editor.wordHighlightStrongBackground#52494e
  • editorCursor.foreground#ffdd33
  • editorError.foreground#f43841
  • editorGroup.border#282828
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#73c936
  • editorGutter.deletedBackground#f43841
  • editorGutter.modifiedBackground#73c936
  • editorHint.foreground#9e95c7
  • editorIndentGuide.background1#484848
  • editorInfo.foreground#73c936
  • editorLineNumber.activeForeground#ffdd33
  • editorLineNumber.foreground#484848
  • editorOverviewRuler.findMatchForeground#52494e
  • editorOverviewRuler.selectionHighlightForeground#52494e
  • editorSuggestWidget.background#282828
  • editorSuggestWidget.border#282828
  • editorSuggestWidget.foreground#BEBEBE
  • editorSuggestWidget.highlightForeground#ffdd33
  • editorSuggestWidget.selectedBackground#52494e
  • editorWarning.foreground#cc8c3c
  • editorWhitespace.foreground#484848
  • editorWidget.background#282828
  • editorWidget.border#282828
  • foreground#BEBEBE
  • panel.background#282828
  • panel.border#282828
  • panelTitle.activeBorder#52494e
  • panelTitle.activeForeground#BEBEBE
  • panelTitle.inactiveForeground#BEBEBE
  • scrollbarSlider.activeBackground#52494e
  • scrollbarSlider.background#282828
  • scrollbarSlider.hoverBackground#52494e
  • sideBar.background#181818
  • sideBar.foreground#BEBEBE
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.foreground#BEBEBE
  • statusBar.background#181818
  • statusBar.debuggingBackground#BEBEBE
  • statusBar.debuggingForeground#181818
  • statusBar.foreground#BEBEBE
  • statusBar.noFolderBackground#181818
  • statusBar.noFolderForeground#BEBEBE
  • statusBarItem.prominentBackground#282828
  • statusBarItem.prominentHoverBackground#52494e
  • tab.activeBackground#222122
  • tab.activeBorder#222122
  • tab.activeForeground#BEBEBE
  • tab.border#181818
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#616161
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#96A6C8
  • terminal.ansiBrightBlack#52494E
  • terminal.ansiBrightBlue#52494E
  • terminal.ansiBrightCyan#95A99F
  • terminal.ansiBrightGreen#73D936
  • terminal.ansiBrightMagenta#9E95C7
  • terminal.ansiBrightRed#FF4F58
  • terminal.ansiBrightWhite#F5F5F5
  • terminal.ansiBrightYellow#FFDD33
  • terminal.ansiCyan#95A99F
  • terminal.ansiGreen#73D936
  • terminal.ansiMagenta#9E95C7
  • terminal.ansiRed#F43841
  • terminal.ansiWhite#E4E4E4
  • terminal.ansiYellow#FFDD33
  • terminal.background#181818
  • welcomePage.background#282828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js, support.variable.dom.js, support.variable.property.js#6c99bb
support.variable.property.process#6c99bb
support.variable.object.process#6c99bbitalic
comment#52494Eitalic
string#FFDD33italic
punctuation.definition.template-expression, punctuation.section.embedded.coffee#FF4F58
meta.template.expression#F8F8F2
constant.numeric#9E95C7
constant.language#9E95C7
constant.character, constant.other#9E95C7
variable#F8F8F2
keyword#FF4F58
storage#FF4F58
storage.type#6c99bbitalic
entity.name.type, entity.name.class
entity.other.inherited-class#73D936italic underline
entity.name.function#73D936
variable.parameter#cc8c3citalic
entity.name.tag, meta.tag.sgml.doctype.html#FF4F58
entity.other.attribute-name#73D936
support.function#6c99bb
support.constant#6c99bb
support.type, support.class#6c99bbitalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#52494E
markup.deleted#FF4F58
markup.inserted#73D936
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.quote#FF4F58
markup.list#E6DB74
markup.bold, markup.italic#6c99bb
markup.inline.raw#cc8c3c
markup.heading#73D936
markup.heading.setext#73D936
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#cc8c3citalic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#f8f8f2
keyword.var.go#6c99bbitalic
meta.method-call.php entity.name.function#6c99bb
storage.type.class.jsdoc, variable.other.jsdoc#52494E
string.quoted.docstring.multi.python#52494E
entity.name.type.class.python#a6e22eff
meta.class.python support.type.python#a6e22eff
meta.function-call.generic.python#66d9efff
punctuation.definition.decorator.python#FF4F58
entity.name.function.decorator.python#6c99bb
Gruber Monokai Theme by Gabe Miles - VS Code Theme