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.

  • activityBarBadge.background#007ACC
  • editor.background#031417
  • editor.foreground#dbdbdb
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorIndentGuide.activeBackground#404040
  • editorIndentGuide.background#1E1E1E
  • editorWhitespace.foreground#204852
  • input.placeholderForeground#A6A6A6
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.foreground#CCCCCC
  • ports.iconRunningProcessForeground#369432
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBarTitle.foreground#BBBBBB
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.primitive#36b1d0—
variable.other.object#2dabe6—
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#71cdff—
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#b4b4b4—
meta.embedded, source.groovy.embedded#D4D4D4—
emphasis—italic
strong—bold
header#000080—
comment#57A64A—
constant.regexp#646695—
entity.name.tag#569cd6—
entity.name.tag.css#d7ba7d—
entity.other.attribute-name#9cdcfe—
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#d7ba7d—
invalid#f44747—
markup.underline—underline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italic—italic
markup.inserted#a8cec5—
markup.deleted#D69D85—
markup.changed#569cd6—
punctuation.definition.quote.begin.markdown#6A9955—
punctuation.definition.list.begin.markdown#6796e6—
markup.inline.raw#D69D85—
punctuation.definition.tag#707070—
entity.name.function.preprocessor#f74444italic bold
meta.preprocessor#569cd6—
meta.preprocessor.string#D69D85—
meta.preprocessor.numeric#c6cea8—
meta.structure.dictionary.key.python#9cdcfe—
meta.diff.header#569cd6—
storage#569cd6—
storage.type#569cd6—
storage.modifier, keyword.operator.noexcept#569cd6—
string, meta.embedded.assembly#D69D85—
string.tag#D69D85—
string.value#D69D85—
string.regexp#d16969—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569cd6—
meta.template.expression#d4d4d4—
support.function#7bd88f—
support.function.delimiter.elm#8b888f—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6—
support.type, entity.name.type.object.console#5ad4e6italic
support.variable#5ad4e6—
support.class#5ad4e6—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe—
keyword#42ce9f—
keyword.control#D48AAC—
keyword.control.directive#9B9B9B—
keyword.operator#bbb5b5—
entity.name.function.operator#8aaecf—
keyword.other.unit#83d19b—
support.function.git-rebase#9cdcfe—
variable.language#569cd6—
entity.name#04a0b8—
variable#8fd5ee—
entity.name.function, support.function#D0D08C—
entity.name.function.member.static#E0C8BE—
variable.parameter#cdd1e2—
entity.name.function.templated#FF82A0—
keyword.operator.new, keyword.operator.delete, keyword.operator.member, keyword.operator.logical.python#fa626ebold
keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas#2e83bbbold
entity.name.label, support.constant.core.rust#aeb109—
entity.name.namespace#ECBE0C—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#5ad4e6—
entity.name.type#2ebbbb—
entity.name.class#4EC9B0—
entity.name.operator.custom-literal#DADADA—
entity.name.operator.custom-literal.number#B5CEA8—
entity.name.operator.custom-literal.string#D69D85—
entity.name.section#fce566—
variable.other.property, variable.other.property.static#67c4f7—
variable.other.event#ab73f5—
variable.other.enummember#B8D7A3—
constant.other.property#e38a91—
constant.other.citation.latex#dc8ae3—
constant.other.color#948ae3—
constant.other.character-class.escape#d30bb8—
constant.other.key#e3b58a—
constant.other.symbol#fd9353—
constant.other.elm#5ad4e6—
constant.numeric, constant.sha.git-rebase#b5cea8—
constant.language#868fdf—
constant.character.escape#d8455d—
constant.numeric.line-number.find-in-files#525053—
constant.numeric.line-number.match.find-in-files#fce566—
string source, string.unquoted.label#e9a71b—
Dark Pro+ by asciphx - VS Code Theme