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#EA333C
  • activityBar.background#0c0c0c
  • activityBar.border#030303
  • activityBar.dropBackground#f0717880
  • activityBar.foreground#EEFFFF
  • activityBarBadge.background#EA333C
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#4A4A4A
  • breadcrumb.activeSelectionForeground#EA333C
  • 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#EA333C
  • 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#EA333C
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#0c0c0c
  • editorSuggestWidget.border#FFFFFF30
  • editorSuggestWidget.foreground#EEFFFF
  • editorSuggestWidget.highlightForeground#EA333C
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#0c0c0c
  • editorWidget.border#EA333C
  • editorWidget.resizeBorder#EA333C
  • 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#EA333C
  • list.dropBackground#f0717880
  • list.focusBackground#EEFFFF20
  • list.focusForeground#EEFFFF
  • list.highlightForeground#EA333C
  • list.hoverBackground#0c0c0c
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#EA333C
  • 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#EA333C
  • menu.separatorBackground#EEFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#EA333C
  • notificationLink.foreground#EA333C
  • notifications.background#090909
  • notifications.foreground#EEFFFF
  • panel.background#0c0c0c
  • panel.border#030303
  • panel.dropBackground#EEFFFF
  • panelTitle.activeBorder#EA333C
  • 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#EA333C
  • progressBar.background#EA333C
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#EA333C
  • scrollbarSlider.background#EEFFFF20
  • scrollbarSlider.hoverBackground#EEFFFF10
  • selection.background#EA333C
  • settings.checkboxBackground#0c0c0c
  • settings.checkboxForeground#EEFFFF
  • settings.dropdownBackground#0c0c0c
  • settings.dropdownForeground#EEFFFF
  • settings.headerForeground#EA333C
  • settings.modifiedItemIndicator#EA333C
  • 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#EA333C
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#090909
  • tab.activeBorder#EA333C
  • 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#EA333C
  • 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#EA333C
variable.parameter#EA333Citalic
variable.other.readwrite, variable.parameter, meta.block > variable.other.object.property, meta.block > variable.other.property#EA333C
variable.language.this#ea335b
keyword.operator.expression.delete#AF91C9
new.expr entity.name.type.module, entity.name.type.interface, meta.function-call#f7ca88
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#61AFEF
support.class, entity.name.class, entity.name.type.class#f7ca88
meta.class#f8f8f8
keyword.other.special-method#61AFEF
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#98c379
constant.numeric#dc9656
support.type.primitive, meta.type.annotation, entity.name.type, meta.arrow meta.parameters meta.type.annotation entity.name.type#ff9cac
none#dc9656
keyword.operator.expression.typeof#dc9656
keyword.operator.new#dc9656
none#dc9656
constant#dc9656
entity.name.tag#EA333C
entity.other.attribute-name#dc9656
entity.other.attribute-name.id, punctuation.definition.entity#61AFEF
meta.selector#AF91C9
none#dc9656
markup.heading punctuation.definition.heading, entity.name.section#61AFEF
keyword.other.unit#dc9656
markup.bold, punctuation.definition.bold#f7ca88bold
markup.italic, punctuation.definition.italic#AF91C9italic
markup.raw.inline#98c379
string.other.link, punctuation.definition.string.end.markdown#EA333C
meta.link#dc9656
markup.list#EA333C
markup.quote#dc9656
meta.separator#d8d8d8
markup.inserted#98c379
markup.deleted#EA333C
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#EA333Citalic
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#61AFEFitalic
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#dc9656italic
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#ff9cacitalic
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#AF91C9italic
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#916b53italic
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#f7ca88italic
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#C3E88Ditalic
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#EA333Citalic
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#EA333Citalic
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#61AFEFitalic
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#dc9656italic
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#916b53italic
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#ff9cacitalic
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#579DD7italic
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#AF91C9italic
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#C3E88Ditalic
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#italic
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#98c379
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#579DD7bold
text.html.markdown heading.2.markdown entity.name.section, heading.2.markdown punctuation.definition.heading.markdown#61AFEFbold
text.html.markdown heading.3.markdown entity.name.section, heading.3.markdown punctuation.definition.heading.markdown#70B7F0bold
text.html.markdown heading.4.markdown entity.name.section, heading.4.markdown punctuation.definition.heading.markdown#80BFF2bold
text.html.markdown heading.5.markdown entity.name.section, heading.5.markdown punctuation.definition.heading.markdown#90C7F3bold
text.html.markdown heading.6.markdown entity.name.section, heading.6.markdown punctuation.definition.heading.markdown#A0CFF5500
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#EA333C
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#98c379
meta.tag.sgml.doctype.html#dc9656500
text.html.nunjucks storage#98c379
keyword.operator.nunjucks#dc9656
text.html.nunjucks string.unquoted.tag-string.nunjucks#ea335b
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#61AFEF
comment.jsdoc.key#AF91C9italic
comment.jsdoc.key.var.type#61AFEF99italic
comment.jsdoc.key.var.name#EA333C99italic
comment.jsdoc.key.var.description#4A4A4Aitalic

Shiki preview

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

Loading...

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