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.activeBackground#656767
  • activityBar.background#656767
  • activityBar.border#595b5b
  • button.background#00A1ED
  • button.border#0071a6
  • button.foreground#5A5A5A
  • dropdown.background#878989
  • dropdown.border#595b5b
  • dropdown.foreground#bfc0c0
  • dropdown.listBackground#878989
  • editor.background#747676
  • editor.foreground#d6d6d6
  • editorBracketHighlight.foreground1#698cd6
  • editorBracketHighlight.foreground2#68b3de
  • editorBracketHighlight.foreground3#9a7ecc
  • editorBracketHighlight.foreground4#25aac2
  • editorBracketHighlight.foreground5#80a856
  • editorBracketHighlight.foreground6#c49a5a
  • editorBracketHighlight.unexpectedBracket.foreground#db4b4b
  • editorError.foreground#ff98f8
  • editorGroupHeader.border#595b5b
  • editorGroupHeader.tabsBackground#656767
  • editorGroupHeader.tabsBorder#595b5b
  • editorHoverWidget.background#737575
  • editorHoverWidget.border#5d5f5f
  • editorInfo.foreground#ff98f8
  • editorLineNumber.activeForeground#5c5e5e
  • editorLineNumber.foreground#d6d6d6
  • editorSuggestWidget.background#747676
  • editorSuggestWidget.border#595b5b
  • editorSuggestWidget.focusHighlightForeground#f3cc00
  • editorSuggestWidget.highlightForeground#84e4ff
  • editorWarning.foreground#ff98f8
  • errorForeground#ff98f8
  • focusBorder#f6b800
  • foreground#d6d6d6
  • icon.foreground#ffffff
  • input.background#878989
  • input.border#595b5b
  • input.foreground#bfc0c0
  • input.placeholderForeground#bfc0c0
  • list.activeSelectionBackground#737575
  • list.activeSelectionForeground#d6d6d6
  • list.activeSelectionIconForeground#fff
  • list.deemphasizedForeground#d6d6d6
  • list.dropBackground#737575
  • list.errorForeground#d6d6d6
  • list.focusBackground#737575
  • list.focusForeground#d6d6d6
  • list.focusHighlightForeground#d6d6d6
  • list.focusOutline#00ead8
  • list.highlightForeground#d6d6d6
  • list.hoverBackground#737575
  • list.hoverForeground#d6d6d6
  • list.inactiveFocusBackground#737575
  • list.inactiveSelectionBackground#666666
  • list.inactiveSelectionForeground#d6d6d6
  • list.invalidItemForeground#d6d6d6
  • list.warningForeground#d6d6d6
  • panel.background#656767
  • panel.border#595b5b
  • panelInput.border#595b5b
  • panelSection.border#595b5b
  • panelTitle.activeBorder#f66d5c
  • panelTitle.activeForeground#d6d6d6
  • sideBar.background#656767
  • sideBar.border#595b5b
  • sideBar.foreground#d6d6d6
  • sideBarSectionHeader.background#787a7a
  • sideBarSectionHeader.border#595b5b
  • statusBar.background#747676
  • statusBar.border#595b5b
  • tab.activeBackground#656767
  • tab.activeBorder#f66d5c
  • tab.activeForeground#d6d6d6
  • tab.border#595b5b
  • tab.hoverForeground#d6d6d6
  • tab.inactiveBackground#656767
  • tab.inactiveForeground#d6d6d6
  • tab.unfocusedActiveForeground#d6d6d6
  • tab.unfocusedHoverForeground#d6d6d6
  • tab.unfocusedInactiveForeground#d6d6d6
  • terminal.background#656767
  • terminal.border#666666
  • terminal.foreground#d6d6d6
  • textLink.activeForeground#bf001f
  • textLink.foreground#f66d5c
  • titleBar.activeBackground#656767
  • titleBar.border#595b5b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#c0ff8eitalic
comment.block.preprocessor#c0ff8e
comment.documentation, comment.block.documentation#d6d6d6
invalid.illegal#ff98f8
keyword.operator#00ead8
keyword, storage#00A1ED
storage.type, support.type#ce87f6
constant.language, support.constant, variable.language#f6b800
variable, support.variable#d6d6d6
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration#f6b800
support.class, support.type, variable.other.readwrite.alias, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object#f6b800
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property#94ff75
string, constant.other.symbol, constant.other.key, meta.attribute-selector#e4e4e4
variable.other.object.property#94ff75
meta.var.expr storage.type, storage.modifier#ce87f6
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other#ce87f6
keyword, keyword.control, keyword.other.important#d6d6d6
entity.name.function, support.function#f66d5cbold
entity.name.type, entity.other.inherited-class, support.class#ce87f6bold
entity.name.exception#ff98f8
entity.name.sectionbold
constant.numeric, constant.character, constant#f6b800
string#d6d6d6
constant.character.escape#00ead8
string.regexp#00A1ED
constant.other.symbol#f6b800
punctuation#00ead8
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#c0ff8e
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F3C300
entity.name.tag#00A1ED
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#F3C300italic
constant.character.entity, punctuation.definition.entity#f6b800
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#ce87f6
meta.property-name, support.type.property-name#f6b800
meta.property-value, meta.property-value constant.other, support.constant.property-value#d6d6d6
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#ff98f8
markup.inserted#000000
meta.link#00A1ED
markup.output, markup.raw#00ead8
markup.prompt#00ead8
markup.heading#f66d5c
markup.boldbold
markup.traceback#ff98f8
markup.underlineunderline
markup.quote#ce87f6
markup.list#00A1ED
markup.bold, markup.italic#d6d6d6
markup.inline.raw#f6b800
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
DualScheme by mattwehh - VS Code Theme