Skip to main content
CodingTheme

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.

  • activityBar.background#0c0517
  • activityBar.border#211731
  • activityBar.dropBackground#31307190
  • activityBarBadge.background#474787
  • activityBarBadge.foreground#fff
  • badge.background#227093
  • button.background#474787
  • diffEditor.insertedTextBackground#33d9b233
  • diffEditor.removedTextBackground#eb6b6b3a
  • dropdown.background#40407a
  • dropdown.listBackground#40407a
  • editor.background#0c0517
  • editor.findMatchHighlightBackground#feb3433d
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#507b9e17
  • editor.selectionBackground#2f2f42cc
  • editor.selectionHighlightBackground#feb34307
  • editor.selectionHighlightBorder#FEB343
  • editorCursor.foreground#9E9E9E
  • editorError.foreground#f44336
  • editorGroupHeader.tabsBackground#0c0517
  • editorGroupHeader.tabsBorder#241e2c
  • editorGutter.addedBackground#75b378
  • editorGutter.background#0c0517
  • editorGutter.deletedBackground#b7735d
  • editorGutter.modifiedBackground#0882d3
  • editorHoverWidget.background#201531
  • editorHoverWidget.border#2c2c54
  • editorIndentGuide.activeBackground#ffffff52
  • editorLineNumber.activeForeground#ffffffb7
  • editorLineNumber.foreground#5c5469
  • editorOverviewRuler.border#241e2c
  • editorSuggestWidget.background#2c2c54
  • editorSuggestWidget.selectedBackground#474787
  • editorWidget.background#0c0517
  • extensionButton.prominentBackground#636390
  • extensionButton.prominentHoverBackground#218c74
  • focusBorder#313071
  • gitDecoration.modifiedResourceForeground#00BCD4
  • gitDecoration.untrackedResourceForeground#7dd47d
  • input.background#ffffff09
  • input.border#474787
  • input.foreground#fff
  • input.placeholderForeground#ffffff6e
  • list.activeSelectionBackground#313071
  • list.dropBackground#28284a
  • list.errorForeground#e87b58
  • list.focusBackground#211731
  • list.hoverBackground#313071
  • list.inactiveFocusBackground#211731
  • list.inactiveSelectionBackground#313071
  • notificationCenterHeader.background#313071
  • notifications.background#313071
  • notifications.border#313071
  • notificationToast.border#313071
  • panel.background#0c0517
  • panel.border#2c2c54
  • peekView.border#313071
  • peekViewTitle.background#313071
  • scrollbarSlider.activeBackground#313071
  • scrollbarSlider.background#e1dfec63
  • scrollbarSlider.hoverBackground#313071
  • sideBar.background#0c0517
  • sideBar.border#211731
  • sideBar.foreground#8e8798
  • sideBarSectionHeader.background#211731
  • sideBarSectionHeader.foreground#8d8da7
  • statusBar.background#0c0517
  • statusBar.border#241e2c
  • statusBar.debuggingBackground#E91E63
  • statusBar.debuggingBorder#E91E63
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff7a
  • statusBarItem.activeBackground#474787
  • statusBarItem.hoverBackground#474787
  • tab.activeBackground#4949c72c
  • tab.activeBorder#7AABDB
  • tab.activeForeground#c5c4d2
  • tab.border#2f3542
  • tab.inactiveBackground#0c0517
  • tab.inactiveForeground#788692
  • terminal.ansiGreen#61bb65
  • terminal.ansiMagenta#b379a1
  • terminal.ansiYellow#ceab6a
  • terminal.background#0c0517
  • textLink.activeForeground#d65093
  • textLink.foreground#50a4d6
  • welcomePage.buttonBackground#0c0517
  • welcomePage.buttonHoverBackground#f7f7f715

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#eeffffff
comment, punctuation.definition.comment#5b758aitalic
variable, string constant.other.placeholder#EEFFFF
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
keyword, storage.type, storage.modifier#e6528e
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#6b84b3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
variable.function, support.function, keyword.other.special-method#82AAFF
support.function#009688
storage.modifier.ts, support.type.primitive.ts, storage.modifier.js, support.type.primitive.js#316184
entity.name.function.ts, entity.name.function.js#b379a1
meta.block variable.other#b8d3e8
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F78C6C
constant.language.json#c34c75
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#61bb65normal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#c7b558
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#6db5d8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.localname.xml#ad9b7b
entity.other.attribute-name.class#ceab6a
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#b379a1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ceab6a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ceab6a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5370
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.underline#F78C6Cunderline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#ceab6a
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.decorator#e72d94
variable.other.constant#495e90bold
variable.language.this#8292e8
variable.other.object.property, variable.other.property, variable.other.object, variable.other.readwrite#ad9b7b
variable.other.object.property#d9b9e8
meta.class.type.class, meta.class, entity.other.inherited-class#c7b558
meta.object-literal.key#b791a4
entity.other.attribute-name.html, meta.tag.inline.any.html#af9669
string.quoted.double.html, string.quoted.double.xml#009688
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag.inline.any.html, punctuation.definition.tag.html, entity.name.tag.block.any.html, entity.name.tag.html, support.type.property-name.css, keyword.other.definition.ini, entity.name.tag.localname.xml, punctuation.definition.tag.xml#b379a1
constant.numeric.css, punctuation.definition.constant.css#b2b1ce
meta.property-value.scss#009688
variable.scss#00BCD4
keyword.other.unit.rem.css, keyword.other.unit.cm.css, keyword.other.unit.px.css, keyword.other.unit.em.css#6b84b3
entity.name.tag.other.html#6fabd8
text.gitignore#b1b0b0
variable.other.env, entity.name.tag.yaml, support.function.builtin.shell#b379a1
source.env, source.ini#61bb65
punctuation.definition.keyword.scss, keyword.control.at-rule.function.scss, keyword.control.if.scss, keyword.control.return.scss#e6528e

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Aditi - Dark theme by lokesh - VS Code Theme