Skip to main content
Coding Theme

Color themes

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
ThemeDatabase All Themes by enes ozturk - VS Code Theme