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#222244
  • activityBar.activeBorder#6943ff62
  • activityBar.background#28284e
  • activityBar.border#222244
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#AEADD4
  • activityBarBadge.background#FBF573
  • activityBarBadge.foreground#1e1e3f
  • badge.background#FBF573
  • badge.foreground#1e1e3f
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#FBF573
  • breadcrumb.foreground#AEADD4
  • breadcrumbPicker.background#1e1e3f
  • button.background#FBF573dd
  • button.foreground#222244
  • button.hoverBackground#FBF573
  • button.secondaryBackground#AEADD4cc
  • button.secondaryForeground#222244
  • button.secondaryHoverBackground#AEADD4
  • checkbox.background#222244
  • checkbox.foreground#FBF573
  • contrastActiveBorder#ffffff00
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#1e1e3f
  • debugExceptionWidget.border#AEADD4
  • debugIcon.continueForeground#FBF573
  • debugIcon.disconnectForeground#FBF573
  • debugIcon.pauseForeground#FBF573
  • debugIcon.restartForeground#3ad900
  • debugIcon.startForeground#FBF573
  • debugIcon.stepBackForeground#FBF573
  • debugIcon.stepIntoForeground#FBF573
  • debugIcon.stepOutForeground#FBF573
  • debugIcon.stepOverForeground#FBF573
  • debugIcon.stopForeground#ec3a37f5
  • debugToolBar.background#1e1e3f
  • descriptionForeground#AEADD4
  • diffEditor.insertedTextBackground#00ff000e
  • diffEditor.insertedTextBorder#00ff009a
  • diffEditor.removedTextBackground#ff000d1a
  • diffEditor.removedTextBorder#ff000d81
  • dropdown.background#1e1e3f
  • dropdown.border#1e1e3f
  • dropdown.foreground#ffffff
  • editor.background#2d2b55
  • 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#88888888
  • editor.selectionHighlightBackground#7e46df46
  • editor.snippetFinalTabstopHighlightBackground#6943ff62
  • editor.snippetFinalTabstopHighlightBorder#6943ff62
  • editor.snippetTabstopHighlightBackground#6943ff62
  • editor.snippetTabstopHighlightBorder#6943ff62
  • editor.wordHighlightBackground#ffffff0d
  • editor.wordHighlightStrongBackground#ffffff0d
  • editorBracketMatch.background#ad70fc46
  • editorBracketMatch.border#ad70fc46
  • editorCodeLens.foreground#AEADD4
  • editorCursor.foreground#FBF573
  • editorError.foreground#ec3a37f5
  • editorGroup.border#222244
  • editorGroup.dropBackground#222244d0
  • editorGroupHeader.noTabsBackground#2d2b55
  • editorGroupHeader.tabsBackground#2d2b55
  • editorGroupHeader.tabsBorder#1f1f41
  • editorGutter.addedBackground#35ad68
  • editorGutter.background#28284e
  • editorGutter.deletedBackground#ec3a37f5
  • editorGutter.modifiedBackground#ad70fc46
  • editorHoverWidget.background#161633
  • editorHoverWidget.border#161633
  • editorIndentGuide.activeBackground#AEADD442
  • editorIndentGuide.background#AEADD40f
  • editorLineNumber.foreground#AEADD4
  • editorLink.activeForeground#AEADD4
  • editorMarkerNavigation.background#3b536433
  • editorMarkerNavigationError.background#ec3a37f5
  • editorMarkerNavigationWarning.background#FBF573
  • editorOverviewRuler.border#AEADD41c
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#AEADD41c
  • editorSuggestWidget.background#1f1f41
  • editorSuggestWidget.border#1f1f41
  • editorSuggestWidget.foreground#AEADD4
  • editorSuggestWidget.highlightForeground#FBF573
  • editorSuggestWidget.selectedBackground#2d2b55
  • editorWarning.border#ffffff00
  • editorWarning.foreground#FBF573
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#222244
  • editorWidget.border#1f1f41
  • errorForeground#ec3a37f5
  • extensionButton.prominentBackground#5d37f0
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#FFF690
  • focusBorder#1e1e3f
  • foreground#AEADD4
  • gitDecoration.conflictingResourceForeground#ff7200
  • gitDecoration.deletedResourceForeground#ec3a37f5
  • gitDecoration.ignoredResourceForeground#AEADD481
  • gitDecoration.modifiedResourceForeground#FBF573
  • gitDecoration.untrackedResourceForeground#3ad900
  • input.background#2d2b55
  • input.border#1e1e3f
  • input.foreground#FBF573
  • input.placeholderForeground#AEADD4
  • inputOption.activeBackground#5d37f0
  • inputOption.activeBorder#1e1e3f
  • inputValidation.errorBackground#2d2b55
  • inputValidation.errorBorder#FBF573
  • inputValidation.infoBackground#2d2b55
  • inputValidation.infoBorder#2d2b55
  • inputValidation.warningBackground#2d2b55
  • inputValidation.warningBorder#FBF573
  • list.activeSelectionBackground#2d2b55
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2d2b55
  • list.focusBackground#2d2b55
  • list.focusForeground#ffffff
  • list.highlightForeground#FBF573
  • list.hoverBackground#2d2b55
  • list.hoverForeground#cec5ff
  • list.inactiveSelectionBackground#2d2b55
  • list.inactiveSelectionForeground#aaaaaa
  • listFilterWidget.background#2d2b55
  • listFilterWidget.noMatchesOutline#ec3a37f5
  • listFilterWidget.outline#2d2b55
  • menu.separatorBackground#AEADD4
  • merge.border#ffffff00
  • merge.commonContentBackground#AEADD481
  • merge.commonHeaderBackground#AEADD481
  • merge.currentContentBackground#3ad90093
  • merge.currentHeaderBackground#3ad90093
  • merge.incomingContentBackground#ff730086
  • merge.incomingHeaderBackground#ff730086
  • notificationCenter.border#1e1e3f
  • notificationCenterHeader.background#6943ff
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#ffffff
  • notifications.background#1e1e3f
  • notifications.border#2d2b55
  • notifications.foreground#cec5ff
  • notificationToast.border#1e1e3f
  • panel.background#1e1e3f
  • panel.border#FBF573
  • panelTitle.activeBorder#FBF573
  • panelTitle.activeForeground#FBF573
  • panelTitle.inactiveForeground#AEADD4
  • peekView.border#FBF573
  • peekViewEditor.background#1e1e3f
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#191935
  • peekViewResult.background#1e1e3f
  • peekViewResult.fileForeground#aaaaaa
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#2d2b55
  • peekViewResult.selectionBackground#2d2b55
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1f1f41
  • peekViewTitleDescription.foreground#aaaaaa
  • peekViewTitleLabel.foreground#FBF573
  • pickerGroup.border#1e1e3f
  • pickerGroup.foreground#AEADD4
  • progressBar.background#FBF573
  • sash.hoverBorder#FBF573
  • scrollbar.shadow#AEADD481
  • scrollbarSlider.activeBackground#FBF573
  • scrollbarSlider.background#AEADD481
  • scrollbarSlider.hoverBackground#4d21fc
  • selection.background#888888
  • settings.checkboxBackground#1e1e3f
  • settings.checkboxBorder#1e1e3f
  • settings.checkboxForeground#e5e4fb
  • settings.dropdownBackground#1e1e3f
  • settings.dropdownBorder#1e1e3f
  • settings.dropdownForeground#e5e4fb
  • settings.dropdownListBorder#2d2b55
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#FBF573
  • settings.numberInputBackground#1e1e3f
  • settings.numberInputBorder#1e1e3f
  • settings.numberInputForeground#e5e4fb
  • settings.textInputBackground#1e1e3f
  • settings.textInputBorder#1e1e3f
  • settings.textInputForeground#e5e4fb
  • sideBar.background#222244
  • sideBar.border#25254b
  • sideBar.foreground#AEADD4
  • sideBarSectionHeader.background#1e1e3f
  • sideBarSectionHeader.border#1e1e3f
  • sideBarSectionHeader.foreground#AEADD4
  • sideBarTitle.foreground#AEADD4
  • statusBar.background#AEADD4
  • statusBar.border#1e1e3f
  • statusBar.debuggingBackground#FBF573
  • statusBar.debuggingForeground#1e1e3f
  • statusBar.foreground#FBF573
  • statusBar.noFolderBackground#AEADD4
  • statusBar.noFolderForeground#FBF573
  • statusBarItem.activeBackground#FBF573
  • statusBarItem.hoverBackground#C7CAE5
  • statusBarItem.prominentBackground#C7CAE5
  • statusBarItem.prominentHoverBackground#C7CAE5
  • tab.activeBackground#222244
  • tab.activeBorder#FBF573
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#AEADD4
  • tab.border#1e1e3f
  • tab.inactiveBackground#2d2b55
  • tab.inactiveForeground#AEADD4
  • tab.inactiveModifiedBorder#AEADD466
  • tab.unfocusedActiveForeground#AEADD4
  • tab.unfocusedActiveModifiedBorder#AEADD466
  • tab.unfocusedInactiveForeground#AEADD4
  • tab.unfocusedInactiveModifiedBorder#AEADD466
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7857fe
  • terminal.ansiBrightBlack#5c5c61
  • terminal.ansiBrightBlue#6943ff
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#E297B0
  • terminal.ansiBrightRed#ec3a37f5
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FBF573
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#ff2c70
  • terminal.ansiRed#ec3a37f5
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FBF573
  • terminal.background#1e1e3f
  • terminal.foreground#ffffff
  • terminalCursor.background#FBF573
  • terminalCursor.foreground#FBF573
  • textBlockQuote.background#1e1e3f
  • textBlockQuote.border#6943ff
  • textCodeBlock.background#1e1e3f
  • textLink.activeForeground#888888
  • textLink.foreground#888888
  • textPreformat.foreground#FBF573
  • textSeparator.foreground#1e1e3f
  • titleBar.activeBackground#AEADD4
  • titleBar.activeForeground#FBF573
  • titleBar.inactiveBackground#AEADD4
  • titleBar.inactiveForeground#FBF573
  • walkThrough.embeddedEditorBackground#1e1e3f
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888888
entity#FBF573
constant#FF628C
keyword, storage.type.class.js#FFF690
meta#D3DBED
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#FBF573
storage.type.function.arrow#FBF573
string, punctuation.definition.string#98CDC9
string.template, punctuation.definition.string.template#3AD900
support#98CDC9
support.function#FFF690
support.variable.property.dom#D3DBED
variable#E1EFFF
source.ini entity, meta.embedded.block.ini, source.ini#E1EFFF
source.ini keyword, keyword.other.definition.ini#FBF573
source.ini punctuation.definition#FFEE80
source.ini punctuation.separator, punctuation.separator.key-value.ini#FFF690
source.css entity, source.stylus entity#3AD900
entity.other.attribute-name.class.css#D3DBED
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#FFB454
entity.name.tag#D3DBED
source.css support, entity.name.tag.css, source.stylus support#98CDC9
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#FFEE80
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#FFEE80
source.css variable, source.stylus variable#D3DBED
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.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#D3DBED
meta.toc-list.id.html#98CDC9
text.html.basic entity.other#FBF573
meta.tag.metadata.script.html entity.name.tag.html#FBF573
punctuation.definition.string.begin, punctuation.definition.string.end#92FC79
meta.tag.inline.any.html, meta.tag.other#FFF690
source.json support#FBF573
source.json string, source.json punctuation.definition.string#92FC79
source.js storage.type.function#E297B0
variable.language, entity.name.type.class.js#E297B0
entity.other.inherited-class#FFEE80
storage.type.extends.js, storage.type.class.jsdoc#FFF690
punctuation.definition.block.tag.jsdoc#FFF690
variable.other.jsdoc, entity.name.type.instance.jsdoc#D3DBED
variable.other.constant#D3DBED
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#D3DBED
meta.jsx.children.js#FFFFFF
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#FFF690
punctuation.definition.bracket.curly#494685
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#FFF690
keyword.operator.assignment#FFF690
meta.jsx.children.tsx#FFFFFF
meta.object-literal.key.js#80FFBB
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js#D3DBED
variable.other.property, variable.other.object.property#FFEE80
JSXNested#FFFFFF
variable.parameter#D3DBED
variable.parameter.function.language.special.self.python#D3DBED
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#FBF573
source.ts entity.name.type#80FFBB
source.ts keyword#FBF573
source.ts punctuation.definition.parameters#E1EFFF
meta.arrow.ts punctuation.definition.parameters#FFEE80
source.ts storage#D3DBED
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FBF573bold
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#888888
markup.inline.raw.string.markdown#AEADD4
beginning.punctuation.definition.quote.markdown#FBF573
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#AEADD4
meta.separator.markdown#FBF573
markup.bold.markdownbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#FBF573
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#98CDC9
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#FBF573underline
markup.underline.link.markdown, string.other.link.description.title.markdown#AEADD4
fenced_code.block.language, markup.inline.raw.markdown#D3DBED
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#494685
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#FBF573
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FFF690
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#AEADD4
text.jade entity.name#D3DBED
storage.type.function.pug#FFF690
variable.parameter.function.js#D3DBED
variable.control.import.include.pug#92FC79
text.jade string.interpolated#FFEE80
storage.type.cs#D3DBED
entity.name.variable.property.cs#D3DBED
storage.modifier.cs#80FFBB
source.php entity, variable.other.class.php#D3DBED
keyword.other.phpdoc.php#FFF690
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#FBF573
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#D3DBED
storage.modifier.php, keyword.other.namespace.php#FFF690
entity.name.tag.yaml#FBF573
punctuation.definition.block.sequence.item.yaml#E1EFFF
storage.type.function.php, meta.function.parameters.php#E297B0
keyword.blade#FFF690
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#FFF690
keyword.function.go#E297B0
variable.other.assignment.go#D3DBED
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#FBF573
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#E297B0
variable.other.block.ruby, variable.other.ruby#D3DBED
punctuation.separator.other.ruby#FFF690
keyword.other.special-method.ruby#FFEE80
storage.type.function.shell#E297B0
variable.other.special.shell, punctuation.definition.variable.shell#FFF690
variable.graphql#FAEFA5
keyword.operation.graphql#E297B0
source.sql#E1EFFF
source.sql keyword.other, support.function.mysqli.php#FAEFA5
support.function.mysqli.php, source.sql support.function#FBF573
string.regexp, string.regexp keyword.other#E1EFFF
keyword.other.DML.sql#FFF690
punctuation.definition.table.array.toml#E1EFFF
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#FFF690
keyword.key.toml#FBF573
keyword.other.special-method.dockerfile#FBF573
keyword.other.rust#FFF690
keyword.other.fn.rust#E297B0
keyword.other.env#FFF690
variable.other.env#FBF573
source.env#E1EFFF
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#FFF690
variable.object.property#D3DBED
string.regexp.js#E297B0
keyword.rainbow2#FFF690
keyword.other.nim, keyword.other#FFF690
keyword.boolean#FF628C
punctuation.pragma.start.nim, punctuation.pragma.end.nim, entity.name.function.nim#FBF573
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
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6