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.

  • activityBarBadge.background#07E
  • debugToolBar.border#0f0
  • editor.background#f5f5f7
  • editor.foreground#777
  • editor.inactiveSelectionBackground#1ce2
  • editor.selectionBackground#2224
  • editor.selectionHighlightBackground#aff3
  • editorLineNumber.activeForeground#06f
  • editorLineNumber.foreground#aaa
  • gitDecoration.untrackedResourceForeground#f69a73
  • input.placeholderForeground#07e
  • list.hoverBackground#08e
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#06ce
  • list.inactiveSelectionForeground#fff
  • menu.background#e7e7e7
  • menu.foreground#252526
  • menu.selectionBackground#07e
  • menu.selectionBorder#07e9
  • menu.selectionForeground#F5F5F7
  • sideBar.activeBackground#0f0
  • sideBar.background#eee
  • sideBar.border#e8e8e8
  • sideBar.foreground#4e4335
  • sideBarSectionHeader.background#ddd
  • sideBarSectionHeader.border#aaa
  • sideBarTitle.background#f8f8f8
  • sideBarTitle.foreground#bbb
  • statusBar.background#ddd
  • statusBar.debuggingBackground#003406
  • statusBar.debuggingBorder#0f0
  • statusBar.debuggingForeground#0f0
  • statusBar.foreground#222
  • statusBarItem.remoteBackground#07e
  • statusBarItem.remoteForeground#edfaff
  • tab.activeBackground#f5f5f7
  • tab.activeBorderTop#08e
  • tab.activeForeground#1e1e1e
  • tab.hoverBackground#8889
  • tab.hoverForeground#fff
  • terminal.background#e5e5e7
  • terminal.foreground#0d549b
  • terminal.inactiveSelectionBackground#f00
  • terminalCommandDecoration.defaultBackground#08e
  • titleBar.activeBackground#ddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#757882
constant.regexp#646695
entity.name.tag#569CD6
invalid#F44747
markup.underlineunderline
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.italicitalic
markup.inserted#c6fb20
markup.deleted#CDA48C
markup.changed#569CD6
punctuation.definition.quote.begin.markdown#757882
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#CDA48C
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569CD6
meta.preprocessor.string#CDA48C
meta.preprocessor.numeric#c6fb20
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#569CD6
storage#569CD6
string.tag#CDA48C
string.value#CDA48C
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#F48FB1italic
meta.template.expression#D4D4D4
keyword#569CD6
keyword.control#569CD6italic
keyword.other.unit#5d8211
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
support.function.git-rebase#9CDCFE
constant.sha.git-rebase#c6fb20
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#569CD6italic
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
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#CDA48C
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#FFECB3
keyword.operator.quantifier.regexp#D7BA7D
constant.character#569CD6
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
meta.decorator punctuation.decoratoritalic
keyword.generator.asterisk#FFD54F
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#5d8211
constant.language#f56900
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#00a173italic
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#002f26
entity.name.tag.css#ff860a
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.scss, meta.property-name.css, meta.property-list.css#f56900
entity.other.attribute-name#b64400italic
string, meta.embedded.assembly#0f406b
storage.type#0071e3
variable.other.readwrite.js.jsx, variable.other.constant.js, variable.other.constant.ts, variable.other.enummember#0f406b
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#d416bfbold
keyword.control.flow#df123aitalic
storage.modifier, keyword.operator.noexcept#df123aitalic
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#e3704bitalic
punctuation.separator.key-value.html#f56900
keyword.operator#f56900
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, variable.other.readwrite.alias.js.jsx, variable.other.readwrite.alias.ts#80734Ditalic
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, 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#3d935c
variable, variable.other.readwrite.js.jsx#065286bold
meta.object-literal.key, meta.object-literal.key entity.name.function, variable.other.object.property, support.variable.property#aa2192bold
variable.other.property, entity.name.variable, meta.definition.variable.name, support.variable, variable.other.object.property, meta.decorator variable.other.readwrite#aa2192italic
keyword.operator.logical, punctuation.accessor.optional#ff2d55bold
storage.type.function.arrow#ff9500bold
punctuation.definition.tag, entity.name.tag#08ebold