Skip to main content
Coding Theme

Color themes

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#27283f
  • editor.background#27283f
  • editor.foreground#f2f2f7
  • editor.inactiveSelectionBackground#3C3C3C
  • editor.lineHighlightBackground#9999ff0a
  • editor.selectionBackground#4C4C4C
  • editor.selectionForeground#f9f9f9
  • editorBracketMatch.border#8484ff
  • editorCursor.background#ff4d4d
  • editorCursor.foreground#ff4d4d
  • editorGroup.emptyBackground#ff0000
  • editorGroupHeader.tabsBackground#d3d3e4
  • editorGutter.background#27283f
  • editorIndentGuide.background#F1826025
  • editorLineNumber.activeForeground#f2f2f7
  • editorLineNumber.foreground#474774
  • editorOverviewRuler.addedForeground#141414
  • editorOverviewRuler.border#141414
  • editorRuler.foreground#141414
  • editorSuggestWidget.background#2b2b49
  • editorSuggestWidget.border#8484ff
  • editorSuggestWidget.foreground#d3d3e4
  • editorSuggestWidget.highlightForeground#f9f9f9
  • editorSuggestWidget.selectedBackground#0063e1
  • editorWhitespace.foreground#F18260
  • editorWidget.background#2b2b49
  • editorWidget.border#5757ee
  • editorWidget.foreground#d3d3e4
  • icon.foreground#5757ee
  • input.background#f2f2f7
  • input.foreground#232323
  • list.activeSelectionBackground#5655f3
  • list.hoverBackground#ffffff00
  • list.inactiveSelectionBackground#c0c1d8
  • listFilterWidget.background#ff0000
  • panel.background#27283f
  • panel.border#ff0000
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.background#ffffff10
  • sideBar.background#d3d3e4
  • sideBar.foreground#232323
  • sideBarSectionHeader.background#d3d3e4
  • statusBar.background#d3d3e4
  • statusBar.foreground#232323
  • tab.activeBackground#27283f
  • tab.activeBorder#00000000
  • tab.activeBorderTop#5757ee
  • tab.activeForeground#fff
  • tab.border#d3d3e4
  • tab.hoverBackground#27283f
  • tab.inactiveBackground#d3d3e4
  • tab.inactiveForeground#61629e
  • titleBar.activeBackground#d9d9d9
  • titleBar.activeForeground#525252
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f9f9f9
source.ruby, text.html.erb, source.json.comments, source.css, source.js#5d5d97
comment#5d5d97italic
storage#b197fc
invalid.deprecated#dbb7b0italic underline
invalid.illegal#F8F8F8
-----------------------------------
text source
text.html.ruby source
entity.other.inherited-class#e599f7italic
string source#e4efb9
string constant#e7f1ba
string.regexp#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
support.constant#da7f5e
meta.preprocessor.c, support.class.ruby#e599f7
meta.preprocessor.c keyword#c0cfe0
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string#494949
declaration.tag, declaration.tag entity, meta.tag entity#e599f7
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity#f783ac
meta.selector.css entity.name.tag#d7b67c
meta.selector.css entity.other.attribute-name.tag.pseudo-class#a0ab7d
meta.selector.css entity.other.attribute-name.id#8B98AB
meta.selector.css entity.other.attribute-name.class#ac8350
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#faf0a8
meta.preprocessor.at-rule keyword.control.at-rule#8693A5
meta.constructor.argument.css#a0ab7d
meta.diff, meta.diff.header, meta.separator#F8F8F8italic
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.list#faf0a8
markup.heading#da7f5e
markup.deleted.git_gutter#da7f5e
markup.inserted.git_gutter#a0ab7d
markup.changed.git_gutter#889ab5
markup.ignored.git_gutter#565656
markup.untracked.git_gutter#565656
deco.folding#6d7d78
comment#5d5d97italic
constant#ffa94d
entity#b197fc
keyword#b197fc
string#ffe066
support#ac98ad
variable#e599f7
invalid.deprecated#dbb7b0italic underline
source invalid.deprecateditalic underline
invalid.illegal#f9f9f9
-----------------------------------
meta.embedded.block, punctuation.whitespace.embedded
meta.embedded.line
entity.other.inherited-class#b197fcitalic
string meta.embedded#e4efb9
string constant#e7f1ba
string.regexp#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
string variable#ffffff
support.function#74c0fc
support.constant#da7f5e
meta.preprocessor.c, source.swift meta.preprocessor#9da7b6
meta.preprocessor.c keyword, source.swift meta.preprocessor keyword#c0cfe0
meta.tag.metadata.doctype, meta.tag.metadata.doctype entity, meta.tag.metadata.doctype string, meta.tag.metadata.processing.xml, meta.tag.metadata.processing.xml entity, meta.tag.metadata.processing.xml string#494949
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#ffffff
declaration.tag.inline, declaration.tag.inline entity, meta.tag.inline, meta.tag.inline entity#fff
meta.selector.css entity.name.tag#d7b67c
meta.selector.css entity.other.attribute-name.tag.pseudo-class#a0ab7d
meta.selector.css entity.other.attribute-name.id#8B98AB
meta.selector.css entity.other.attribute-name.class#ac8350
support.type.property-name.css#ffffff
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#faf0a8
meta.preprocessor.at-rule keyword.control.at-rule#8693A5
meta.property-value support.constant.named-color.css, meta.property-value constant#ffa94d
meta.constructor.argument.css#a0ab7d
meta.diff, meta.diff.header, meta.separator, meta.diff.range, meta.diff.index#F8F8F8italic
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.list#faf0a8
markup.heading#da7f5e
markup.raw.block
meta.test1
meta.test2
meta.test3
meta.test4
source.ruby#74c0fcbold
variable.other.readwrite.instance.ruby, constant.other.symbol.hashkey.ruby#f783ac
source.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#5d5d97
support.type.property-name.json.comments, support#b197fc
entity#e599f7
variable.other.property.js#f783ac
variable.language.this.js#fff
meta.object-literal.key.js#f783ac
variable.language.super.js#8ce99a
entity.name.function.js#74c0fc
support.class.component.js, meta.tag#e599f7
source entity.other.attribute-name#ffa94d
meta.embedded.expression.js#66d9e8
meta.embedded.expression.js variable#ffffff
source entity.name.tag#
entity.name.function.tagged-template.js#74c0fc
entity.other.inherited-class.ruby#ffe066
keyword.operator.other.ruby#fff
entity.name.function.ruby#74c0fc
constant.other.symbol.ruby#8ce99a
keyword.other.special-method.ruby#74c0fc
text.html.erb, punctuation.section.embedded.end.erb source.ruby, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, punctuation.separator.method.ruby#fff
entity.other.attribute-name.html#ffa94d
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, text.html.erb meta.tag entity#e599f7
punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, punctuation.section.embedded.end.erb source.ruby, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#5d5d97