Vercel Docs Theme
Publisher: aurorascharffThemes in package: 2
Dark and light themes for VSCode/Cursor matching the Vercel docs syntax highlighting
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.background#000000
- activityBar.foreground#eeeeee
- activityBarBadge.background#0070f3
- badge.background#0070f3
- badge.foreground#ffffff
- button.background#0070f3
- button.foreground#ffffff
- button.hoverBackground#0761d1
- dropdown.background#000000
- dropdown.border#3a3a3a
- editor.background#000000
- editor.foreground#eeeeee
- editor.lineHighlightBackground#1a1a1a
- editor.selectionBackground#1f3e70
- editor.selectionHighlightBackground#1f3e7080
- editorBracketHighlight.foreground1#eeeeee
- editorBracketHighlight.foreground2#eeeeee
- editorBracketHighlight.foreground3#eeeeee
- editorBracketHighlight.foreground4#eeeeee
- editorBracketHighlight.foreground5#eeeeee
- editorBracketHighlight.foreground6#eeeeee
- editorBracketHighlight.unexpectedBracket.foreground#eeeeee
- editorBracketMatch.background#1f3e7080
- editorBracketMatch.border#1f3e70
- editorCursor.foreground#eeeeee
- editorGroupHeader.tabsBackground#000000
- editorGutter.background#000000
- editorGutter.modifiedBackground#cca649
- editorIndentGuide.activeBackground#505050
- editorIndentGuide.background#3a3a3a
- editorLineNumber.activeForeground#eeeeee
- editorLineNumber.foreground#a0a0a0
- editorWhitespace.foreground#3a3a3a
- gitDecoration.addedResourceForeground#00c45c
- gitDecoration.modifiedResourceForeground#cca649
- gitDecoration.stageDeletedResourceForeground#ff4d8d
- gitDecoration.stageModifiedResourceForeground#cca649
- gitDecoration.untrackedResourceForeground#00c45c
- input.background#1a1a1a
- input.border#3a3a3a
- input.foreground#eeeeee
- list.activeSelectionBackground#1f3e70
- list.activeSelectionForeground#eeeeee
- list.errorForeground#ff4d8d
- list.hoverBackground#2a2a2a
- list.inactiveSelectionBackground#2a2a2a
- list.warningForeground#ffcc47
- panel.background#000000
- panel.border#1a1a1a
- scrollbarSlider.activeBackground#666666
- scrollbarSlider.background#3a3a3a80
- scrollbarSlider.hoverBackground#505050
- sideBar.background#000000
- sideBar.border#1a1a1a
- sideBar.foreground#eeeeee
- sideBarSectionHeader.background#000000
- sideBarTitle.foreground#eeeeee
- statusBar.background#000000
- statusBar.debuggingBackground#000000
- statusBar.foreground#eeeeee
- statusBar.noFolderBackground#000000
- statusBarItem.remoteBackground#0070f3
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#000000
- tab.activeForeground#eeeeee
- tab.activeModifiedBorder#cca649
- tab.border#1a1a1a
- tab.inactiveBackground#000000
- tab.inactiveForeground#a0a0a0
- tab.inactiveModifiedBorder#cca649
- terminal.ansiBlack#000000
- terminal.ansiBlue#47A8FF
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#47A8FF
- terminal.ansiBrightCyan#47A8FF
- terminal.ansiBrightGreen#00c45c
- terminal.ansiBrightMagenta#C473FC
- terminal.ansiBrightRed#FF4D8D
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#FFCC47
- terminal.ansiCyan#0070f3
- terminal.ansiGreen#00c45c
- terminal.ansiMagenta#C473FC
- terminal.ansiRed#FF4D8D
- terminal.ansiWhite#eeeeee
- terminal.ansiYellow#FFCC47
- terminal.background#000000
- terminal.foreground#eeeeee
- terminal.selectionBackground#1f3e70
- terminalCursor.background#000000
- terminalCursor.foreground#eeeeee
- titleBar.activeBackground#000000
- titleBar.activeForeground#eeeeee
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#a0a0a0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #a0a0a0 | — |
| keyword, storage.modifier, storage.type, keyword.control | #ff4d8d | |
| keyword.operator | #ff4d8d | — |
| string, string.quoted, punctuation.definition.string.begin, punctuation.definition.string.end | #00c45c | — |
| constant.character, variable.language.this | #A6B5FF | — |
| constant.language | #ffffff | — |
| variable.other.constant | #47a8ff | — |
| variable.other.readwrite | #eeeeee | — |
| variable.other.object | #47a8ff | — |
| variable.other.readwrite.alias | #eeeeee | — |
| entity.name.function, support.function, meta.function-call | #47a8ff | |
| variable.parameter | #eeeeee | |
| entity.name.tag | #00c45c | — |
| support.class.component | #47a8ff | — |
| entity.other.attribute-name | #c473fc | |
| string.regexp, string.interpolated | #00c45c | — |
| punctuation, meta.brace, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag | #eeeeee | — |
| constant.numeric, constant.numeric.decimal | #ffffff | — |
| support.variable.property, variable.other.property | #eeeeee | — |
| support.type.primitive, support.type | #47a8ff | |
| entity.name.type, entity.name.class, entity.other.inherited-class | #C473FC | — |
| punctuation.separator.key-value | #FF4D8D | — |
| meta.object-literal.key.tsx | #eeeeee | — |
| meta.jsx.children.tsx | #eeeeee | — |
| punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.template | #00c45c | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #FF4D8D | — |
| markup.underline.link, string.other.link | #00c45c | — |
| markup.bold | #ff4d8d | bold |
| markup.italic | — | italic |
| markup.heading, entity.name.section | #c473fc | bold |
| markup.deleted | #ff8c85 | — |
| markup.inserted | #70d9a8 | — |
| invalid, invalid.illegal | #ff0000 | — |
| meta.tag.sgml.doctype, meta.tag.metadata | #a0a0a0 | — |
| support.type.property-name.json | #FF4D8D | — |
| entity.name.tag.yaml | #FF4D8D | — |
| string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.unquoted.block.yaml | #00c45c | — |
| constant.language.boolean.yaml, constant.language.null.yaml, constant.language.merge.yaml | #ffffff | — |
| constant.numeric.integer.yaml, constant.numeric.float.yaml | #ffffff | — |
| punctuation.definition.block.sequence.item.yaml | #eeeeee | — |
| entity.other.document.begin.yaml, entity.other.document.end.yaml | #a0a0a0 | — |
| variable.other.alias.yaml, punctuation.definition.alias.yaml | #C473FC | — |
| entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, keyword.control.property.anchor.yaml | #C473FC | — |
| keyword.control.flow.block-scalar.literal.yaml, keyword.control.flow.block-scalar.folded.yaml | #FF4D8D | — |
| storage.type.tag-handle.yaml, constant.other.tag.yaml | #47a8ff | — |
| punctuation.separator.key-value.mapping.yaml | #FF4D8D | — |
| comment.line.number-sign.yaml | #a0a0a0 | — |