XpyJs Black
Publisher: xpyjsThemes in package: 1
XpyJs Black is a pure black theme that reduces visual fatigue and highlights the workspace.
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#845ec2
- activityBar.background#000
- activityBar.border#191919
- activityBar.dropBackground#000
- activityBar.foreground#dbd7cacc
- activityBar.inactiveForeground#dedcd550
- activityBarBadge.background#bfbaaa
- activityBarBadge.foreground#000
- badge.background#000
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#FFFFFF
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#845ec2
- breadcrumbPicker.background#001122
- button.background#4d9375
- button.foreground#000
- button.hoverBackground#4d9375
- checkbox.background#121212
- checkbox.border#2f363d
- contrastBorder#191919
- debugExceptionWidget.background#000
- debugExceptionWidget.border#191919
- debugToolBar.background#7e57c244
- diffEditor.insertedTextBackground#99b76d23
- diffEditor.insertedTextBorder#c5e47833
- diffEditor.removedTextBackground#ef535033
- diffEditor.removedTextBorder#ef53504d
- dropdown.background#000
- dropdown.border#191919
- dropdown.foreground#dbd7cacc
- dropdown.listBackground#121212
- editor.background#000
- editor.findMatchBackground#845ec244
- editor.findMatchHighlightBackground#845ec288
- editor.foreground#dbd7cacc
- editor.hoverHighlightBackground#000
- editor.inactiveSelectionBackground#eee1
- editor.lineHighlightBackground#000
- editor.rangeHighlightBackground#7e57c25a
- editor.selectionBackground#845ec244
- editor.selectionHighlightBackground#845ec244
- editor.wordHighlightBackground#845ec244
- editor.wordHighlightStrongBackground#845ec288
- editorBracketMatch.background#5f7e974d
- editorCodeLens.foreground#845ec2b4
- editorCursor.foreground#fff
- editorError.foreground#EF5350
- editorGroup.border#191919
- editorGroup.emptyBackground#000
- editorGroupHeader.noTabsBackground#000
- editorGroupHeader.tabsBackground#000
- editorGroupHeader.tabsBorder#191919
- editorGutter.addedBackground#9CCC65
- editorGutter.background#000
- editorGutter.deletedBackground#EF5350
- editorGutter.modifiedBackground#e2b93d
- editorHoverWidget.background#191919
- editorHoverWidget.border#fff9
- editorIndentGuide.activeBackground#7E97AC
- editorIndentGuide.background#845ec252
- editorLineNumber.activeForeground#845ec2
- editorLineNumber.foreground#dbd7cacc
- editorMarkerNavigation.background#000
- editorMarkerNavigationError.background#EF5350
- editorMarkerNavigationWarning.background#FFCA28
- editorOverviewRuler.commonContentForeground#7e57c2
- editorOverviewRuler.currentContentForeground#7e57c2
- editorOverviewRuler.incomingContentForeground#7e57c2
- editorRuler.foreground#845ec252
- editorSuggestWidget.background#000
- editorSuggestWidget.border#191919
- editorSuggestWidget.foreground#d6deeb
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#5f7e97
- editorWarning.foreground#b39554
- editorWidget.background#000
- editorWidget.border#fff9
- errorForeground#EF5350
- extensionButton.prominentBackground#7e57c2cc
- extensionButton.prominentForeground#ffffffcc
- extensionButton.prominentHoverBackground#7e57c2
- focusBorder#191919
- foreground#dbd7cacc
- gitDecoration.conflictingResourceForeground#ffeb95cc
- gitDecoration.deletedResourceForeground#EF535090
- gitDecoration.ignoredResourceForeground#9a9fa344
- gitDecoration.modifiedResourceForeground#a2bffc
- gitDecoration.untrackedResourceForeground#c5e478ff
- input.background#121212
- input.border#191919
- input.foreground#dbd7cacc
- input.placeholderForeground#dedcd590
- inputOption.activeBackground#dedcd550
- inputOption.activeBorder#ffffffcc
- inputValidation.errorBackground#AB0300F2
- inputValidation.errorBorder#EF5350
- inputValidation.infoBackground#00589EF2
- inputValidation.infoBorder#64B5F6
- inputValidation.warningBackground#675700F2
- inputValidation.warningBorder#FFCA28
- list.activeSelectionBackground#121212
- list.activeSelectionForeground#dbd7cacc
- list.dropBackground#011627
- list.focusBackground#121212
- list.focusForeground#ffffff
- list.highlightForeground#845ec2
- list.hoverBackground#121212
- list.hoverForeground#dbd7cacc
- list.inactiveFocusBackground#000
- list.inactiveSelectionBackground#121212
- list.inactiveSelectionForeground#dbd7cacc
- list.invalidItemForeground#975f94
- menu.separatorBackground#191919
- merge.currentHeaderBackground#5f7e97
- merge.incomingHeaderBackground#7e57c25a
- notificationCenter.border#262a39
- notificationLink.foreground#80CBC4
- notifications.background#01111d
- notifications.border#262a39
- notifications.foreground#ffffffcc
- notificationToast.border#262a39
- panel.background#000
- panel.border#191919
- panelInput.border#2f363d
- panelTitle.activeBorder#5f7e97
- panelTitle.activeForeground#ffffffcc
- panelTitle.inactiveForeground#d6deeb80
- peekView.border#fff
- peekViewEditor.background#011627
- peekViewEditor.matchHighlightBackground#7e57c25a
- peekViewResult.background#011627
- peekViewResult.fileForeground#5f7e97
- peekViewResult.lineForeground#5f7e97
- peekViewResult.matchHighlightBackground#ffffffcc
- peekViewResult.selectionBackground#2E3250
- peekViewResult.selectionForeground#5f7e97
- peekViewTitle.background#011627
- peekViewTitleDescription.foreground#697098
- peekViewTitleLabel.foreground#5f7e97
- pickerGroup.border#191919
- pickerGroup.foreground#d1aaff
- progress.background#7e57c2
- punctuation.definition.generic.begin.html#ef5350f2
- quickInput.background#000
- quickInput.foreground#dbd7cacc
- scrollbar.shadow#0000
- scrollbarSlider.activeBackground#ffffff40
- scrollbarSlider.background#ffffff40
- scrollbarSlider.hoverBackground#ffffff40
- selection.background#845ec2
- sideBar.background#000
- sideBar.border#191919
- sideBar.foreground#bfbaaa
- sideBarSectionHeader.background#000
- sideBarSectionHeader.border#191919
- sideBarSectionHeader.foreground#dbd7cacc
- sideBarTitle.foreground#dbd7cacc
- statusBar.background#000
- statusBar.border#262A39
- statusBar.debuggingBackground#202431
- statusBar.debuggingBorder#1F2330
- statusBar.foreground#fff6
- statusBar.noFolderBackground#000
- statusBar.noFolderBorder#25293A
- statusBarItem.activeBackground#202431
- statusBarItem.hoverBackground#202431
- statusBarItem.prominentBackground#202431
- statusBarItem.prominentHoverBackground#202431
- tab.activeBackground#845ec299
- tab.activeBorder#fff9
- tab.activeForeground#dbd7cacc
- tab.border#191919
- tab.inactiveBackground#000
- tab.inactiveForeground#959da5
- tab.unfocusedActiveBorder#191919
- terminal.ansiBlack#000
- terminal.ansiBlue#82AAFF
- terminal.ansiBrightBlack#575656
- terminal.ansiBrightBlue#82AAFF
- terminal.ansiBrightCyan#7fdbca
- terminal.ansiBrightGreen#22da6e
- terminal.ansiBrightMagenta#C792EA
- terminal.ansiBrightRed#EF5350
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffeb95
- terminal.ansiCyan#21c7a8
- terminal.ansiGreen#22da6e
- terminal.ansiMagenta#C792EA
- terminal.ansiRed#EF5350
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#c5e478
- terminal.selectionBackground#1b90dd4d
- terminalCursor.background#234d70
- textBlockQuote.background#000
- textBlockQuote.border#191919
- textCodeBlock.background#000
- textLink.activeForeground#4d9375
- textLink.foreground#4d9375
- textPreformat.foreground#d1d5da
- textSeparator.foreground#586069
- titleBar.activeBackground#191919
- titleBar.activeForeground#eeefff
- titleBar.inactiveBackground#000
- walkThrough.embeddedEditorBackground#7e57c222
- welcomePage.buttonBackground#000
- welcomePage.buttonHoverBackground#7e57c222
- widget.shadow#0000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #758575dd | italic |
| delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, keyword.operator.type, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts, punctuation, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue | #444444 | — |
| constant, entity.name.constant, variable.language, meta.definition.variable | #00ffff | — |
| entity, entity.name | #a2ea3a | — |
| variable.parameter, variable.parameter.function | #dbd7cacc | bold |
| support.function | #82AAFF | — |
| entity.name.tag, tag.html | #2ab479 | — |
| entity.name.function | #25e735 | — |
| keyword, storage.type.class.jsdoc, punctuation.definition.template-expression | #6dd3a7 | — |
| storage.type, support.type.builtin | #eb266d | — |
| storage, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts | #eb266d | — |
| constant.language.undefined, constant.language.null | #ce5b85 | italic bold |
| text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java | #dbd7cacc | — |
| string, string punctuation.section.embedded source, attribute.value | #9bd2eb | — |
| punctuation.definition.string | #9bd2eb | — |
| punctuation.support.type.property-name | #ff9a3b | — |
| support | #c2ce55 | — |
| meta.object-literal.key, meta.object-literal.key.ts, meta.object-literal.key.js, support.type.property-name.yaml, meta.structure.dictionary.key.python, meta.mapping.key, property, meta.property-name, attribute.name, entity.name.tag.yaml | #ccc | — |
| support.type.property-name.json, support.type.property-name.json.comments | #c2ce55 | — |
| entity.name.tag.custom | #2e6fb9 | — |
| entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html | #7c87b6 | italic |
| entity.other.attribute-name.class, entity.other.attribute-name.id | #a784db | — |
| variable, identifier | #c2bd2e | — |
| variable.parameter, variable.parameter.function, variable.parameter.function.python, variable.parameter.cs, variable.parameter.cpp, variable.parameter.rust, meta.arguments variable.parameter, meta.function.parameters variable.parameter, meta.lambda.parameters variable.parameter, meta.arrow.parameters variable.parameter, meta.function.parameter variable.parameter, meta.method.parameters variable.parameter | #93c598 | italic |
| support.type.primitive | #4ef7f7 | italic |
| entity.name.type | #5d66ee | — |
| namespace | #eb266d | — |
| keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts | #eb266d | — |
| invalid.broken | #eb266d | italic |
| invalid.deprecated | #eb266d | italic |
| invalid.illegal | #eb266d | italic |
| invalid.unimplemented | #eb266d | italic |
| carriage-return | #24292e | italic underline |
| message.error | #eb266d | — |
| string variable | #c98a7d | — |
| source.regexp, string.regexp | #c4704f | — |
| string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition | #c98a7d | — |
| string.regexp constant.character.escape | #e6cc77 | — |
| keyword.operator.quantifier.regexp, constant.numeric, number | #cf6632 | — |
| keyword.other.unit | #cb7676 | — |
| constant.language.boolean, constant.language | #ff0e56 | — |
| meta.module-reference | #4d9375 | — |
| punctuation.definition.list.begin.markdown | #d4976c | — |
| markup.heading, markup.heading entity.name | #4d9375 | bold |
| markup.quote | #5d99a9 | — |
| markup.italic | #dbd7cacc | italic |
| markup.bold | #dbd7cacc | bold |
| markup.raw | #4d9375 | — |
| markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted | #fdaeb7 | — |
| markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted | #85e89d | — |
| markup.changed, punctuation.definition.changed | #ffab70 | — |
| markup.ignored, markup.untracked | #2f363d | — |
| meta.diff.range | #b392f0 | bold |
| meta.diff.header | #79b8ff | — |
| meta.separator | #79b8ff | bold |
| meta.output | #79b8ff | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #d1d5da | — |
| brackethighlighter.unmatched | #fdaeb7 | — |
| constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown | #c98a7d | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #dedcd590 | underline |
| type.identifier, constant.other.character-class.regexp | #6872ab | — |
| entity.other.attribute-name.html.vue | #80a665 | italic |
| invalid.illegal.unrecognized-tag.html | — | normal |
| entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css | #a18f3e | |
| entity.name.tag.scss, entity.name.tag.sass | #7fdbca | — |
| keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx | #eb266d | italic bold |
| keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts | #dd5555 | italic |
| support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control | #eb266d | italic |