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#252525
  • activityBar.dropBackground#585858
  • badge.background#585858
  • badge.foreground#d5d5d5
  • debugToolBar.background#393939
  • dropdown.background#585858
  • dropdown.listBackground#393939
  • editor.background#252525
  • editor.foreground#d5d5d5
  • editor.lineHighlightBackground#393939
  • editorCursor.foreground#d4d4d4
  • editorGroup.border#585858
  • editorGroup.dropBackground#58585870
  • editorGroupHeader.tabsBackground#393939
  • editorHoverWidget.background#393939
  • editorIndentGuide.activeBackground#808080
  • editorLineNumber.activeForeground#d5d5d5
  • editorLineNumber.foreground#808080
  • editorSuggestWidget.background#252525
  • editorWidget.background#393939
  • input.background#585858
  • list.dropBackground#585858
  • list.highlightForeground#d5d5d5
  • list.hoverBackground#585858
  • list.inactiveSelectionBackground#585858
  • menu.background#393939
  • panel.border#585858
  • panelTitle.activeForeground#d5d5d5
  • peekViewEditor.background#252525
  • peekViewResult.background#393939
  • peekViewResult.selectionBackground#585858
  • peekViewTitle.background#393939
  • sideBar.background#393939
  • sideBarSectionHeader.background#252525
  • statusBar.background#393939
  • statusBar.border#252525
  • statusBar.debuggingBackground#585858
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#393939
  • tab.border#252525
  • tab.inactiveBackground#393939
  • titleBar.activeBackground#393939

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
header#569cd6
meta.diff#d5d5d5
invalid#f44747underline
markup.underlineunderline
markup.bold, strongbold
markup.heading#569cd6bold
markup.italic, emphasisitalic
comment#808080italic
string#d79d85
punctuation.definition.template-expression, punctuation.section.embedded#569cd6
meta.template.expression#d5d5d5
constant.numeric#4ec9b0
constant.language#569cd6
constant.character, constant.other#4ec9b0
variable#d5d5d5
keyword.operator#d5d5d5
keyword#569cd6
storage#569cd6
storage.type#569cd6
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#e3bbac
entity.other.inherited-class#e3bbac
entity.name.function#cba0c1
variable.parameter#99d4e1
entity.name.tag#569cd6
entity.other.attribute-name#99d4e1
support.function#e3bbabitalic
support.constant#e3bbab
support.variable, variable.other.predefined#e3bbab
support.type, support.class#e3bbac
support.other.variable
meta.structure.dictionary.json string.quoted.double.json#d79d85
meta.diff, meta.diff.header#569cd6
markup.deleted#f44747
markup.inserted#608b4e
markup.changed#569cd6
markup.quote#608b4e
markup.list#d5d5d5
markup.bold, markup.italic#569cd6
markup.inline.raw#d79d85
markup.heading#cba0c1
keyword.other.this, variable.language#99d4e1
meta.tag.sgml.html, meta.tag.sgml.doctype.html, punctuation.definition.tag, invalid.illegal.bad-comments-or-CDATA.html#808080
punctuation.definition.comment#808080
constant.character.escape#e3bbab
meta.diff.header#569cd6
storage.modifier, keyword.control, meta.preprocessor, keyword.control.new, keyword.operator.new, keyword.operator.sizeof, keyword.operator.logical, keyword.operator.comparison#569cd6
keyword.codetag.notation#569cd6
support.constant.handlebars, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method#cba0c1
variable.legacy.builtin.python#cba0c1
keyword.operator.unpacking.arguments.python#e3bbab
keyword.other.import, keyword.control.import#808080
meta.return-type, support.class, support.type, entity.name.type, entity.name.type.class, entity.name.class, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#e3bbac
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#e3bbac
storage.type.function.lambda#e3bbacitalic
meta.preprocessor.include.c string.quoted.other.lt-gt.include.c punctuation.definition.string.begin.c, meta.preprocessor.include.c string.quoted.other.lt-gt.include.c punctuation.definition.string.end.c#808080
punctuation.separator.pointer-access.c, keyword.control.directive.include.c#808080
storage.type.struct, support.type.mac-classic.c#e3bbac
entity.name.tag.css, keyword.other.important.css, keyword.other.default.scss, punctuation.definition.interpolation.begin.bracket.curly, punctuation.definition.interpolation.end.bracket.curly#569cd6
support.type.property-name.media.css, support.type.property-name, variable.css, variable.scss, variable.other.less, support.type.vendored.property-name.css, meta.at-rule.include.scss, support.constant.vendored.property-value.css#99d4e1
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#d69c85
entity.other.attribute-name.class, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, meta.selector.css entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#cba0c1
meta.embedded.line.css#e3bbab
keyword.operator.unpacking.parameter, keyword.operator.unpacking.arguments#569cd6
string.quoted.docstring punctuation.definition.string, string.quoted.docstring#808080
string.quoted.double variable.other.bracket#d5d5d5
string.quoted.double punctuation.definition.variable#d79d85
entity.other.jinja.delimiter.tag, entity.other.jinja.delimiter.variable#e3bbac
keyword.control.jinja#cba0c1
string.regexp constant.character.escape.backslash.regexp#d79d85
keyword.control.anchor.regexp, constant.other.character-class.regexp#569cd6
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#569cd6

Shiki preview

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

Loading...

Ghost Shell by Huynh Nguyen Ngoc Linh - VS Code Theme