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.

  • activityBar.background#181818
  • activityBar.border#13252c
  • activityBar.foreground#8ec6f5
  • activityBarBadge.background#94bbfd
  • activityBarBadge.foreground#ffffff
  • badge.background#94bbfd
  • badge.foreground#ffffff
  • button.background#4c5e66
  • button.foreground#ffffff
  • button.hoverBackground#9dbaeb
  • debugExceptionWidget.background#1a1c1d
  • debugToolBar.background#1a1c1d
  • diffEditor.insertedTextBackground#4fd93a23
  • diffEditor.removedTextBackground#eb5b6a30
  • editor.background#252528
  • editor.findMatchHighlightBackground#3d4961
  • editor.foreground#abb0b0
  • editor.hoverHighlightBackground#3d4961
  • editor.inactiveSelectionBackground#324a6c
  • editor.rangeHighlightBackground#383a54
  • editor.selectionBackground#34365e
  • editor.selectionHighlightBackground#add6ff26
  • editor.wordHighlightBackground#353758
  • editor.wordHighlightStrongBackground#353758
  • editorBracketHighlight.foreground1#79cde6
  • editorBracketHighlight.foreground2#fdcae0
  • editorBracketHighlight.foreground3#87AFF4
  • editorBracketHighlight.foreground4#ffc09f
  • editorBracketHighlight.unexpectedBracket.foreground#e06060
  • editorBracketMatch.background#353758
  • editorCursor.foreground#f48787
  • editorError.foreground#4373c2
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.background#242425
  • editorHoverWidget.background#1f1f1f
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground1#9fd6f8
  • editorIndentGuide.background1#464b5e
  • editorLineNumber.activeForeground#9fd6f8
  • editorLineNumber.foreground#6e7681
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.border#2c3043
  • editorSuggestWidget.foreground#8ec6f5
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#2b2b2b
  • editorWarning.foreground#f35959
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#202020
  • editorWidget.border#262a39
  • errorForeground#f35959
  • focusBorder#1f1f1f
  • foreground#d8e0ed
  • gitDecoration.modifiedResourceForeground#9fd6f8
  • gitDecoration.untrackedResourceForeground#9ff39f
  • input.background#313131
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBorder#e44b4b
  • inputValidation.infoBorder#9ecde1
  • inputValidation.warningBorder#e44b4b
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#3a3d41
  • list.activeSelectionForeground#8ec6f5
  • list.dropBackground#181818
  • list.focusBackground#2b2b2b
  • list.focusForeground#4373c2
  • list.highlightForeground#ffffff
  • list.hoverBackground#1f1f1f
  • list.hoverForeground#4373c2
  • list.inactiveSelectionBackground#3a3d41
  • list.inactiveSelectionForeground#436683
  • list.invalidItemForeground#e06060
  • notificationLink.foreground#80cbc4
  • notifications.background#252528
  • notifications.foreground#eeeeeecc
  • notificationToast.border#13252c
  • panel.background#181818
  • panel.border#9ecde1
  • panelTitle.activeBorder#fdcae0
  • panelTitle.activeForeground#9fd6f8
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#f48787
  • peekViewEditor.background#252528
  • peekViewEditor.matchHighlightBackground#ffffff26
  • peekViewResult.background#1A1a1a
  • peekViewResult.matchHighlightBackground#add6ff26
  • peekViewResult.selectionBackground#34395b
  • peekViewResult.selectionForeground#ccdcf7
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#8f97c1
  • peekViewTitleLabel.foreground#ccdcf7
  • pickerGroup.border#13252c
  • quickInput.foreground#9fd6f8
  • quickInputList.focusBackground#2b2b2b
  • quickInputList.focusForeground#4373c2
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#2e2e40
  • scrollbarSlider.background#2e2e40
  • scrollbarSlider.hoverBackground#2e2e40
  • selection.background#324a6c
  • sideBar.background#181818
  • sideBar.border#13252c
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#2b2b2b
  • sideBarSectionHeader.foreground#7799bb
  • sideBarTitle.foreground#7799bb
  • statusBar.background#1f1f1f
  • statusBar.debuggingBackground#f48787
  • statusBar.noFolderBackground#011627
  • statusBarItem.activeBackground#94bbfd
  • statusBarItem.hoverBackground#94bbfd
  • statusBarItem.prominentBackground#94bbfd
  • statusBarItem.prominentHoverBackground#94bbfd
  • symbolIcon.arrayForeground#9fd6f8
  • symbolIcon.booleanForeground#9fd6f8
  • symbolIcon.classForeground#9fd6f8
  • symbolIcon.colorForeground#9fd6f8
  • symbolIcon.constantForeground#9fd6f8
  • symbolIcon.constructorForeground#9fd6f8
  • symbolIcon.enumeratorForeground#9fd6f8
  • symbolIcon.enumeratorMemberForeground#9fd6f8
  • symbolIcon.eventForeground#9fd6f8
  • symbolIcon.fieldForeground#9fd6f8
  • symbolIcon.fileForeground#9fd6f8
  • symbolIcon.folderForeground#9fd6f8
  • symbolIcon.functionForeground#9fd6f8
  • symbolIcon.interfaceForeground#9fd6f8
  • symbolIcon.keyForeground#9fd6f8
  • symbolIcon.keywordForeground#9fd6f8
  • symbolIcon.methodForeground#9fd6f8
  • symbolIcon.moduleForeground#9fd6f8
  • symbolIcon.namespaceForeground#9fd6f8
  • symbolIcon.numberForeground#9fd6f8
  • symbolIcon.objectForeground#9fd6f8
  • symbolIcon.operatorForeground#9fd6f8
  • symbolIcon.packageForeground#9fd6f8
  • symbolIcon.propertyForeground#9fd6f8
  • symbolIcon.referenceForeground#9fd6f8
  • symbolIcon.snippetForeground#9fd6f8
  • symbolIcon.stringForeground#9fd6f8
  • symbolIcon.structForeground#9fd6f8
  • symbolIcon.textForeground#9fd6f8
  • symbolIcon.typeParameterForeground#9fd6f8
  • symbolIcon.unitForeground#9fd6f8
  • symbolIcon.variableForeground#9fd6f8
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#fdcae0
  • tab.activeForeground#d2dee7
  • tab.border#2b2b2b
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#5f7e97
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#1f1f1f
  • textLink.activeForeground#94bbfd
  • textLink.foreground#7ec4f6
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#eeefff
  • titleBar.border#303030
  • walkThrough.embeddedEditorBackground#001111
  • widget.shadow#111111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, meta.toc-list#546e7aitalic
variable, string constant.other.placeholder#ccdcf7
invalid, invalid.illegal#f35959
storage.modifier, storage.type, keyword.control, keyword.other.template, keyword.other.substitution, constant.other.color, meta.tag, keyword#fcf6cb
keyword.control.flow#fcf6cbitalic
keyword.control.export, keyword.control.default#fcf6cbbold
keyword.control.import, keyword.control.from#5efaff
keyword.control.switch#68d3f4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7fc1ff
meta.tag#e5e4e4
meta.object-literal.key#9ff39f
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#79cde6
entity.name.function#94bbfditalic
variable.function, support.function, keyword.other.special-method#f48787italic
keyword.other.definition.ini#f48787
variable.other.constant#68d3f4
variable.other.property, variable.object.property#ccdcf7
variable.other.object.property#fdcae0
variable.other.object#68d3f4
variable.other.readwrite#94bbfd
support.other.variable, string.other.link#68d3f4
variable.parameter#3db9fcitalic
keyword.operator.arithmetic, keyword.operator.relational, keyword.other.unit, keyword.other#fcf6cb
constant.numeric.json#9ff39f
constant.numeric, support.constant, constant.escape#fdd3bb
constant.language#fdcae0
constant.language.character#3db9fc
string.quoted.double.prisma#87AFF4bold
storage.type.model.prisma, storage.type.config.prisma#3DB9FCbold
string.quoted.double.json, string.quoted.single.json#ffe5b4
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#fedccc
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fdcae0
support.class.componentitalic
entity.name#5efaffitalic
support.type#9ff39f
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f48787
variable.language#f48787italic
entity.name.method.js#82aaffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82aaff
entity.other.attribute-name#ccdcf7italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffffccitalic
entity.other.attribute-name.class#ffffcc
source.sass keyword.control#82aaff
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#f48787
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, meta.selector.css#94bbfd
markup.inserted#ffffcc
markup.deleted#ff5370
markup.changed#84dffb
string.regexp#f48787
constant.character.escape, constant.character.entity#f48787
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82aaffitalic
punctuation.definition.block, meta.function.expression#fdcae0
source.js constant.other.object.key.js string.unquoted.label.js#ff5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#b5ccff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fdd3bb
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#b5ccff
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#fdd3bb
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#84dffb
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#fdcae0
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#84dffb
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#fdcae0
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#b5ccff
markup.italic#f07178italic
entity.name.section.markdown#569cd6
punctuation.definition.list_item.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown#79cde6
text.html.markdown #9ff39f
markup.inline.raw.string.markdown, markup.inline.raw.markdown, string.other.link, string.other.link.description.title.markdown#b5ccff
markup.underline.link.markdown#ffe5b4
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#569cd6
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#f07178italic bold
markup.underline#fdd3bbunderline
markup.quote#b5ccffitalic
markup.quote punctuation.definition.blockquote.markdown#b5ccff
constant.other.reference.link.markdown#ffe5b4
markup.raw.block#b5ccff
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#fdd3bb
Easter Egg by ccabrera35 - VS Code Theme