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#da3b30
  • activityBar.background#0c0c0c
  • activityBar.border#030303
  • activityBar.dropBackground#f0717880
  • activityBar.foreground#EEFFFF
  • activityBarBadge.background#da3b30
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#4A4A4A
  • breadcrumb.activeSelectionForeground#da3b30
  • 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#da3b30
  • 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#da3b30
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#0c0c0c
  • editorSuggestWidget.border#FFFFFF30
  • editorSuggestWidget.foreground#EEFFFF
  • editorSuggestWidget.highlightForeground#da3b30
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#0c0c0c
  • editorWidget.border#da3b30
  • editorWidget.resizeBorder#da3b30
  • 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#da3b30
  • list.dropBackground#f0717880
  • list.focusBackground#EEFFFF20
  • list.focusForeground#EEFFFF
  • list.highlightForeground#da3b30
  • list.hoverBackground#0c0c0c
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#da3b30
  • 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#da3b30
  • menu.separatorBackground#EEFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#da3b30
  • notificationLink.foreground#da3b30
  • notifications.background#090909
  • notifications.foreground#EEFFFF
  • panel.background#0c0c0c
  • panel.border#030303
  • panel.dropBackground#EEFFFF
  • panelTitle.activeBorder#da3b30
  • 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#da3b30
  • progressBar.background#da3b30
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#da3b30
  • scrollbarSlider.background#EEFFFF20
  • scrollbarSlider.hoverBackground#EEFFFF10
  • selection.background#da3b30
  • settings.checkboxBackground#0c0c0c
  • settings.checkboxForeground#EEFFFF
  • settings.dropdownBackground#0c0c0c
  • settings.dropdownForeground#EEFFFF
  • settings.headerForeground#da3b30
  • settings.modifiedItemIndicator#da3b30
  • 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#da3b30
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#090909
  • tab.activeBorder#da3b30
  • 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#da3b30
  • 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#A17FC0
variable#da3b30
variable.parameter#da3b30
variable.other.readwrite, variable.parameter, meta.block > variable.other.object.property, meta.block > variable.other.property#da3b30
variable.language.this#E81E62
keyword.operator.expression.delete#A17FC0
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#4974a5
support.class, entity.name.class, entity.name.type.class#f7ca88
meta.class#f8f8f8
keyword.other.special-method#4974a5
storage#A17FC0
support.type.object.module#A17FC0
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#A17FC0
support.function#86c1b9
string, punctuation.definition.variable.svelte, constant.other.symbol, entity.other.inherited-class#49a57a
constant.numeric#fc9867
support.type.primitive, meta.type.annotation, entity.name.type, meta.arrow meta.parameters meta.type.annotation entity.name.type#ff9cac
none#fc9867
keyword.operator.expression.typeof#fc9867
keyword.operator.new#fc9867
none#fc9867
constant#fc9867
entity.name.tag#da3b30
entity.other.attribute-name#fc9867
entity.other.attribute-name.id, punctuation.definition.entity#4974a5
meta.selector#A17FC0
none#fc9867
markup.heading punctuation.definition.heading, entity.name.section#4974a5
keyword.other.unit#fc9867
markup.bold, punctuation.definition.bold#f7ca88bold
markup.italic, punctuation.definition.italic#A17FC0
markup.raw.inline#49a57a
string.other.link, punctuation.definition.string.end.markdown#da3b30
meta.link#fc9867
markup.list#da3b30
markup.quote#fc9867
meta.separator#d8d8d8
markup.inserted#49a57a
markup.deleted#da3b30
markup.changed#A17FC0
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#da3b30
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#fc9867
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#A17FC0
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#da3b30
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#da3b30
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#fc9867
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#A17FC0
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#49a57a
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#6fa7bcbold
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#89b7c8bold
text.html.markdown heading.4.markdown entity.name.section, heading.4.markdown punctuation.definition.heading.markdown#97bfcebold
text.html.markdown heading.5.markdown entity.name.section, heading.5.markdown punctuation.definition.heading.markdown#a4c8d5bold
text.html.markdown heading.6.markdown entity.name.section, heading.6.markdown punctuation.definition.heading.markdown#b2d0db500
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#da3b30
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown#A17FC0
markup.underline.link.image.markdown, meta.image.inline.markdown#FFCB6B
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#ff9cac
meta.paragraph.markdown#49a57a
meta.tag.sgml.doctype.html#fc9867500
text.html.nunjucks storage#49a57a
keyword.operator.nunjucks#fc9867
text.html.nunjucks string.unquoted.tag-string.nunjucks#E81E62
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#A17FC099
comment.jsdoc.key.var.type#4974a599
comment.jsdoc.key.var.name#da3b3099
comment.jsdoc.key.var.description#4A4A4A

Shiki preview

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

Loading...