Skip to main content
Coding Theme

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.activeBackground#c96ae710
  • activityBar.activeBorder#fe4e9f
  • activityBar.background#1e1f35
  • activityBar.border#293347
  • activityBar.foreground#f8f8fa
  • activityBar.inactiveForeground#6272a4
  • activityBarBadge.background#fe4e9f
  • activityBarBadge.foreground#f8f8fa
  • badge.background#44475a
  • badge.foreground#f8f8fa
  • breadcrumb.activeSelectionForeground#f8f8fa
  • breadcrumb.background#1e1f35
  • breadcrumb.focusForeground#f8f8fa
  • breadcrumb.foreground#6272a4
  • breadcrumbPicker.background#191a21
  • button.background#44475a
  • button.foreground#f8f8fa
  • checkbox.border#6272a4
  • contrastBorder#191a21
  • debugToolBar.background#21222c
  • diffEditor.insertedTextBackground#50fa7b20
  • diffEditor.removedTextBackground#ff555550
  • dropdown.background#343746
  • dropdown.border#191a21
  • dropdown.foreground#f8f8fa
  • editor.background#1e1f35
  • editor.findMatchBackground#ffb48f80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#44475a75
  • editor.foreground#f8f8fa
  • editor.hoverHighlightBackground#15bbff50
  • editor.lineHighlightBorder#44475a
  • editor.rangeHighlightBackground#c96ae715
  • editor.selectionBackground#44475a
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282a36
  • editor.snippetFinalTabstopHighlightBorder#37dd9e
  • editor.snippetTabstopHighlightBackground#282a36
  • editor.snippetTabstopHighlightBorder#6272a4
  • editor.wordHighlightBackground#8be9fd50
  • editor.wordHighlightStrongBackground#50fa7b50
  • editorCodeLens.foreground#6272a4
  • editorCursor.foreground#fe4e9f
  • editorError.foreground#ff5555
  • editorGroup.border#21293d
  • editorGroup.dropBackground#44475a70
  • editorGroupHeader.border#21293d
  • editorGroupHeader.tabsBackground#191a21
  • editorGutter.addedBackground#50fa7b80
  • editorGutter.deletedBackground#ff555580
  • editorGutter.modifiedBackground#8be9fd80
  • editorHoverWidget.background#282a36
  • editorHoverWidget.border#6272a4
  • editorLineNumber.foreground#6272a4
  • editorLink.activeForeground#8be9fd
  • editorMarkerNavigation.background#21222c
  • editorOverviewRuler.addedForeground#50fa7b80
  • editorOverviewRuler.border#191a21
  • editorOverviewRuler.currentContentForeground#37dd9e
  • editorOverviewRuler.deletedForeground#ff555580
  • editorOverviewRuler.errorForeground#ff555580
  • editorOverviewRuler.incomingContentForeground#c96ae7
  • editorOverviewRuler.infoForeground#8be9fd80
  • editorOverviewRuler.modifiedForeground#8be9fd80
  • editorOverviewRuler.selectionHighlightForeground#ffb48f
  • editorOverviewRuler.warningForeground#ffb48f80
  • editorOverviewRuler.wordHighlightForeground#8be9fd
  • editorOverviewRuler.wordHighlightStrongForeground#37dd9e
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#21222c
  • editorSuggestWidget.foreground#f8f8fa
  • editorSuggestWidget.selectedBackground#44475a
  • editorWarning.foreground#8be9fd
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#21222c
  • errorForeground#ff5555
  • extensionButton.prominentBackground#50fa7b90
  • extensionButton.prominentForeground#f8f8fa
  • extensionButton.prominentHoverBackground#50fa7b60
  • focusBorder#6272a4
  • foreground#f8f8fa
  • gitDecoration.conflictingResourceForeground#ffb48f
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.ignoredResourceForeground#6272a4
  • gitDecoration.modifiedResourceForeground#8be9fd
  • gitDecoration.untrackedResourceForeground#37dd9e
  • input.background#282a36
  • input.border#191a21
  • input.foreground#f8f8fa
  • input.placeholderForeground#6272a4
  • inputOption.activeBorder#c96ae7
  • inputValidation.errorBorder#ff5555
  • inputValidation.infoBorder#fe4e9f
  • inputValidation.warningBorder#ffb48f
  • list.activeSelectionBackground#44475a
  • list.activeSelectionForeground#f8f8fa
  • list.dropBackground#44475a
  • list.errorForeground#ff5555
  • list.focusBackground#44475a75
  • list.highlightForeground#8be9fd
  • list.hoverBackground#44475a75
  • list.inactiveSelectionBackground#44475a75
  • list.warningForeground#ffb48f
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#ff5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#50fa7b90
  • merge.incomingHeaderBackground#c96ae790
  • panel.background#1e1f35
  • panel.border#293347
  • panelTitle.activeBorder#fe4e9f
  • panelTitle.activeForeground#f8f8fa
  • panelTitle.inactiveForeground#6272a4
  • peekView.border#44475a
  • peekViewEditor.background#282a36
  • peekViewEditor.matchHighlightBackground#eac39480
  • peekViewResult.background#21222c
  • peekViewResult.fileForeground#f8f8fa
  • peekViewResult.lineForeground#f8f8fa
  • peekViewResult.matchHighlightBackground#eac39480
  • peekViewResult.selectionBackground#44475a
  • peekViewResult.selectionForeground#f8f8fa
  • peekViewTitle.background#191a21
  • peekViewTitleDescription.foreground#6272a4
  • peekViewTitleLabel.foreground#f8f8fa
  • pickerGroup.border#c96ae7
  • pickerGroup.foreground#8be9fd
  • progressBar.background#fe4e9f
  • selection.background#ffffff18
  • settings.checkboxBackground#21222c
  • settings.checkboxBorder#191a21
  • settings.checkboxForeground#f8f8fa
  • settings.dropdownBackground#21222c
  • settings.dropdownBorder#191a21
  • settings.dropdownForeground#f8f8fa
  • settings.headerForeground#f8f8fa
  • settings.modifiedItemIndicator#ffb48f
  • settings.numberInputBackground#21222c
  • settings.numberInputBorder#191a21
  • settings.numberInputForeground#f8f8fa
  • settings.textInputBackground#21222c
  • settings.textInputBorder#191a21
  • settings.textInputForeground#f8f8fa
  • sideBar.background#1e1f35
  • sideBar.border#293347
  • sideBarSectionHeader.background#1e1f35
  • sideBarSectionHeader.border#191a21
  • sideBarTitle.foreground#f8f8fa
  • statusBar.background#191a21
  • statusBar.debuggingBackground#ff5555
  • statusBar.debuggingForeground#191a21
  • statusBar.foreground#f8f8fa
  • statusBar.noFolderBackground#191a21
  • statusBar.noFolderForeground#f8f8fa
  • statusBarItem.prominentBackground#ff5555
  • statusBarItem.prominentHoverBackground#ffb48f
  • statusBarItem.remoteBackground#c96ae7
  • statusBarItem.remoteForeground#f8f8fa
  • tab.activeBackground#1e1f35
  • tab.activeBorderTop#fe4e9f
  • tab.activeForeground#f8f8fa
  • tab.border#191a21
  • tab.inactiveBackground#191a21
  • tab.inactiveForeground#6272a4
  • tab.lastPinnedBorder#1e1f35
  • terminal.ansiBlack#21222c
  • terminal.ansiBlue#c96ae7
  • terminal.ansiBrightBlack#8d92ff
  • terminal.ansiBrightBlue#c96ae7
  • terminal.ansiBrightCyan#8be9fd
  • terminal.ansiBrightGreen#37dd9e
  • terminal.ansiBrightMagenta#fe4e9f
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#eac394
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#37dd9e
  • terminal.ansiMagenta#fe4e9f
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#cbdaff
  • terminal.ansiYellow#fde181
  • terminal.background#1e1f35
  • terminal.foreground#e5f0fb
  • titleBar.activeBackground#1e1f35
  • titleBar.activeForeground#f8f8fa
  • titleBar.inactiveBackground#1e1f36
  • titleBar.inactiveForeground#6272a4
  • walkThrough.embeddedEditorBackground#21222c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#C96AE7
source#CBDAFF
meta.diff, meta.diff.header#7F848E
markup.inserted#37DD9E
markup.deleted#FF5555
markup.changed#FFB48F
invalid#FF5555underline italic
invalid.deprecated#CBDAFFunderline italic
entity.name.filename#EAC394
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB48Fbold
markup.heading#C96AE7bold
markup.italic#FFB48Fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#15BBFF
markup.inline.raw, markup.raw.restructuredtext#37DD9E
markup.underline.link, markup.underline.link.image#15BBFF
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FE4E9F
entity.name.directive.restructuredtext, markup.quote#EAC394italic
meta.separator.markdown#7F848E
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#37DD9E
punctuation.definition.constant.restructuredtext#C96AE7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C96AE7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#CBDAFF
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#EAC394
entity.name.type.class, entity.name.class#15BBFFnormal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#C96AE7
entity.other.inherited-class#15BBFFitalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FE4E9F
comment.block.documentation entity.name.type#15BBFFitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#15BBFF
comment.block.documentation variable#FFB48Fitalic
constant.character.escape, constant.character.string.escape, constant.regexp#FE4E9F
entity.name.tag#FE4E9F
entity.other.attribute-name.parent-selector#FE4E9F
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix, support.function.transform.css#37DD9E
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql#FFB48Fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#37DD9Eitalic
meta.decorator variable.other.object#37DD9E
keyword, punctuation.definition.keyword#FE4E9F
keyword.control.new, keyword.operator.newbold
meta.selector#FE4E9F
support#15BBFF
support.function.magic, support.variable, variable.other.predefined#CBDAFF
support.function, support.type.property-name
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#FE4E9F
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#CBDAFF
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#FE4E9F
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#15BBFF
constant.other.date, constant.other.timestamp#FFB48F
variable.other.alias.yaml#37DD9Eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FE4E9F
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#15BBFFitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB48F
storage.modifier#FE4E9F
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#EAC394
punctuation.definition.group.capture.regexp#FE4E9F
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#15BBFF
punctuation.definition.group.regexp#FFB48F
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#37DD9E
string#EAC394
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#7F848E
variable, constant.other.key.perl, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#CBDAFF
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB48Fitalic
meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#CBDAFF
meta.selectionset.graphql variable#EAC394
meta.selectionset.graphql meta.arguments variable#CBDAFF
entity.name.fragment.graphql, variable.fragment.graphql#15BBFF
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#CBDAFF
source.shell variable.other#C96AE7
support.constant, support.type.property-name.media.css, meta.property-values.css#C96AE7
meta.scope.prerequisites.makefile#EAC394
meta.attribute-selector.scss#EAC394
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#CBDAFF
meta.preprocessor.haskell#7F848E
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx#37DD9E
entity.other.attribute-name, entity.name.function, support.type.media-names.css, support.type.property-names.css, variable.other.class.js#37DD9E
variable.other.property.js, variable.other.property.tsx, variable.other.property.static.js, JSXNested, variable.other.readwrite.js, punctuation.semi-colon, punctuation.colon, punctuation.definition.tag#FFFFFF
variable.graphql, string, punctuation.definition.string.begin, punctuation.definition.string.end, meta.attribute-selector.scss, meta.attribute-selector.css#EAC394
keyword, storage, constant.length.units.css, source.inside-js.css.styled, constant.numeric.css, punctuation.definition.keyword, entity.name.tag, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, constant.length.units.css, constant.percentage.units.css, constant.time.units.css, constant.angle.units.css, storage.modifier.ts#FE4E9F
variable.other.constant, variable.other.constant.ts, variable.other.constant.tsx, support.variable#ADD7FF
support.class.component
variable.other.object, variable.other.object.ts, variable.other.object.tsx, variable.other.constant.ts, variable.other.constant.tsx, variable.parameter, variable.other.readwrite.shorthandpropertyname.js#C96AE7
variable.other.constant.object#ADD7FF
entity.name.type.parameter#FFB48F
support.constant.important.css, punctuation.important.css, support.function, support.function.css, support.function.transform.css, constant.language.pseudo.css, constant.language.pseudo.prefixed.css, entity.name.function.scss, constant.other.color#C96AE7
support, entity.name.type, meta.interface.ts, entity.other.inherited-class#15BBFF
meta.import variable.other.readwrite.alias, support.variable.property, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.js, entity.name.type.class, variable.other.property.js, variable.other.property.ts, variable.other.property.tsx, variable.scss, variable.other.property.static.js, string.unquoted.js, meta.object-literal.key#CBDAFF
log.error#EE6666bold
log.warning#E7EE98bold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
constant.length.units.css, constant.percentage.units.css, support.type.media-names.css, support.type.property-names.css#9B87FD
meta.paragraph.markdown, text.html.derivative, JSXNested#FBF3E8
support.function#37DD9E
entity.name.class.js#15BBFF
keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css#C96AE7
entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.generic.html, entity.other.attribute-name.tag.pug#37DD9E
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4italic
keyword, storage.type, keyword.operator, storage.modifier
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.jsx, storage.type.function.arrow.tsx
keyword.operator.comparison.js, storage.type.function.arrow.js, keyword.operator.relational.js, keyword.operator.logical.js, keyword.operator.comparison.ts, storage.type.function.arrow.ts, keyword.operator.relational.ts, keyword.operator.logical.ts, keyword.operator.comparison.tsx, storage.type.function.arrow.tsx, keyword.operator.relational.tsx, keyword.operator.logical.tsx, keyword.operator.ternary.tsx, keyword.operator.comparison.python#FD91FC
support.constant.property-value.css, support.type.property-name.media.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.percentage.css, entity.name.function.scss, constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.css, support.constant.color.w3c-standard-color-name.css, support.constant.media.css#ADD7FF
meta.jsx.children.tsx, text.html.derivative#FFFFFF
keyword.control.flow.tsx, keyword.control.flow.ts, keyword.control.flow.jsx, keyword.control.flow.jsbold
entity.name.function.tsx, entity.name.function.member, entity.name.function.ts, support.function.tsx, support.function.ts#37DD9D
entity.name.type.parameter, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, header#978DF8
variable.other.object, variable.other.object.ts, variable.other.object.tsx, variable.other.constant.ts, variable.other.constant.tsx, variable.parameter, variable.other.readwrite.shorthandpropertyname.js, markup.heading, punctuation.definition.constant.restructuredtext, markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end, keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, constant, variable.other.constant, source.shell variable.other, support.constant, support.type.property-name.media.css, meta.property-values.css, support.constant.important.css, punctuation.important.css, support.function, support.function.css, support.function.transform.css, constant.language.pseudo.css, constant.language.pseudo.prefixed.css, entity.name.function.scss, constant.other.color#978DF8
variable.parameter#FFB48F
support.constant.color.w3c-standard-color-name.css, support.constant.property-value.css, constant.other.color.rgb-value.hex.css, variable.other.constant, variable.other.constant.ts, variable.other.constant.tsx, variable.other.constant.object.tsx, variable.other.constant.object.ts, variable.other.constant.object.js, variable.other.constant.object.jsx#978DF8
entity.name.function.css, entity.name.function.scss, support.function, support.function.transform.css#37DD9D

Shiki preview

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

Loading...