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
emphasisitalic
strongbold
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.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
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