VSCode Vercel Theme
Publisher: Gabriel MorenoThemes in package: 2
A carefully crafted set of colorschemes that are faithful to Next.js & Vercel's docs
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#ededed
- activityBar.background#000000
- activityBar.border#242424
- activityBar.foreground#ededed
- activityBar.inactiveForeground#878787
- activityBarBadge.background#ededed
- activityBarBadge.foreground#000000
- badge.background#ededed
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#ededed
- breadcrumb.focusForeground#ededed
- breadcrumb.foreground#a1a1a1
- breadcrumbPicker.background#000000
- button.background#ededed
- button.foreground#000000
- button.hoverBackground#ededed
- button.secondaryBackground#ffffff1a
- button.secondaryForeground#a1a1a1
- button.secondaryHoverBackground#333333
- checkbox.background#000000
- checkbox.border#333333
- commandCenter.activeBackground#0a0a0a
- commandCenter.activeBorder#242424
- commandCenter.background#0a0a0a
- commandCenter.border#242424
- commandCenter.debuggingBackground#ffffff1a
- commandCenter.inactiveBorder#ffffff1a
- debugToolBar.background#000000
- descriptionForeground#ededed
- diffEditor.insertedTextBackground#58c76033
- diffEditor.removedTextBackground#f05b8d33
- dropdown.background#000000
- dropdown.border#333333
- dropdown.foreground#a1a1a1
- dropdown.listBackground#000000
- editor.background#0a0a0a
- editor.findMatchBackground#f9990288
- editor.findMatchHighlightBackground#f9990222
- editor.focusedStackFrameHighlightBackground#333333
- editor.foldBackground#ffffff1a
- editor.foreground#ededed
- editor.inactiveSelectionBackground#ffffff1a
- editor.lineHighlightBackground#ffffff1a
- editor.linkedEditingBackground#ffffff1a
- editor.selectionBackground#ffffff1a
- editor.selectionHighlightBackground#ffffff1a
- editor.selectionHighlightBorder#ffffff1a
- editor.stackFrameHighlightBackground#f9990225
- editor.wordHighlightBackground#ffffff1a
- editor.wordHighlightBorder#00000000
- editor.wordHighlightStrongBackground#00000000
- editor.wordHighlightStrongBorder#00000000
- editorBracketMatch.background#ffffff1a
- editorBracketMatch.border#00000000
- editorCursor.foreground#ededed
- editorGroup.border#242424
- editorGroupHeader.tabsBackground#000000
- editorGroupHeader.tabsBorder#242424
- editorGutter.addedBackground#58c760
- editorGutter.deletedBackground#f05b8d
- editorGutter.modifiedBackground#f99902
- editorHoverWidget.background#000000
- editorHoverWidget.foreground#a1a1a1
- editorIndentGuide.activeBackground1#242424
- editorIndentGuide.background1#242424
- editorInlayHint.background#0a0a0a
- editorInlayHint.foreground#a1a1a1
- editorLineNumber.activeForeground#a1a1a1
- editorLineNumber.foreground#878787
- editorOverviewRuler.border#000000
- editorOverviewRuler.errorForeground#f05b8d
- editorRuler.foreground#242424
- editorWhitespace.foreground#878787
- editorWidget.background#000000
- editorWidget.border#333333
- errorForeground#f56464
- errorLens.errorBackground#f5646433
- errorLens.errorBackgroundLight#f5646433
- errorLens.errorForeground#f56464
- errorLens.errorForegroundLight#f56464
- errorLens.hintBackground#62a6ff33
- errorLens.hintBackgroundLight#62a6ff33
- errorLens.hintForeground#62a6ff
- errorLens.hintForegroundLight#62a6ff
- errorLens.infoBackground#62a6ff33
- errorLens.infoBackgroundLight#62a6ff33
- errorLens.infoForeground#62a6ff
- errorLens.infoForegroundLight#62a6ff
- errorLens.warningBackground#f9990233
- errorLens.warningBackgroundLight#f9990233
- errorLens.warningForeground#f9990233
- errorLens.warningForegroundLight#f99902
- focusBorder#00000000
- foreground#a1a1a1
- gitDecoration.addedResourceForeground#58c760
- gitDecoration.conflictingResourceForeground#f99902
- gitDecoration.deletedResourceForeground#f56464
- gitDecoration.ignoredResourceForeground#777777
- gitDecoration.modifiedResourceForeground#f99902
- gitDecoration.submoduleResourceForeground#ededed
- gitDecoration.untrackedResourceForeground#58c760
- icon.foreground#a1a1a1
- input.background#000000
- input.border#333333
- input.foreground#a1a1a1
- input.placeholderForeground#a1a1a1
- list.activeSelectionBackground#ffffff1a
- list.activeSelectionForeground#ededed
- list.errorForeground#f05b8d
- list.focusBackground#ffffff1a
- list.focusForeground#ededed
- list.highlightForeground#ededed
- list.hoverBackground#ffffff1a
- list.hoverForeground#ededed
- list.inactiveFocusBackground#ffffff1a
- list.inactiveSelectionBackground#ffffff1a
- list.inactiveSelectionForeground#a1a1a1
- list.warningForeground#f99902
- minimap.selectionHighlight#ffffff1a
- notificationCenterHeader.background#000000
- notificationCenterHeader.foreground#a1a1a1
- notifications.background#000000
- notifications.border#333333
- notifications.foreground#ededed
- notificationsErrorIcon.foreground#f05b8d
- notificationsInfoIcon.foreground#62a6ff
- notificationsWarningIcon.foreground#f99902
- panel.background#000000
- panel.border#242424
- panelInput.border#333333
- panelTitle.activeBorder#ededed
- panelTitle.activeForeground#ededed
- panelTitle.inactiveForeground#a1a1a1
- peekView.border#333333
- peekViewEditor.background#000000
- peekViewEditor.matchHighlightBackground#f9990233
- peekViewResult.background#000000
- peekViewResult.matchHighlightBackground#f9990233
- peekViewTitle.background#000000
- pickerGroup.border#333333
- pickerGroup.foreground#ededed
- progressBar.background#ededed
- quickInput.background#000000
- quickInput.foreground#a1a1a1
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#333333
- scrollbarSlider.background#333333
- scrollbarSlider.hoverBackground#333333
- selection.background#333333
- settings.headerForeground#ededed
- settings.modifiedItemIndicator#ededed
- sideBar.background#000000
- sideBar.border#242424
- sideBar.foreground#a1a1a1
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#242424
- sideBarSectionHeader.foreground#a1a1a1
- sideBarTitle.foreground#a1a1a1
- statusBar.background#000000
- statusBar.border#242424
- statusBar.debuggingBackground#ededed
- statusBar.debuggingForeground#000000
- statusBar.foreground#a1a1a1
- statusBar.noFolderBackground#000000
- statusBarItem.prominentBackground#000000
- tab.activeBackground#0a0a0a
- tab.activeBorder#0a0a0a
- tab.activeBorderTop#ededed
- tab.activeForeground#a1a1a1
- tab.border#242424
- tab.hoverBackground#000000
- tab.inactiveBackground#000000
- tab.inactiveForeground#a1a1a1
- tab.unfocusedActiveBorder#000000
- tab.unfocusedActiveBorderTop#000000
- tab.unfocusedHoverBackground#000000
- terminal.ansiBlack#000000
- terminal.ansiBlue#62a6ff
- terminal.ansiBrightBlack#676767
- terminal.ansiBrightBlue#62a6ff
- terminal.ansiBrightCyan#14cbb7
- terminal.ansiBrightGreen#58c760
- terminal.ansiBrightMagenta#b675f1
- terminal.ansiBrightRed#f56464
- terminal.ansiBrightWhite#ededed
- terminal.ansiBrightYellow#f99902
- terminal.ansiCyan#14cbb7
- terminal.ansiGreen#58c760
- terminal.ansiMagenta#b675f1
- terminal.ansiRed#f56464
- terminal.ansiWhite#a1a1a1
- terminal.ansiYellow#f99902
- terminal.foreground#ededed
- terminal.selectionBackground#333333
- textBlockQuote.background#000000
- textBlockQuote.border#ededed
- textCodeBlock.background#000000
- textLink.activeForeground#62a6ff
- textLink.foreground#62a6ff
- textPreformat.foreground#ededed
- textSeparator.foreground#a1a1a1
- titleBar.activeBackground#000000
- titleBar.activeForeground#a1a1a1
- titleBar.border#242424
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#a1a1a1
- tree.indentGuidesStroke#242424
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #a1a1a1 | — |
| entity.other.attribute-name | #b675f1 | — |
| constant, entity.name.constant, variable.other.constant, variable.language, entity | #62a6ff | — |
| entity.name, meta.export.default, meta.definition.variable | #62a6ff | — |
| variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression, meta.template.expression, string.other.begin.yaml, string.other.end.yaml | #ededed | — |
| entity.name.function, support.type.primitive | #b675f1 | — |
| support.class.component | #62a6ff | — |
| keyword | #f05b8d | — |
| keyword.operator, storage.type.function.arrow, punctuation.separator.key-value.css, entity.name.tag.yaml, punctuation.separator.key-value.mapping.yaml | #f05b8d | — |
| storage, storage.type | #f05b8d | — |
| storage.modifier.package, storage.modifier.import, storage.type.java | #ededed | — |
| string, punctuation.definition.string, string punctuation.section.embedded source, entity.name.tag | #58c760 | — |
| support | #f05b8d | — |
| support.type.object.module, variable.other.object, support.type.property-name.css | #62a6ff | — |
| meta.property-name | #62a6ff | — |
| variable | #ededed | — |
| variable.other | #ededed | — |
| invalid.broken | #f05b8d | — |
| invalid.deprecated | #f05b8d | — |
| invalid.illegal | #f05b8d | — |
| invalid.unimplemented | #f05b8d | — |
| carriage-return | #111111 | — |
| message.error | #f05b8d | — |
| string source | #ededed | — |
| string variable | #62a6ff | — |
| source.regexp, string.regexp | #62a6ff | — |
| string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition | #62a6ff | — |
| string.regexp constant.character.escape | #62a6ff | bold |
| support.constant | #62a6ff | — |
| support.variable | #62a6ff | — |
| meta.module-reference | #62a6ff | — |
| punctuation.definition.list.begin.markdown | #f99902 | — |
| markup.heading, markup.heading entity.name | #62a6ff | bold |
| markup.quote | #62a6ff | — |
| markup.italic | #ededed | italic |
| markup.bold | #ededed | bold |
| markup.raw | #62a6ff | — |
| markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted | #f05b8d | — |
| markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted | #62a6ff | — |
| markup.changed, punctuation.definition.changed | #f99902 | — |
| markup.ignored, markup.untracked | #777777 | — |
| meta.diff.range | #b675f1 | bold |
| meta.diff.header | #62a6ff | — |
| meta.separator | #62a6ff | bold |
| meta.output | #62a6ff | — |
| meta.export.default | #ededed | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #ededed | — |
| brackethighlighter.unmatched | #f05b8d | — |
| constant.other.reference.link, string.other.link | #62a6ff | underline |
| token.info-token | #6796E6 | — |
| token.warn-token | #f99902 | — |
| token.error-token | #f05b8d | — |
| token.debug-token | #b675f1 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...