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#ae273a
  • activityBar.background#0c0c0c
  • activityBar.border#030303
  • activityBar.dropBackground#f0717880
  • activityBar.foreground#EEFFFF
  • activityBarBadge.background#ae273a
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#4A4A4A
  • breadcrumb.activeSelectionForeground#ae273a
  • 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#ae273a
  • 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#ae273a
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#0c0c0c
  • editorSuggestWidget.border#FFFFFF30
  • editorSuggestWidget.foreground#EEFFFF
  • editorSuggestWidget.highlightForeground#ae273a
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#0c0c0c
  • editorWidget.border#ae273a
  • editorWidget.resizeBorder#ae273a
  • 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#ae273a
  • list.dropBackground#f0717880
  • list.focusBackground#EEFFFF20
  • list.focusForeground#EEFFFF
  • list.highlightForeground#ae273a
  • list.hoverBackground#0c0c0c
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#ae273a
  • 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#ae273a
  • menu.separatorBackground#EEFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#ae273a
  • notificationLink.foreground#ae273a
  • notifications.background#090909
  • notifications.foreground#EEFFFF
  • panel.background#0c0c0c
  • panel.border#030303
  • panel.dropBackground#EEFFFF
  • panelTitle.activeBorder#ae273a
  • 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#ae273a
  • progressBar.background#ae273a
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#ae273a
  • scrollbarSlider.background#EEFFFF20
  • scrollbarSlider.hoverBackground#EEFFFF10
  • selection.background#ae273a
  • settings.checkboxBackground#0c0c0c
  • settings.checkboxForeground#EEFFFF
  • settings.dropdownBackground#0c0c0c
  • settings.dropdownForeground#EEFFFF
  • settings.headerForeground#ae273a
  • settings.modifiedItemIndicator#ae273a
  • 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#ae273a
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#090909
  • tab.activeBorder#ae273a
  • 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#ae273a
  • 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#875BAE
variable#ae273a
variable.parameter#ae273a
variable.other.readwrite, variable.parameter, meta.block > variable.other.object.property, meta.block > variable.other.property#ae273a
variable.language.this#ae2751
keyword.operator.expression.delete#875BAE
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#5B81AE
support.class, entity.name.class, entity.name.type.class#f7ca88
meta.class#f8f8f8
keyword.other.special-method#5B81AE
storage#875BAE
support.type.object.module#875BAE
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#875BAE
support.function#86c1b9
string, punctuation.definition.variable.svelte, constant.other.symbol, entity.other.inherited-class#196F63
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#ae273a
entity.other.attribute-name#dc9656
entity.other.attribute-name.id, punctuation.definition.entity#5B81AE
meta.selector#875BAE
none#dc9656
markup.heading punctuation.definition.heading, entity.name.section#5B81AE
keyword.other.unit#dc9656
markup.bold, punctuation.definition.bold#f7ca88bold
markup.italic, punctuation.definition.italic#875BAE
markup.raw.inline#196F63
string.other.link, punctuation.definition.string.end.markdown#ae273a
meta.link#dc9656
markup.list#ae273a
markup.quote#dc9656
meta.separator#d8d8d8
markup.inserted#196F63
markup.deleted#ae273a
markup.changed#875BAE
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#ae273a
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5B81AE
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#dc9656
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#875BAE
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#f7ca88
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#ae273a
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#ae273a
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#5B81AE
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#dc9656
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#875BAE
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#196F63
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#51749Cbold
text.html.markdown heading.2.markdown entity.name.section, heading.2.markdown punctuation.definition.heading.markdown#5B81AEbold
text.html.markdown heading.3.markdown entity.name.section, heading.3.markdown punctuation.definition.heading.markdown#7B9ABEbold
text.html.markdown heading.4.markdown entity.name.section, heading.4.markdown punctuation.definition.heading.markdown#8CA6C6bold
text.html.markdown heading.5.markdown entity.name.section, heading.5.markdown punctuation.definition.heading.markdown#9cd4ffbold
text.html.markdown heading.6.markdown entity.name.section, heading.6.markdown punctuation.definition.heading.markdown#9CB3CE500
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ae273a
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown#875BAE
markup.underline.link.image.markdown, meta.image.inline.markdown#FFCB6B
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#ff9cac
meta.paragraph.markdown#196F63
meta.tag.sgml.doctype.html#dc9656500
text.html.nunjucks storage#196F63
keyword.operator.nunjucks#dc9656
text.html.nunjucks string.unquoted.tag-string.nunjucks#ac415d
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#5B81AE
comment.jsdoc.key#875BAE99
comment.jsdoc.key.var.type#5B81AE99
comment.jsdoc.key.var.name#ae273a99
comment.jsdoc.key.var.description#4A4A4A

Shiki preview

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

Loading...