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.component—italic
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