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#1e1e1e
  • editor.foreground#dfdfdf
  • editor.inactiveSelectionBackground#3a3d41aa
  • editor.selectionHighlightBackground#add6ff26
  • editorIndentGuide.activeBackground1#808080
  • editorIndentGuide.activeBackground2#808080
  • editorIndentGuide.activeBackground3#808080
  • editorIndentGuide.activeBackground4#808080
  • editorIndentGuide.activeBackground5#808080
  • editorIndentGuide.activeBackground6#808080
  • editorIndentGuide.background1#404040
  • editorIndentGuide.background2#404040
  • editorIndentGuide.background3#404040
  • editorIndentGuide.background4#404040
  • editorIndentGuide.background5#404040
  • editorIndentGuide.background6#404040
  • input.placeholderForeground#a6a6a6
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#252526
  • menu.foreground#cccccc
  • ports.iconRunningProcessForeground#369432
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarTitle.foreground#bbbbbb
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#007acc
  • tab.lastPinnedBorder#cccccc33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
region.redish#ff6188
region.orangish#fc9867
region.yellowish#ffd866
region.greenish#a9dc76
region.bluish#78dce8
region.purplish#ab9df2
region.pinkish#ff6188
region.whitish#dfdfdf
comment.line, punctuation.definition.comment#858585
comment.block, comment.block comment.line, comment.block punctuation.definition, comment.block punctuation.definition.comment, comment.line.documentation, comment.line.documentation punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#629755italic
keyword.other.documentation, keyword.other.phpdoc.php, comment.block storage.type.class.jsdoc, comment.block punctuation.definition.block.tag.jsdoc, comment.block punctuation.definition.inline.tag.jsdoc#629755italic bold underline
comment.block.documentation entity.name.type, comment.block.documentation variable.other, comment.block variable.parameter#AA8257italic
entity.name.function.decorator, entity.name.type.annotation, meta.declaration.annotation, meta.attribute.php, meta.decorator, meta.function.decorator, punctuation.brackets.attribute.rust, punctuation.decorator, punctuation.definition.annotation, punctuation.definition.attribute.rust, punctuation.definition.decorator, storage.type.annotation, support.other.attribute entity.other.attribute#e6b422
storage.type.generic#78dce8
entity.name.class, entity.name.type, entity.other.inherited-class.java, storage.type.groovy, storage.type.java, storage.type.object, support.class, support.constant, support.type.object, entity.other.inherited-class#78dce8bold
entity.name.type.enum#78dce8italic bold
entity.name.interface, entity.name.type.interface, entity.name.type.alias#30C0FFbold
constant.language, keyword, punctuation.access.module, punctuation.definition.keyword, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.separator.key-value, punctuation.separator.types, storage.type.built-in.primitive, storage.type.local.java, storage.type.primitive, storage, support.type.builtin, support.type.primitive, variable.language#ff6188
storage.modifier.package#dfdfdf
storage.modifier.import, storage.modifier.package#dfdfdf
string, punctuation.definition.string#ffd866
entity.name.function, support.function, variable.function, meta.method.groovy#a9dc76
variable#dfdfdf
variable.parameter#fc9867
variable.other.constant, constant.other.caps.rust, constant.other.class.php#ab9df2
variable.other.enummember#ab9df2
constant.numeric, constant.other.color#ab9df2
constant.character.entity, constant.character.entity punctuation.definition, constant.character.escape, constant.other.placeholder#ab9df2
support.type.property-name, support.variable.property, variable.object.property, variable.other.object.property, variable.other.property#ace8ff
meta.objectliteral meta.object-literal.key#ace8ff
storage.modifier.import variable.language.wildcard#ff6188
meta.brace, punctuation.bracket, punctuation.definition, punctuation.section, punctuation.separator, punctuation.terminator#dfdfdf
punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.template-string.element.begin, punctuation.template-string.element.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end#ff6188
string.template punctuation.definition.template-expression#ff6188
punctuation.accessor.optional#ff6188
constant.other.character-class.range.regexp, constant.other.character-class.set.regexp, string.regexp#ffd866
constant.character.escape.backslash.regexp#fc9867
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6188
constant.other.character-class.regexp#ab9df2
keyword.control.anchor.regexp#78dce8
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#dfdfdf
keyword.operator.quantifier.regexp#a9dc76
variable.parameter.url, markup.underline.link#3794ffunderline
entity.name.tag#30C0FFbold
entity.other.attribute-name#ace8ff
entity.other.attribute-name.class, entity.other.attribute-name.id#a9dc76bold
meta.property-value, meta.property-value support.constant.color, meta.property-value support.constant.property-value#fc9867
meta.selector, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#ff6188
source.shell punctuation.separator.pipe-sign, source.shell punctuation.terminator.case-clause, source.shell punctuation.definition.case-pattern#ff6188
source.shell punctuation.definition.variable#ab9df2
source.shell variable.other.special, source.shell variable.other.positional#ab9df2
source.shell punctuation.definition.logical-expression#a9dc76
markup.italicitalic
markup.boldbold
markup.bold markup.italic, markup.italic markup.bolditalic bold
markup.underlineunderline
markup.heading#78dce8bold
text.html.markdown punctuation.definition#ff6188
text.html.markdown markup.inline.raw.string.markdown#ffd866
text.html.markdown meta.separator.markdown#a9dc76
fenced_code.block.language.markdown#e6b422
source.sql#ace8ff
source.sql constant.other.database-name.sql, source.sql constant.other.table-name.sql#78dce8bold
variable.other.global.php#dfdfdfbold
string.unquoted.nowdoc.php punctuation.definition.string.php, keyword.operator.nowdoc.php#e6b422
keyword.other.array.phpdoc.php#dfdfdf
punctuation.definition.tag.xml, punctuation.definition.tag.begin, punctuation.definition.tag.end#afafaf
constant.other.color.rgb-value.hex.css punctuation.definition.constant.css#ff6188
text.angular.html template.ng.tag, text.angular.html string.regexp.angular-interpolation#ff6188
constant.numeric.angular-directive#fc9867
text.angular.html support.type.object.html-attribute, text.angular.html keyword.operator.entity.html#ace8ff
text.angular.html punctuation.definition.string#ffd866
punctuation.section.embedded.groovy, variable.other.interpolated.groovy#ff6188
text.html.derivative meta.tag.custom entity.name.tag.html, text.html.derivative punctuation.definition.block.ts#ff6188
text.html.derivative punctuation.definition.ng-binding-name#ffd866
text.html.derivative entity.other.ng-binding-name#fc9867
text.html.derivative expression.ng constant#ab9df2
text.html.derivative expression.ng variable#cfcfcfbold
Monokai Kai by shiguruikai - VS Code Theme