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#131327
  • activityBar.activeBorder#6943ff62
  • activityBar.background#15152a
  • activityBar.border#131327
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#A599E9
  • activityBarBadge.background#ffd700
  • activityBarBadge.foreground#15152b
  • badge.background#ffd700
  • badge.foreground#15152b
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffd700
  • breadcrumb.foreground#a599e9
  • breadcrumbPicker.background#15152b
  • button.background#ffd700dd
  • button.foreground#131327
  • button.hoverBackground#ffd700
  • button.secondaryBackground#A599E9cc
  • button.secondaryForeground#131327
  • button.secondaryHoverBackground#A599E9
  • checkbox.background#131327
  • checkbox.foreground#ffd700
  • contrastActiveBorder#ffffff00
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#15152b
  • debugExceptionWidget.border#a599e9
  • debugIcon.continueForeground#ffd700
  • debugIcon.disconnectForeground#ffd700
  • debugIcon.pauseForeground#ffd700
  • debugIcon.restartForeground#3ad900
  • debugIcon.startForeground#ffd700
  • debugIcon.stepBackForeground#ffd700
  • debugIcon.stepIntoForeground#ffd700
  • debugIcon.stepOutForeground#ffd700
  • debugIcon.stepOverForeground#ffd700
  • debugIcon.stopForeground#ec3a37f5
  • debugToolBar.background#15152b
  • descriptionForeground#a599e9
  • diffEditor.insertedTextBackground#00ff000e
  • diffEditor.insertedTextBorder#00ff000e
  • diffEditor.removedTextBackground#ff000d1a
  • diffEditor.removedTextBorder#ff000d1a
  • dropdown.background#15152b
  • dropdown.border#15152b
  • dropdown.foreground#ffffff
  • editor.background#191830
  • editor.findMatchBackground#ff7300ab
  • editor.findMatchHighlightBackground#FFFF0336
  • editor.findRangeHighlightBackground#FFFF0336
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#FF730056
  • editor.inactiveSelectionBackground#7580B8C0
  • editor.lineHighlightBackground#1F1F41
  • editor.lineHighlightBorder#1F1F41
  • editor.linkedEditingBackground#7E46DFAA
  • editor.rangeHighlightBackground#1F1F41
  • editor.selectionBackground#5706a288
  • editor.selectionHighlightBackground#7E46DF46
  • editor.snippetFinalTabstopHighlightBackground#6943ff62
  • editor.snippetFinalTabstopHighlightBorder#6943ff62
  • editor.snippetTabstopHighlightBackground#6943ff62
  • editor.snippetTabstopHighlightBorder#6943ff62
  • editor.wordHighlightBackground#FFFFFF0D
  • editor.wordHighlightStrongBackground#FFFFFF0D
  • editorBracketHighlight.foreground1#ffab31
  • editorBracketHighlight.foreground2#ffd700
  • editorBracketHighlight.foreground3#6edbf7
  • editorBracketHighlight.unexpectedBracket.foreground#db6165
  • editorBracketMatch.background#AD70FC46
  • editorBracketMatch.border#AD70FC46
  • editorCodeLens.foreground#A599E9
  • editorCursor.foreground#FFD700
  • editorError.foreground#ec3a37f5
  • editorGroup.border#131327
  • editorGroup.dropBackground#131327D0
  • editorGroupHeader.noTabsBackground#191830
  • editorGroupHeader.tabsBackground#1a1a35
  • editorGroupHeader.tabsBorder#1F1F41
  • editorGutter.addedBackground#35ad68
  • editorGutter.background#15152a
  • editorGutter.deletedBackground#ec3a37f5
  • editorGutter.modifiedBackground#ffd700c0
  • editorHoverWidget.background#161633
  • editorHoverWidget.border#161633
  • editorIndentGuide.activeBackground#A599E942
  • editorIndentGuide.background#A599E90F
  • editorLineNumber.foreground#7870ab
  • editorLink.activeForeground#A599E9
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#ec3a37f5
  • editorMarkerNavigationWarning.background#ffd700
  • editorOverviewRuler.border#A599E91C
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#A599E91C
  • editorSuggestWidget.background#1f1f41
  • editorSuggestWidget.border#1f1f41
  • editorSuggestWidget.foreground#a599e9
  • editorSuggestWidget.highlightForeground#ffd700
  • editorSuggestWidget.selectedBackground#191830
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffd700
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#131327
  • editorWidget.border#1f1f41
  • errorForeground#ec3a37f5
  • extensionButton.prominentBackground#5d37f0
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#ffab31
  • focusBorder#15152b
  • foreground#a599e9
  • gitDecoration.conflictingResourceForeground#ff7200
  • gitDecoration.deletedResourceForeground#ec3a37f5
  • gitDecoration.ignoredResourceForeground#a599e981
  • gitDecoration.modifiedResourceForeground#ffd700
  • gitDecoration.untrackedResourceForeground#3ad900
  • input.background#191830
  • input.border#15152b
  • input.foreground#ffd700
  • input.placeholderForeground#a599e9
  • inputOption.activeBackground#5d37f0
  • inputOption.activeBorder#15152b
  • inputValidation.errorBackground#191830
  • inputValidation.errorBorder#ffd700
  • inputValidation.infoBackground#191830
  • inputValidation.infoBorder#191830
  • inputValidation.warningBackground#191830
  • inputValidation.warningBorder#ffd700
  • list.activeSelectionBackground#191830
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#191830
  • list.focusBackground#191830
  • list.focusForeground#ffffff
  • list.highlightForeground#ffd700
  • list.hoverBackground#191830
  • list.hoverForeground#cec5ff
  • list.inactiveSelectionBackground#191830
  • list.inactiveSelectionForeground#aaaaaa
  • listFilterWidget.background#191830
  • listFilterWidget.noMatchesOutline#ec3a37f5
  • listFilterWidget.outline#191830
  • menu.selectionBackground#7870ab
  • menu.separatorBackground#a599e9
  • merge.border#ffffff00
  • merge.commonContentBackground#a599e981
  • merge.commonHeaderBackground#a599e981
  • merge.currentContentBackground#103c00a5
  • merge.currentHeaderBackground#103c00a5
  • merge.incomingContentBackground#5b1b0092
  • merge.incomingHeaderBackground#5b1b0092
  • notificationCenter.border#15152b
  • notificationCenterHeader.background#6943ff
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#ffffff
  • notifications.background#15152b
  • notifications.border#191830
  • notifications.foreground#cec5ff
  • notificationToast.border#15152b
  • panel.background#15152b
  • panel.border#ffd700
  • panelTitle.activeBorder#ffd700
  • panelTitle.activeForeground#ffd700
  • panelTitle.inactiveForeground#a599e9
  • peekView.border#ffd700
  • peekViewEditor.background#15152b
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#191935
  • peekViewResult.background#15152b
  • peekViewResult.fileForeground#aaaaaa
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#191830
  • peekViewResult.selectionBackground#191830
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1f1f41
  • peekViewTitleDescription.foreground#aaaaaa
  • peekViewTitleLabel.foreground#ffd700
  • pickerGroup.border#15152b
  • pickerGroup.foreground#a599e9
  • progressBar.background#ffd700
  • scrollbar.shadow#a599e981
  • scrollbarSlider.activeBackground#ffd700
  • scrollbarSlider.background#a599e981
  • scrollbarSlider.hoverBackground#4d21fc
  • selection.background#5706a2
  • settings.checkboxBackground#A599E966
  • settings.checkboxBorder#15152b
  • settings.checkboxForeground#e5e4fb
  • settings.dropdownBackground#373457
  • settings.dropdownBorder#15152b
  • settings.dropdownForeground#e5e4fb
  • settings.dropdownListBorder#191830
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#ffd700
  • settings.numberInputBackground#373457
  • settings.numberInputBorder#15152b
  • settings.numberInputForeground#e5e4fb
  • settings.textInputBackground#373457
  • settings.textInputBorder#15152b
  • settings.textInputForeground#e5e4fb
  • sideBar.background#131327
  • sideBar.border#1a1a35
  • sideBar.foreground#A599E9
  • sideBarSectionHeader.background#15152b
  • sideBarSectionHeader.border#15152b
  • sideBarSectionHeader.foreground#A599E9
  • sideBarTitle.foreground#A599E9
  • statusBar.background#15152b
  • statusBar.border#15152b
  • statusBar.debuggingBackground#ffd700
  • statusBar.debuggingForeground#15152b
  • statusBar.foreground#a599e9
  • statusBar.noFolderBackground#15152b
  • statusBar.noFolderForeground#a599e9
  • statusBarItem.activeBackground#4d21fc
  • statusBarItem.hoverBackground#4d21fc
  • statusBarItem.prominentBackground#15152b
  • statusBarItem.prominentHoverBackground#191830
  • tab.activeBackground#131327
  • tab.activeBorder#ffd700
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#A599E9
  • tab.border#15152b
  • tab.inactiveBackground#191830
  • tab.inactiveForeground#A599E9
  • tab.inactiveModifiedBorder#A599E966
  • tab.unfocusedActiveForeground#A599E9
  • tab.unfocusedActiveModifiedBorder#A599E966
  • tab.unfocusedInactiveForeground#A599E9
  • tab.unfocusedInactiveModifiedBorder#A599E966
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6943ff
  • terminal.ansiBrightBlack#5c5c61
  • terminal.ansiBrightBlue#6943ff
  • terminal.ansiBrightCyan#86ffd7
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ec3a37f5
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#ff2c70
  • terminal.ansiRed#ec3a37f5
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd700
  • terminal.background#15152b
  • terminal.foreground#ffffff
  • terminalCursor.background#ffd700
  • terminalCursor.foreground#ffd700
  • textBlockQuote.background#15152b
  • textBlockQuote.border#6943FF
  • textCodeBlock.background#15152b
  • textLink.activeForeground#ffd700
  • textLink.foreground#ffd700
  • textPreformat.foreground#ffd700
  • textSeparator.foreground#15152b
  • titleBar.activeBackground#15152b
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#15152b
  • titleBar.inactiveForeground#a599e9
  • walkThrough.embeddedEditorBackground#15152b
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B362FF
entity#FFD700
constant#FF628C
keyword, storage.type.class.js#FFAF53
meta#fcee95
constant.numeric.decimal.ts meta#F7B2EC
invalid#EC3A37F5
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#E1EFFF
punctuation#E1EFFF
punctuation.definition.parameters#FFEE80
punctuation.definition.template-expression#FFEE80
storage#FFD700
storage.type.function.arrow#FFD700
string, punctuation.definition.string#95ee81
punctuation.definition.string.template#6DDB80
string.template#6DDB80
string.quoted.single.js#95EE81
punctuation.definition.string.template.begin.js#6DDB80
punctuation.definition.string.template.end.js#6DDB80
support#70fbcd
support.function#FFAB31
support.variable.property.dom#AAF5FF
variable#E1EFFF
source.ini entity, meta.embedded.block.ini, source.ini#E1EFFF
source.ini keyword, keyword.other.definition.ini#FFD700
source.ini punctuation.definition#FFEE80
source.ini punctuation.separator, punctuation.separator.key-value.ini#FFAB31
source.css entity, source.stylus entity#3AD900
entity.other.attribute-name.class.css#70FBCD
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#AAF5FF
entity.name.tag.css#FFAB31
source.css support, source.stylus support#D3FFA3
source.css meta#6DDB80
entity.other.attribute-name.pseudo-class.css#FFD700
entity.other.attribute-name#fee13e
support.function#FFEE80
source.css keyword.control#D3FFA3
source.css constant, source.css support.constant, source.css punctuation.definition.string.begin, source.css punctuation.definition.string.end, source.stylus constant, source.stylus support.constant#6DDB80
keyword.other.unit#E1EFFF
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#D3FFA3
source.css variable, source.stylus variable#AAF5FF
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#ffab31
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ffab31
entity.other.attribute-name.html#D3FFA3
meta.attribute.class.html entity.other.attribute-name.html, meta.attribute.id.html entity.other.attribute-name.html#D3FFA3
meta.attribute.src.html string, meta.attribute.href.html string#FFD700
meta.attribute.lang.html string, meta.attribute.charset.html string, meta.attribute.name.html string, meta.attribute.content.html string, meta.attribute.http-equiv.html string, meta.attribute.rel.html string, punctuation.definition.string.begin, punctuation.definition.string.end#6DDB80
punctuation.definition.string.begin, punctuation.definition.string.end#92FC79
meta.toc-list.id.html#6DDB80
meta.attribute.class.html string, meta.attribute.class.html punctuation.definition.string.begin, meta.attribute.class.html punctuation.definition.string.end, meta.attribute.id.html string, meta.attribute.id.html punctuation.definition.string.begin, meta.attribute.id.html punctuation.definition.string.end#b8fb71
text.html.basic entity.other#FFD700
meta.tag.metadata.script.html entity.name.tag.html#FFD700
meta.tag.inline.any.html, meta.tag.other#FFAB31
source.json support#FFD700
source.json string, source.json punctuation.definition.string#92FC79
source.js storage.type.function#70fbcd
variable.language, entity.name.type.class.js#8ff1d0
entity.other.inherited-class#FFEE80
storage.type.extends.js, storage.type.class.jsdoc#FFAB31
punctuation.definition.block.tag.jsdoc#FFAB31
variable.other.jsdoc, entity.name.type.instance.jsdoc#AAF5FF
variable.other.constant#d3ffa3
meta.array.literal.ts variable.other.constant#d3ffa3
meta.object.member.ts variable.other.constant#d3ffa3
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#AAF5FF
meta.jsx.children.js#FFFFFF
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#ffaf53
meta.type.annotation.ts keyword.operator#FFFFFF
punctuation.definition.bracket.curly#494685
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#ffaf53
keyword.operator.assignment#ffaf53
meta.jsx.children.tsx#FFFFFF
meta.object-literal.key.js#80FFBB
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite#AAF5FF
variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.ts#caf4f9
variable.other.property, variable.other.object.property#D3FFA3
JSXNested#FFFFFF
variable.parameter#AAF5FF
variable.parameter.function.language.special.self.python#AAF5FF
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#FFD700
source.python#a9a6f5
constant.numeric.dec.python#F7B2EC
constant.numeric.float.python#F7B2EC
source.ts entity.name.type#caf4f9
variable.other.object.tsx, variable.other.object.jsx, variable.other.object, variable.other.object.js#caf4f9
meta.objectliteral.ts variable.other.object#CAF4F9
source.ts keyword#FFD700
source.ts punctuation.definition.parameters#E1EFFF
meta.arrow.ts punctuation.definition.parameters#FFEE80
source.ts storage#AAF5FF
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FFD700bold
markup.inserted.diff, punctuation.definition.inserted.diff#8EFA00
markup.deleted.diff, punctuation.definition.deleted.diff#F16E6B
meta.embedded.block.diff#FFFFFF
meta.paragraph.markdown#FFFFFF
punctuation.definition.from-file.diff, meta.diff.header.from-file#B362FF
markup.inline.raw.string.markdown#A599E9
beginning.punctuation.definition.quote.markdown#FFD700
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#A599E9
meta.separator.markdown#FFD700
markup.bold.markdownbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#FFD700
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown#A5FF90
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown#FFD700underline
markup.underline.link.markdown, string.other.link.description.title.markdown#A599E9
fenced_code.block.language, markup.inline.raw.markdown#AAF5FF
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#a599e990
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FFD700
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FFAB31
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#A599E9
text.jade entity.name#AAF5FF
storage.type.function.pug#ffaf53
variable.parameter.function.js#AAF5FF
variable.control.import.include.pug#92FC79
text.jade string.interpolated#FFEE80
storage.type.cs#AAF5FF
entity.name.variable.property.cs#AAF5FF
storage.modifier.cs#80FFBB
source.php entity, variable.other.class.php#AAF5FF
keyword.other.phpdoc.php#FFAB31
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#FFD700
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#AAF5FF
storage.modifier.php, keyword.other.namespace.php#FFAB31
entity.name.tag.yaml#FFD700
punctuation.definition.block.sequence.item.yaml#E1EFFF
storage.type.function.php, meta.function.parameters.php#70fbcd
keyword.blade#FFAB31
begin.bracket.round.blade.php, end.bracket.round.blade.php#E1EFFF
support.function.construct.begin.blade, support.function.construct.end.blade#FFEE80
keyword.package.go, keyword.import.go#FFAB31
keyword.function.go#70fbcd
variable.other.assignment.go#AAF5FF
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#FFD700
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#FFEE80
variable.other.constant.ruby#80FFBB
entity.name.type.class.ruby#70fbcd
variable.other.block.ruby, variable.other.ruby#AAF5FF
punctuation.separator.other.ruby#FFAB31
keyword.other.special-method.ruby#FFEE80
storage.type.function.shell#70fbcd
variable.other.special.shell, punctuation.definition.variable.shell#FFAB31
variable.graphql#FAEFA5
keyword.operation.graphql#70fbcd
source.sql#E1EFFF
source.sql keyword.other, support.function.mysqli.php#FAEFA5
support.function.mysqli.php, source.sql support.function#FFD700
string.regexp, string.regexp keyword.other#E1EFFF
keyword.other.DML.sql#FFAB31
punctuation.definition.table.array.toml#E1EFFF
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#FFAB31
keyword.key.toml#FFD700
keyword.other.special-method.dockerfile#FFD700
keyword.other.rust#FFAB31
keyword.other.fn.rust#70fbcd
keyword.other.env#FFAB31
variable.other.env#FFD700
source.env#E1EFFF
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#ffaf53
variable.object.property#AAF5FF
string.regexp.js#70fbcd
keyword.rainbow2#FFAB31
markup.deleted#F16E6B
markup.inserted#8EFA00
markup.underlineunderline
modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pugitalic
storage.type#ffaf53
constant.numeric.decimal#F7B2EC
keyword.operator#ffaf53
keyword.operator.assignment#ffaf53
entity.name.function.js#FFD700
storage.type.function.js
meta.object-literal.key.js#FCEE95
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...