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#f2f4f5
  • activityBar.border#e1e4e8
  • activityBar.foreground#8e979c
  • activityBarBadge.background#54a3ff
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#E1E4E8
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#646464
  • editor.background#fdfdfd
  • editor.findMatchHighlightBackground#fff2b9
  • editor.foreground#24292e
  • editorBracketMatch.background#f1f8ff
  • editorBracketMatch.border#c8e1ff
  • editorGroupHeader.tabsBackground#f2f4f5
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorIndentGuide.activeBackground#a8a8a8
  • editorIndentGuide.background#eeeeee
  • editorInfo.foreground#b6b6b6
  • editorLineNumber.activeForeground#00000088
  • editorLineNumber.foreground#cccccc
  • editorPane.background#e7eaeb
  • editorRuler.foreground#d3d3d3
  • editorWarning.foreground#555555
  • focusBorder#fafbfc
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#a00000
  • gitDecoration.ignoredResourceForeground#00000044
  • gitDecoration.modifiedResourceForeground#0073c0
  • gitDecoration.untrackedResourceForeground#66a500
  • list.activeSelectionBackground#e3e5f0
  • list.activeSelectionForeground#24292e
  • peekViewEditor.matchHighlightBackground#00000011
  • scrollbar.shadow#00000000
  • sideBar.background#fafbfc
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f1f2f3
  • sideBarSectionHeader.foreground#24292e
  • sideBarTitle.foreground#24292e
  • statusBar.background#fafbfc
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#fafbfc
  • statusBar.debuggingForeground#24292e
  • statusBar.foreground#444444
  • statusBar.noFolderBackground#fafbfc
  • statusBar.noFolderForeground#24292e
  • statusBarItem.prominentBackground#00000000
  • statusBarItem.prominentHoverBackground#dddddd
  • tab.activeBackground#fdfdfd
  • tab.activeBorderTop#fdfdfd
  • tab.activeForeground#000000
  • tab.border#e1e4e8
  • tab.inactiveBackground#fafbfc
  • tab.inactiveForeground#000000aa
  • tab.unfocusedActiveBorderTop#099ee388
  • tab.unfocusedActiveForeground#000000ee
  • tab.unfocusedInactiveForeground#00000099
  • terminal.ansiBrightYellow#795e26
  • titleBar.activeBackground#f2f4f5
  • titleBar.activeForeground#444444
  • titleBar.border#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, punctuation.definition.block.js#000000
emphasisitalic
strongbold
meta.diff.header#000080
comment, string.quoted.docstring.multi.python#888888
constant.language#581cc7
constant.numeric#005cc5
constant.regexp#811f3f
entity.name.tag, keyword.other.definition.ini#af0368
entity.name.selector#800000
entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#6f42c1
invalid#cd3131
markup.underlineunderline
markup.bold#000000bold
markup.heading#005cc5bold
markup.italicitalic
markup.inserted#09885a
markup.deleted#a31515
markup.changed#0451a5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451a5
markup.inline.raw.string.markdown, markup.raw.block.markdown, markup.fenced_code.block.markdown#af0368
markup.inline.raw#800000
meta.selector#800000
punctuation.definition.tag#000000
meta.preprocessor#001080
meta.preprocessor.string#a31515
meta.preprocessor.numeric#09885a
meta.structure.dictionary.key.python#0451a5
storage#d73a49
storage.type#581cc7
storage.type.php#005cc5
storage.modifier#581cc7
string#af0368
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars, source.ini#005cc5
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#001080
meta.template.expression#000000
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#0451a5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, source.coffee.embedded#000000
variable.other.less#005cc5
support.type.property-name.json#0451a5
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.other.unit#001080
keyword.operator#001080
keyword.operator.logical.python#001080
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#af0368
keyword.other.phpdoc.php, storage.type.class.jsdoc#888888italic
support.function.git-rebase#0451a5
constant.sha.git-rebase#09885a
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#001080
entity.name.function, support.constant.handlebars, support.function, punctuation.definition.decorator.python#005cc5
meta.return-type, support.class, support.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, 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, support.other.namespace.php, entity.name.function.decorator.python#001080
punctuation.separator.inheritance.php#000000
entity.name.type#005cc5
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#001080
keyword.control#581cc7
keyword.control.import.python#581cc7
variable, meta.definition.variable.name, support.variable#000000
variable.parameter.function-call.python#001080
meta.object-literal.key, meta.object-literal.key entity.name.function#005cc5
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#0451a5
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#af0368
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#811f3f
keyword.operator.quantifier.regexp#000000
keyword.operator.or.regexp, keyword.control.anchor.regexp#ff0000
constant.character#000000
constant.character.escape#a31515
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
support.class.builtin#001080
meta.function-call.generic.python#005cc5
variable.other.object.js#005cc5
entity.name.tag.css#581cc7
storage.type.function.arrow.js#001080
entity.name.section.group-title.ini#001080