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—
emphasis—italic
strong—bold
header#000080—
comment#757882—
constant.regexp#646695—
entity.name.tag#569CD6—
invalid#F44747—
markup.underline—underline
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.italic—italic
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.decorator—italic
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
Theme Italic FS by cod-fs - VS Code Theme