Skip to main content
CodingTheme

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#282923
  • activityBar.dropBorder#414339
  • activityBar.foreground#f8f8f2
  • badge.background#75715e
  • badge.foreground#f8f8f2
  • breadcrumb.foreground#75715e
  • button.background#75715e
  • debugToolBar.background#262723
  • diffEditor.insertedTextBackground#66852880
  • diffEditor.removedTextBackground#90274a80
  • dropdown.background#414339
  • editor.background#282923
  • editor.findMatchBackground#48473d
  • editor.findMatchBorder#ffe894
  • editor.findMatchHighlightBackground#48473d
  • editor.findMatchHighlightBorder#ffe894
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#3e3d32
  • editor.selectionBackground#383830
  • editor.selectionHighlightBackground#3d3a3a10
  • editor.selectionHighlightBorder#ffffffaa
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#414339
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#262723
  • editorHoverWidget.background#414339
  • editorHoverWidget.border#75715e
  • editorIndentGuide.background1#464741
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#282923
  • editorSuggestWidget.border#75715e
  • editorWhitespace.foreground#75715E
  • editorWidget.background#262723
  • focusBorder#75715e
  • input.background#414339
  • inputOption.activeBorder#75715e
  • inputValidation.errorBackground#90274a
  • inputValidation.errorBorder#f92472
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715e
  • list.dropBackground#414339
  • list.focusBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#282923
  • list.inactiveSelectionBackground#414339
  • panel.border#414339
  • panelTitle.activeBorder#75715e
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#75715e
  • peekView.border#75715e
  • peekViewEditor.background#282923
  • peekViewEditor.matchHighlightBackground#75715e
  • peekViewResult.background#262723
  • peekViewResult.matchHighlightBackground#75715e
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#262723
  • pickerGroup.foreground#75715e
  • progressBar.background#75715e
  • selection.background#75715e
  • sideBar.background#262723
  • sideBarSectionHeader.background#282923
  • statusBar.background#414339
  • statusBar.debuggingBackground#75715e
  • statusBar.noFolderBackground#414339
  • tab.activeBorder#ccccc7
  • tab.border#262723
  • tab.inactiveBackground#414339
  • tab.inactiveForeground#ccccc7
  • tab.unfocusedActiveBorder#75715e
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6a7ec8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#67d8ef
  • terminal.ansiBrightGreen#a6e22e
  • terminal.ansiBrightMagenta#ac80ff
  • terminal.ansiBrightRed#f92472
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56adbc
  • terminal.ansiGreen#86b42b
  • terminal.ansiMagenta#8c6bc8
  • terminal.ansiRed#c4265e
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#b3b42b
  • titleBar.activeBackground#262723
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js, support.variable.dom.js, support.variable.property.js#67d8ef
support.variable.property.process#67d8ef
support.variable.object.process#67d8efitalic
comment#75715E
string#e7db74
punctuation.definition.template-expression, punctuation.section.embedded.coffee#f92472
meta.template.expression#f8f8f2
constant.numeric#ac80ff
constant.language#ac80ff
constant.character, constant.other#ac80ff
variable#f8f8f2
keyword#f92472
storage#f92472
storage.type#67d8efitalic
entity.name.type, entity.name.class#a6e22b
entity.other.inherited-class#a6e22bitalic
entity.name.function#a6e22b
variable.parameter, meta.parameter, meta.definition.variable.name#fd9622italic
entity.name.tag, meta.tag.sgml.doctype.html#f92472
entity.other.attribute-name#a6e22b
support.function#67d8ef
support.constant#67d8ef
support.type, support.class#67d8efitalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#e7db74
meta.diff, meta.diff.header#75715E
markup.deleted#f92472
markup.inserted#A6E22E
markup.changed#e7db74
constant.numeric.line-number.find-in-files - match#ac80ffA0
entity.name.filename.find-in-files#e7db74
markup.quote#f92472
markup.list#e7db74
markup.bold, markup.italic#67d8ef
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#FD971Fitalic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#f8f8f2
keyword.var.go#67d8efitalic
meta.method-call.php entity.name.function#67d8ef
storage.type.class.jsdoc, variable.other.jsdoc#75715E
string.quoted.docstring.multi.python#75715E
entity.name.type.class.python#a6e22eff
meta.class.python support.type.python#a6e22eff
meta.function-call.generic.python#67d8efff
punctuation.definition.decorator.python#f92472
entity.name.function.decorator.python#67d8ef
keyword.operator.query#FD971Fitalic
keyword.query.field.apex#67d8efitalic
keyword.type.apex#67d8efitalic
keyword.other.get.apex#FFFFFF
keyword.other.set.apex#67d8ef
keyword.operator.conditional#FD971F
support.function.apex#f92472
entity.name.variable.parameter.apex#FD971Fitalic
entity.name.type.class.apex#A6E22E
sharing.modifier.apex#f92472
punctuation.squarebracket#e7db74

Shiki preview

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

Loading...

Sublime Text 3 by Shine - VS Code Theme