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

Shiki preview

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

Loading...