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.activeBorder#9fef00
  • activityBar.background#141d2b
  • activityBar.foreground#a4b1cd
  • activityBar.inactiveForeground#313f55
  • activityBarBadge.background#9fef00
  • activityBarBadge.foreground#1a2332
  • badge.background#ff3e3e
  • badge.foreground#ffffff
  • banner.background#111927
  • banner.foreground#a4b1cd
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#9fef00
  • breadcrumb.background#1a2332
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#a4b1cd
  • breadcrumbPicker.background#111927
  • button.background#9fef00
  • button.foreground#111927
  • charts.blue#004cff
  • charts.foreground#a4b1cd
  • charts.green#9fef00
  • charts.lines#a4b1cd
  • charts.orange#2ee7b6
  • charts.purple#9f00ff
  • charts.red#ff3e3e
  • charts.yellow#ffaf00
  • checkbox.background#111927
  • checkbox.border#111927
  • checkbox.foreground#9fef00
  • debugExceptionWidget.background#ff3e3e49
  • debugExceptionWidget.border#ff3e3e49
  • debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
  • debugIcon.breakpointDisabledForeground#ff3e3e49
  • debugIcon.breakpointForeground#ff3e3e
  • debugIcon.breakpointStackframeForeground#004cff49
  • debugIcon.breakpointUnverifiedForeground#a4b1cd
  • debugIcon.continueForeground#9fef00
  • debugIcon.disconnectForeground#ff3e3e
  • debugIcon.pauseForeground#9fef00
  • debugIcon.restartForeground#ffaf00
  • debugIcon.startForeground#9fef00
  • debugIcon.stepBackForeground#a4b1cd
  • debugIcon.stepIntoForeground#a4b1cd
  • debugIcon.stepOutForeground#a4b1cd
  • debugIcon.stepOverForeground#a4b1cd
  • debugIcon.stopForeground#ff3e3e
  • debugToolBar.background#1a2332
  • debugToolBar.border#1a2332
  • descriptionForeground#a4b1cd
  • dropdown.background#111927
  • dropdown.foreground#a4b1cd
  • dropdown.listBackground#111927
  • editor.background#141d2b
  • editor.findMatchBackground#6e7b96a1
  • editor.findMatchHighlightBackground#6e7b968C
  • editor.findRangeHighlightBackground#6e7b968C
  • editor.foldBackground#141d2b
  • editor.foreground#a4b1cd
  • editor.lineHighlightBackground#1a2332
  • editor.lineHighlightBorder#1a2332
  • editor.rangeHighlightBackground#313f55
  • editor.selectionBackground#6e7b968C
  • editor.selectionForeground#111927
  • editor.selectionHighlightBackground#6e7b968C
  • editor.stackFrameHighlightBackground#6e7b968C
  • editorBracketMatch.border#313f55
  • editorCursor.background#9fef00
  • editorGroup.border#313f55
  • editorGroup.dropBackground#6e7b9625
  • editorGroupHeader.tabsBackground#111927
  • editorGutter.addedBackground#9fef00
  • editorGutter.background#141d2b
  • editorGutter.commentRangeForeground#a4b1cd
  • editorGutter.deletedBackground#ff3e3e
  • editorGutter.modifiedBackground#004cff
  • editorHoverWidget.background#1a2332
  • editorHoverWidget.foreground#a4b1cd
  • editorIndentGuide.activeBackground#a4b1cd
  • editorIndentGuide.background#313f55
  • editorLightBulb.foreground#ffaf00
  • editorLightBulbAutoFix.foreground#9fef00
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#313f55
  • editorOverviewRuler.bracketMatchForeground#a4b1cd
  • editorOverviewRuler.commonContentForeground#9fef00
  • editorOverviewRuler.errorForeground#ff3e3e
  • editorOverviewRuler.findMatchForeground#004cff
  • editorOverviewRuler.infoForeground#ffffff
  • editorOverviewRuler.rangeHighlightForeground#004cff
  • editorOverviewRuler.selectionHighlightForeground#004cff
  • editorOverviewRuler.warningForeground#ffaf00
  • editorOverviewRuler.wordHighlightForeground#a4b1cd
  • editorSuggestWidget.background#1a2332
  • editorSuggestWidget.border#1a2332
  • editorSuggestWidget.foreground#a4b1cd
  • editorWidget.background#1a2332
  • editorWidget.border#1a2332
  • errorForeground#ff3e3e
  • extensionBadge.remoteBackground#2ee7b6
  • extensionBadge.remoteForeground#111927
  • extensionButton.prominentBackground#9fef00
  • extensionButton.prominentForeground#111927
  • extensionButton.prominentHoverBackground#c5f467
  • extensionIcon.starForeground#ffaf00
  • focusBorder#1a2332
  • foreground#a4b1cd
  • gitDecoration.addedResourceForeground#9fef00
  • gitDecoration.conflictingResourceForeground#ffaf00
  • gitDecoration.deletedResourceForeground#ff3e3e
  • gitDecoration.ignoredResourceForeground#6e7b968C
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.submoduleResourceForeground#5cecc6
  • gitDecoration.untrackedResourceForeground#a4b1cd
  • icon.foreground#a4b1cd
  • input.background#141d2b
  • input.border#141d2b
  • input.foreground#ffffff
  • input.placeholderForeground#a4b1cd
  • inputOption.activeBackground#313f55
  • inputOption.activeBorder#313f55
  • inputOption.activeForeground#a4b1cd
  • inputValidation.errorBackground#ff3e3e70
  • inputValidation.errorBorder#ff3e3e49
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#004cff70
  • inputValidation.infoBorder#004cff54
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ffaf0070
  • inputValidation.warningBorder#ffaf0070
  • inputValidation.warningForeground#ffffff
  • keybindingLabel.background#6e7b965d
  • keybindingLabel.border#6e7b968C
  • keybindingLabel.bottomBorder#a4b1cd7e
  • keybindingLabel.foreground#a4b1cd
  • list.activeSelectionBackground#1a2332
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#313f55
  • list.errorForeground#ff3e3e
  • list.hoverBackground#1a2332
  • list.inactiveSelectionBackground#1a2332
  • list.warningForeground#ffaf00
  • listFilterWidget.background#004cff
  • menu.background#111927
  • menu.separatorBackground#1a2332
  • menubar.selectionBackground#111927
  • menubar.selectionForeground#a4b1cd
  • merge.commonContentBackground#ffffff
  • merge.commonHeaderBackground#ffffff
  • merge.currentContentBackground#ff3e3e49
  • merge.currentHeaderBackground#ff3e3e
  • merge.incomingContentBackground#004cff49
  • merge.incomingHeaderBackground#004cff
  • minimap.errorHighlight#ff8484
  • minimap.findMatchHighlight#c5f467
  • minimap.selectionHighlight#ffffffd0
  • minimap.warningHighlight#ffcc5c
  • minimapGutter.addedBackground#9fef00
  • minimapGutter.deletedBackground#ff3e3e
  • minimapGutter.modifiedBackground#004cff
  • minimapSlider.activeBackground#6e7b968C
  • minimapSlider.background#141d2b
  • minimapSlider.hoverBackground#111927
  • notificationCenterHeader.background#1a2332
  • notificationLink.foreground#5cb2ff
  • notifications.background#1a2332
  • notifications.foreground#a4b1cd
  • notificationsErrorIcon.foreground#ff8484
  • notificationsInfoIcon.foreground#9fef00
  • notificationsWarningIcon.foreground#ffcc5c
  • panel.background#111927
  • panel.border#141d2b
  • panelTitle.activeBorder#9fef00
  • panelTitle.inactiveForeground#a4b1cd
  • peekView.border#1a2332
  • peekViewEditor.background#141d2b
  • progressBar.background#9fef00
  • scm.providerBorder#a4b1cd
  • scrollbar.shadow#141d2b
  • scrollbarSlider.activeBackground#6e7b968C
  • scrollbarSlider.background#6e7b968C
  • scrollbarSlider.hoverBackground#6e7b968C
  • selection.background#313f55
  • settings.checkboxBackground#111927
  • settings.checkboxBorder#111927
  • settings.checkboxForeground#9fef00
  • settings.dropdownBackground#111927
  • settings.dropdownBorder#111927
  • settings.dropdownForeground#a4b1cd
  • settings.dropdownListBorder#111927
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#9fef00
  • settings.numberInputBackground#111927
  • settings.numberInputBorder#111927
  • settings.numberInputForeground#a4b1cd
  • settings.textInputBackground#111927
  • settings.textInputBorder#111927
  • settings.textInputForeground#a4b1cd
  • sideBar.background#1a2332
  • sideBar.foreground#a4b1cd
  • sideBarSectionHeader.background#1a2332
  • sideBarSectionHeader.foreground#6e7b968C
  • sideBarTitle.foreground#a4b1cd
  • statusBar.background#1a2332
  • statusBar.debuggingBackground#ff8484
  • statusBar.debuggingForeground#111927
  • statusBar.foreground#a4b1cd
  • statusBar.noFolderBackground#1a2332
  • statusBar.noFolderForeground#a4b1cd
  • tab.activeBackground#1a2332
  • tab.activeBorder#1a2332
  • tab.activeBorderTop#141d2b
  • tab.activeModifiedBorder#a4b1cd
  • tab.border#141d2b
  • tab.hoverBackground#141d2b
  • tab.hoverBorder#141d2b
  • tab.inactiveBackground#141d2b
  • tab.inactiveForeground#6e7b968C
  • tab.unfocusedActiveBorder#a4b1cd
  • terminal.ansiBlue#004cff
  • terminal.ansiBrightBlue#5cb2ff
  • terminal.ansiBrightCyan#5cecc6
  • terminal.ansiBrightGreen#c5f467
  • terminal.ansiBrightMagenta#c16cfa
  • terminal.ansiBrightRed#ff8484
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc5c
  • terminal.ansiCyan#2ee7b6
  • terminal.ansiGreen#9fef00
  • terminal.ansiMagenta#9f00ff
  • terminal.ansiRed#ff3e3e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffaf00
  • terminal.background#111927
  • terminal.foreground#a4b1cd
  • terminalCursor.background#313f55
  • testing.iconErrored#ffaf00
  • testing.iconFailed#ff3e3e
  • testing.iconPassed#9fef00
  • testing.iconQueued#a4b1cd
  • testing.iconSkipped#a4b1cd
  • testing.iconUnset#a4b1cd
  • testing.message.error.decorationForeground#ff3e3e
  • testing.message.error.lineBackground#ff3e3e
  • testing.message.hint.decorationForeground#2ee7b6
  • testing.message.hint.lineBackground#2ee7b6
  • testing.message.info.decorationForeground#004cff
  • testing.message.info.lineBackground#004cff
  • testing.message.warning.decorationForeground#ffaf00
  • testing.message.warning.lineBackground#ffaf00
  • testing.peekBorder#a4b1cd
  • textBlockQuote.background#141d2b
  • textBlockQuote.border#a4b1cd
  • textCodeBlock.background#111927
  • textLink.activeForeground#c5f467
  • textLink.foreground#9fef00
  • textPreformat.foreground#2e6cff
  • textSeparator.foreground#ffffff
  • titleBar.activeBackground#141d2b
  • titleBar.activeForeground#a4b1cd
  • titleBar.border#141d2b
  • titleBar.inactiveBackground#1a2332
  • titleBar.inactiveForeground#313f55
  • tree.indentGuidesStroke#9fef00
  • walkThrough.embeddedEditorBackground#141d2b
  • welcomePage.background#141d2b
  • welcomePage.buttonBackground#1a2332
  • welcomePage.buttonHoverBackground#313f55
  • widget.shadow#1119277e
  • window.activeBorder#1a2332

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7E4FF46italic
variable, string constant.other.placeholder#A4B1CD
string constant.other.placeholder#C5D1EB
constant.other.color#FFFFFF
invalid, invalid.illegal#FF8484
keyword, storage.type, storage.modifier#FF8484
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5CECC6
keyword.control#CF8DFB
markup.deleted.git_gutter#C5D1EB
entity.name.tag, meta.tag.sgml#FF8484
markup.deleted.git_gutter#C5D1EB
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFCC5C
meta.block variable.other#C5D1EB
support.other.variable#FF8484
string.other.link#FF8484
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5CB2FF
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C5F467
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF8484
entity.name, entity.other.inherited-class#ffffff
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF8484
support.type#A4B1CD
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#A4B1CD
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8484
variable.language#FF8484italic
entity.name.method.js#5CB2FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#FF8484
entity.other.attribute-name#5CB2FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCC5Citalic
entity.other.attribute-name.class#5CB2FF
source.sass keyword.control#5CB2FF
markup.inserted#C5F467
markup.deleted#FF8484
markup.changed#CF8DFB
string.regexp#5CB2FF
constant.character.escape#5CB2FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5CB2FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF8484italic
source.json meta.structure.dictionary.json support.type.property-name.json#CF8DFB
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FF
source.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#5CB2FF
source.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#FF8484
source.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#FF68B3
source.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#5CB2FF
source.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#FF8484
source.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#CF8DFB
source.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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C5F467
text.html.markdown, punctuation.definition.list_item.markdown#A4B1CD
text.html.markdown markup.inline.raw.markdown#CF8DFB
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#313F55
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C5F467
markup.italic#FF8484italic
markup.bold, markup.bold string#ff009d
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF8484bold
markup.underline#FF8484underline
markup.quote punctuation.definition.blockquote.markdown#1A2332
markup.quoteitalic
string.other.link.title.markdown#5CB2FF
string.other.link.description.title.markdown#CF8DFB
constant.other.reference.link.markdown#5CB2FF
markup.raw.block#CF8DFB
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#A4B1CD
variable.language.fenced.markdown#313F55
meta.separator#313F55bold
markup.table#A4B1CD
token.info-token#5CB2FF
token.warn-token#FFCC5C
token.error-token#FF8484
token.debug-token#CF8DFB

Shiki preview

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

Loading...