Skip to main content
CodingTheme

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.activeBorder#F2404C
  • activityBar.background#0c0c0c
  • activityBar.border#030303
  • activityBar.dropBackground#f0717880
  • activityBar.foreground#EEFFFF
  • activityBarBadge.background#F2404C
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#4A4A4A
  • breadcrumb.activeSelectionForeground#F2404C
  • breadcrumb.background#090909
  • breadcrumb.focusForeground#EEFFFF
  • breadcrumb.foreground#848484
  • breadcrumbPicker.background#0c0c0c
  • button.background#030303
  • button.foreground#ffffff
  • debugToolBar.background#090909
  • diffEditor.insertedTextBackground#89DDFF20
  • diffEditor.removedTextBackground#ff9cac20
  • dropdown.background#090909
  • dropdown.border#FFFFFF10
  • editor.background#090909
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#F2404C
  • editor.findMatchHighlight#EEFFFF
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.findRangeHighlightBackground#FFCB6B30
  • editor.foreground#EEFFFF
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#61616150
  • editor.selectionHighlightBackground#FFCC0020
  • editor.wordHighlightBackground#ff9cac30
  • editor.wordHighlightStrongBackground#C3E88D30
  • editorBracketMatch.background#090909
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#f0717870
  • editorGroup.border#00000030
  • editorGroup.dropBackground#f0717880
  • editorGroup.focusedEmptyBorder#f07178
  • editorGroupHeader.tabsBackground#090909
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#f0717860
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#0c0c0c
  • editorHoverWidget.border#EEFFFF40
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#848484
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#EEFFFF
  • editorMarkerNavigation.background#EEFFFF05
  • editorOverviewRuler.border#090909
  • editorOverviewRuler.errorForeground#f0717840
  • editorOverviewRuler.findMatchForeground#F2404C
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#0c0c0c
  • editorSuggestWidget.border#FFFFFF30
  • editorSuggestWidget.foreground#EEFFFF
  • editorSuggestWidget.highlightForeground#F2404C
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#0c0c0c
  • editorWidget.border#F2404C
  • editorWidget.resizeBorder#F2404C
  • extensionBadge.remoteForeground#EEFFFF
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • foreground#EEFFFF
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#f0717890
  • gitDecoration.ignoredResourceForeground#84848490
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#2B2B2B
  • input.border#FFFFFF10
  • input.foreground#EEFFFF
  • input.placeholderForeground#EEFFFF60
  • inputOption.activeBackground#EEFFFF30
  • inputOption.activeBorder#EEFFFF30
  • inputValidation.errorBorder#f0717850
  • inputValidation.infoBorder#82AAFF50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#0c0c0c
  • list.activeSelectionForeground#F2404C
  • list.dropBackground#f0717880
  • list.focusBackground#EEFFFF20
  • list.focusForeground#EEFFFF
  • list.highlightForeground#F2404C
  • list.hoverBackground#0c0c0c
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#F2404C
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#090909
  • menu.border#4A4A4A
  • menu.foreground#EEFFFF
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#F2404C
  • menu.separatorBackground#EEFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#F2404C
  • notificationLink.foreground#F2404C
  • notifications.background#090909
  • notifications.foreground#EEFFFF
  • panel.background#0c0c0c
  • panel.border#030303
  • panel.dropBackground#EEFFFF
  • panelTitle.activeBorder#F2404C
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#EEFFFF
  • peekView.border#00000030
  • peekViewEditor.background#EEFFFF05
  • peekViewEditor.matchHighlightBackground#030303
  • peekViewEditorGutter.background#EEFFFF05
  • peekViewResult.background#EEFFFF05
  • peekViewResult.matchHighlightBackground#030303
  • peekViewResult.selectionBackground#84848470
  • peekViewTitle.background#EEFFFF05
  • peekViewTitleDescription.foreground#EEFFFF60
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#F2404C
  • progressBar.background#F2404C
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#F2404C
  • scrollbarSlider.background#EEFFFF20
  • scrollbarSlider.hoverBackground#EEFFFF10
  • selection.background#F2404C
  • settings.checkboxBackground#0c0c0c
  • settings.checkboxForeground#EEFFFF
  • settings.dropdownBackground#0c0c0c
  • settings.dropdownForeground#EEFFFF
  • settings.headerForeground#F2404C
  • settings.modifiedItemIndicator#F2404C
  • settings.numberInputBackground#0c0c0c
  • settings.numberInputForeground#EEFFFF
  • settings.textInputBackground#0c0c0c
  • settings.textInputForeground#EEFFFF
  • sideBar.background#0c0c0c
  • sideBar.border#030303
  • sideBar.foreground#848484
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.border#030303
  • sideBarTitle.foreground#EEFFFF
  • statusBar.background#0c0c0c
  • statusBar.border#030303
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#090909
  • statusBarItem.activeBackground#f0717880
  • statusBarItem.hoverBackground#4A4A4A20
  • statusBarItem.remoteBackground#F2404C
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#090909
  • tab.activeBorder#F2404C
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#848484
  • tab.border#090909
  • tab.inactiveBackground#090909
  • tab.inactiveForeground#848484
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#4A4A4A
  • tab.unfocusedActiveForeground#EEFFFF
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#4A4A4A
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCB6B
  • textLink.activeForeground#EEFFFF
  • textLink.foreground#F2404C
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#EEFFFF
  • titleBar.border#030303
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#848484
  • tree.indentGuidesStroke#424242
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#EEFFFF
#d8d8d8
variable.parameter.function#d8d8d8
comment, punctuation.definition.comment#585858
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d8d8d8
none#d8d8d8
keyword.operator#d8d8d8
keyword#AF91C9
variable#F2404C
variable.parameter#F2404C
variable.other.readwrite, variable.parameter, meta.block > variable.other.object.property, meta.block > variable.other.property#F2404C
variable.language.this#e04262
keyword.operator.expression.delete#AF91C9
new.expr entity.name.type.module, entity.name.type.interface, meta.function-call#FEE698
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, variable.other.object.property, punctuation.accessor#EEFFFF
entity.name.function, meta.require, support.function.any-method, new.expr entity.name.type, support.variable.property#4974a5
support.class, entity.name.class, entity.name.type.class#FEE698
meta.class#f8f8f8
keyword.other.special-method#4974a5
storage#AF91C9
support.type.object.module#AF91C9
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#AF91C9
support.function#86c1b9
string, punctuation.definition.variable.svelte, constant.other.symbol, entity.other.inherited-class#A1DD70
constant.numeric#FDB15D
support.type.primitive, meta.type.annotation, entity.name.type, meta.arrow meta.parameters meta.type.annotation entity.name.type#ff9cac
none#FDB15D
keyword.operator.expression.typeof#FDB15D
keyword.operator.new#FDB15D
none#FDB15D
constant#FDB15D
entity.name.tag#F2404C
entity.other.attribute-name#FDB15D
entity.other.attribute-name.id, punctuation.definition.entity#4974a5
meta.selector#AF91C9
none#FDB15D
markup.heading punctuation.definition.heading, entity.name.section#4974a5
keyword.other.unit#FDB15D
markup.bold, punctuation.definition.bold#FEE698bold
markup.italic, punctuation.definition.italic#AF91C9
markup.raw.inline#A1DD70
string.other.link, punctuation.definition.string.end.markdown#F2404C
meta.link#FDB15D
markup.list#F2404C
markup.quote#FDB15D
meta.separator#d8d8d8
markup.inserted#A1DD70
markup.deleted#F2404C
markup.changed#AF91C9
constant.other.color#86c1b9
string.regexp#86c1b9
constant.character.escape#86c1b9
punctuation.section.embedded, variable.interpolation#a16946
invalid.illegal#f8f8f8
invalid.broken#181818
invalid.deprecated#f8f8f8
invalid.unimplemented#f8f8f8
punctuation.definition.quote#ff9cac
meta.structure.dictionary.json support.type.property-name.json#F2404C
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4974a5
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#FDB15D
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#ff9cac
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#AF91C9
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#916b53
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#FEE698
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
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#F2404C
meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#F2404C
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#4974a5
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#FDB15D
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#916b53
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#ff9cac
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#82c9ff
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#AF91C9
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#C3E88D
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.single, meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key string.quoted.double#
meta.property-value.scss, meta.property-value.css, meta.property-list.scss, meta.property-list.css, constant.other.color.rgb-value.hex.css, constant.numeric.css, punctuation.terminator.rule.css, punctuation.terminator.rule.scss, support.function.misc.scss, support.function.misc.css#EEFFFF
keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.pt.css, keyword.other.unit.s.css, keyword.other.unit.deg.css, keyword.other.unit.grad.css, keyword.other.unit.rad.css, keyword.other.unit.turn.css, keyword.other.unit.mm.css, keyword.other.unit.cm.css, keyword.other.unit.in.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css, keyword.other.unit.percentage.css#acacac
support.type.property-name.css, meta.property-name.scss, meta.property-name.css#A1DD70
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#FFCB6B
meta.template.expression meta.brace.square#EEFFFF
text.html.markdown heading.1.markdown entity.name.section, heading.1.markdown punctuation.definition.heading.markdown#416894bold
text.html.markdown heading.2.markdown entity.name.section, heading.2.markdown punctuation.definition.heading.markdown#4974a5bold
text.html.markdown heading.3.markdown entity.name.section, heading.3.markdown punctuation.definition.heading.markdown#5B81AEbold
text.html.markdown heading.4.markdown entity.name.section, heading.4.markdown punctuation.definition.heading.markdown#6D8FB7bold
text.html.markdown heading.5.markdown entity.name.section, heading.5.markdown punctuation.definition.heading.markdown#7F9DC0bold
text.html.markdown heading.6.markdown entity.name.section, heading.6.markdown punctuation.definition.heading.markdown#91ABC9500
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#F2404C
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown#AF91C9
markup.underline.link.image.markdown, meta.image.inline.markdown#FFCB6B
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#ff9cac
meta.paragraph.markdown#A1DD70
meta.tag.sgml.doctype.html#FDB15D500
text.html.nunjucks storage#A1DD70
keyword.operator.nunjucks#FDB15D
text.html.nunjucks string.unquoted.tag-string.nunjucks#e04262
text.html.nunjucks storage.type.templatetag.nunjucks#EEFFFF
string.template meta.brace.round, punctuation.definition.block, punctuation.separator.key-value#EEFFFF
entity.tag.tagbraces.nunjucks#4974a5
comment.jsdoc.key#AF91C999
comment.jsdoc.key.var.type#4974a599
comment.jsdoc.key.var.name#F2404C99
comment.jsdoc.key.var.description#4A4A4A

Shiki preview

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

Loading...

Dark Blood Theme by Patryk Rzucidło (PTKDev) - VS Code Theme