Vellum Theme

Name: Vellum Theme
Author: seokmin

Publisher: seokminThemes in package: 11

Warm ivory parchment meets material high contrast dark. Two extremes, one identity.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Vellum Theme — Ivory Light — Dark Terminal

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E4DDD0
activityBar.border#D4CDB9
activityBar.foreground#3C3C3C
activityBar.inactiveForeground#9A896B
activityBarBadge.background#8B7355
activityBarBadge.foreground#FFFFFF
badge.background#8B7355
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#3C3C3C
breadcrumb.background#FDFAF3
breadcrumb.focusForeground#3C3C3C
breadcrumb.foreground#9A896B
breadcrumbPicker.background#EDE8DC
button.background#8B7355
button.foreground#FFFFFF
button.hoverBackground#7A6344
button.secondaryBackground#EDE8DC
button.secondaryForeground#3C3C3C
button.secondaryHoverBackground#D4CDB9
checkbox.background#FDFAF3
checkbox.border#C8A96E
checkbox.foreground#3C3C3C
debugConsole.errorForeground#C0392B
debugConsole.infoForeground#1A5276
debugConsole.sourceForeground#6B5C44
debugConsole.warningForeground#D4AC0D
debugToolBar.background#EDE8DC
descriptionForeground#6B5C44
diffEditor.diagonalFill#D4CDB9
diffEditor.insertedLineBackground#27AE6015
diffEditor.insertedTextBackground#27AE6020
diffEditor.removedLineBackground#C0392B15
diffEditor.removedTextBackground#C0392B20
disabledForeground#9A896B80
dropdown.background#FDFAF3
dropdown.border#C8B99080
dropdown.foreground#3C3C3C
editor.background#FDFAF3
editor.findMatchBackground#C8A96E60
editor.findMatchHighlightBackground#C8A96E30
editor.findRangeHighlightBackground#C8A96E20
editor.foreground#3C3C3C
editor.hoverHighlightBackground#C8A96E20
editor.inactiveSelectionBackground#D4CDB970
editor.lineHighlightBackground#EDE8DC60
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#C8A96E15
editor.selectionBackground#D4CDB9BB
editor.selectionHighlightBackground#D4CDB960
editor.snippetFinalTabstopHighlightBorder#8B7355
editor.snippetTabstopHighlightBackground#C8A96E20
editor.wordHighlightBackground#C8A96E30
editor.wordHighlightStrongBackground#C8A96E50
editorBracketMatch.background#C8A96E30
editorBracketMatch.border#C8A96E
editorCodeLens.foreground#9A896B
editorCursor.background#FDFAF3
editorCursor.foreground#7C3F00
editorError.foreground#C0392B
editorGroup.border#D4CDB9
editorGroupHeader.noTabsBackground#EDE8DC
editorGroupHeader.tabsBackground#EDE8DC
editorGutter.addedBackground#27AE60
editorGutter.background#FDFAF3
editorGutter.deletedBackground#C0392B
editorGutter.modifiedBackground#2980B9
editorHoverWidget.background#F7F3E8
editorHoverWidget.border#C8B990
editorHoverWidget.foreground#3C3C3C
editorIndentGuide.activeBackground1#8B735580
editorIndentGuide.background1#D4CDB9
editorInfo.foreground#1A5276
editorLightBulb.foreground#D4AC0D
editorLineNumber.activeForeground#8B7355
editorLineNumber.foreground#C8B990
editorLink.activeForeground#1A5276
editorOverviewRuler.addedForeground#27AE60
editorOverviewRuler.border#D4CDB9
editorOverviewRuler.deletedForeground#C0392B
editorOverviewRuler.errorForeground#C0392B
editorOverviewRuler.findMatchForeground#C8A96E
editorOverviewRuler.infoForeground#1A5276
editorOverviewRuler.modifiedForeground#2980B9
editorOverviewRuler.rangeHighlightForeground#C8A96E
editorOverviewRuler.selectionHighlightForeground#D4CDB9
editorOverviewRuler.warningForeground#D4AC0D
editorOverviewRuler.wordHighlightForeground#C8A96E
editorOverviewRuler.wordHighlightStrongForeground#C8A96E
editorRuler.foreground#D4CDB9
editorSuggestWidget.background#F7F3E8
editorSuggestWidget.border#C8B990
editorSuggestWidget.foreground#3C3C3C
editorSuggestWidget.highlightForeground#7C3F00
editorSuggestWidget.selectedBackground#D4CDB9
editorWarning.foreground#D4AC0D
editorWhitespace.foreground#C8B99060
editorWidget.background#EDE8DC
editorWidget.border#C8B990
editorWidget.foreground#3C3C3C
errorForeground#C0392B
extensionBadge.remoteBackground#8B7355
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#8B7355
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#7A6344
focusBorder#8B735580
foreground#3C3C3C
gitDecoration.addedResourceForeground#27AE60
gitDecoration.conflictingResourceForeground#E67E22
gitDecoration.deletedResourceForeground#C0392B
gitDecoration.ignoredResourceForeground#9A896B
gitDecoration.modifiedResourceForeground#2980B9
gitDecoration.renamedResourceForeground#8E44AD
gitDecoration.submoduleResourceForeground#2980B9
gitDecoration.untrackedResourceForeground#27AE60
icon.foreground#8B7355
input.background#FDFAF3
input.border#C8B99080
input.foreground#3C3C3C
input.placeholderForeground#9A896B
inputOption.activeBackground#C8A96E40
inputOption.activeBorder#C8A96E
inputOption.activeForeground#3C3C3C
inputValidation.errorBackground#FCEAEA
inputValidation.errorBorder#C0392B
inputValidation.warningBackground#FEF9EA
inputValidation.warningBorder#D4AC0D
list.activeSelectionBackground#D4CDB9
list.activeSelectionForeground#1A1A1A
list.dropBackground#C8A96E40
list.filterMatchBackground#C8A96E40
list.filterMatchBorder#C8A96E
list.focusBackground#D4CDB980
list.highlightForeground#7C3F00
list.hoverBackground#EDE8DC80
list.inactiveSelectionBackground#E5E0D4
menu.background#F7F3E8
menu.foreground#3C3C3C
menu.selectionBackground#D4CDB9
menu.selectionForeground#1A1A1A
menu.separatorBackground#D4CDB9
menubar.selectionBackground#D4CDB940
menubar.selectionForeground#3C3C3C
merge.currentContentBackground#27AE6020
merge.currentHeaderBackground#27AE6040
merge.incomingContentBackground#2980B920
merge.incomingHeaderBackground#2980B940
minimap.background#F7F3E8
minimap.errorHighlight#C0392B80
minimap.findMatchHighlight#C8A96E80
minimap.selectionHighlight#D4CDB9BB
notificationCenterHeader.background#DDD8CC
notificationCenterHeader.foreground#3C3C3C
notificationLink.foreground#1A5276
notifications.background#F7F3E8
notifications.border#C8B990
notifications.foreground#3C3C3C
notificationsErrorIcon.foreground#C0392B
notificationsInfoIcon.foreground#1A5276
notificationsWarningIcon.foreground#D4AC0D
panel.background#EDE8DC
panel.border#D4CDB9
panelTitle.activeBorder#8B7355
panelTitle.activeForeground#3C3C3C
panelTitle.inactiveForeground#6B5C44
peekView.border#8B7355
peekViewEditor.background#F7F3E8
peekViewEditor.matchHighlightBackground#C8A96E30
peekViewEditorGutter.background#F0EDE5
peekViewResult.background#EDE8DC
peekViewResult.fileForeground#3C3C3C
peekViewResult.lineForeground#6B5C44
peekViewResult.matchHighlightBackground#C8A96E50
peekViewResult.selectionBackground#D4CDB9
peekViewTitle.background#DDD8CC
peekViewTitleDescription.foreground#6B5C44
peekViewTitleLabel.foreground#3C3C3C
pickerGroup.border#D4CDB9
pickerGroup.foreground#8B7355
progressBar.background#8B7355
scrollbar.shadow#00000015
scrollbarSlider.activeBackground#8B7355AA
scrollbarSlider.background#C8B99050
scrollbarSlider.hoverBackground#C8B99080
selection.background#D4CDB9
sideBar.background#EDE8DC
sideBar.border#D4CDB9
sideBar.foreground#3C3C3C
sideBarSectionHeader.background#DDD8CC
sideBarSectionHeader.border#C8B990
sideBarSectionHeader.foreground#3C3C3C
sideBarTitle.foreground#6B5C44
statusBar.background#8B7355
statusBar.border#7A634400
statusBar.debuggingBackground#C0392B
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#6B5C44
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#7A634480
statusBarItem.hoverBackground#9A835F
statusBarItem.prominentBackground#7C3F00
statusBarItem.prominentHoverBackground#6B3500
statusBarItem.remoteBackground#7C3F00
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#7C3F00
symbolIcon.booleanForeground#7C3F00
symbolIcon.classForeground#6B3FA0
symbolIcon.colorForeground#C8A96E
symbolIcon.constructorForeground#1A5276
symbolIcon.enumeratorForeground#148F77
symbolIcon.enumeratorMemberForeground#148F77
symbolIcon.eventForeground#D4AC0D
symbolIcon.fieldForeground#3C3C3C
symbolIcon.fileForeground#6B5C44
symbolIcon.folderForeground#C8A96E
symbolIcon.functionForeground#1A5276
symbolIcon.interfaceForeground#2D6A4F
symbolIcon.keyForeground#C8A96E
symbolIcon.keywordForeground#7C3F00
symbolIcon.methodForeground#1A5276
symbolIcon.moduleForeground#3C3C3C
symbolIcon.namespaceForeground#3C3C3C
symbolIcon.nullForeground#9A896B
symbolIcon.numberForeground#A0522D
symbolIcon.objectForeground#3C3C3C
symbolIcon.operatorForeground#7C3F00
symbolIcon.packageForeground#6B5C44
symbolIcon.propertyForeground#3C3C3C
symbolIcon.referenceForeground#3C3C3C
symbolIcon.snippetForeground#6B5C44
symbolIcon.stringForeground#2D6A4F
symbolIcon.structForeground#6B3FA0
symbolIcon.textForeground#3C3C3C
symbolIcon.typeParameterForeground#6B3FA0
symbolIcon.unitForeground#3C3C3C
symbolIcon.variableForeground#3C3C3C
tab.activeBackground#FDFAF3
tab.activeBorder#8B7355
tab.activeBorderTop#8B7355
tab.activeForeground#3C3C3C
tab.border#D4CDB9
tab.hoverBackground#EDE8DC
tab.inactiveBackground#E5E0D4
tab.inactiveForeground#6B5C44
tab.unfocusedActiveBackground#F0EDE5
tab.unfocusedActiveForeground#5C4E36
terminal.ansiBlack#1A1712
terminal.ansiBlue#2E86C1
terminal.ansiBrightBlack#8B7355
terminal.ansiBrightBlue#74C0FC
terminal.ansiBrightCyan#3BC9DB
terminal.ansiBrightGreen#51CF66
terminal.ansiBrightMagenta#DA77F2
terminal.ansiBrightRed#FF6B6B
terminal.ansiBrightWhite#FDFAF3
terminal.ansiBrightYellow#FFD43B
terminal.ansiCyan#1ABC9C
terminal.ansiGreen#2ECC71
terminal.ansiMagenta#8E44AD
terminal.ansiRed#E74C3C
terminal.ansiWhite#EDE8DC
terminal.ansiYellow#F1C40F
terminal.background#2C2418
terminal.foreground#EDE8DC
terminal.selectionBackground#C8A96E80
terminalCursor.foreground#C8A96E
textBlockQuote.background#EDE8DC
textBlockQuote.border#C8A96E
textCodeBlock.background#EDE8DC
textLink.activeForeground#2E86C1
textLink.foreground#1A5276
textPreformat.foreground#7C3F00
titleBar.activeBackground#DDD8CC
titleBar.activeForeground#3C3C3C
titleBar.border#D4CDB9
titleBar.inactiveBackground#E4DDD0
titleBar.inactiveForeground#6B5C4480
toolbar.activeBackground#D4CDB980
toolbar.hoverBackground#D4CDB940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9A8668	italic
keyword, keyword.control, keyword.other, keyword.operator.new, storage.type, storage.modifier	#7C3F00	bold
keyword.operator, punctuation.separator	#8B6914	—
string, string.quoted, string.template, string.interpolated	#2D6A4F	—
constant.character.escape, string.regexp	#148F77	—
constant.numeric	#A0522D	—
constant.language, constant.character, constant.other	#8B0000	bold
entity.name.function, meta.function-call entity.name.function, support.function	#1A5276	—
entity.name.class, entity.name.type, support.type, support.class	#6B3FA0	—
entity.name.type.parameter	#6B3FA0	italic
entity.name.type.interface	#2D6A4F	italic
variable, variable.other	#3C3C3C	—
variable.parameter	#5C4E36	italic
variable.other.property, support.variable.property, entity.other.attribute-name	#3C3C3C	—
meta.object-literal.key	#5C3A1A	—
entity.name.namespace, entity.name.module, storage.modifier.module	#3C3C3C	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#C8A96E	italic
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.string, meta.brace	#6B5C44	—
entity.name.tag, punctuation.definition.tag	#7C3F00	—
entity.other.attribute-name.html	#2D6A4F	italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#1A5276	—
support.type.property-name.css	#6B3FA0	—
support.constant.property-value.css, meta.property-value.css	#2D6A4F	—
markup.heading, punctuation.definition.heading.markdown	#7C3F00	bold
markup.bold	#3C3C3C	bold
markup.italic	#3C3C3C	italic
markup.inline.raw, markup.fenced_code.block	#7C3F00	—
markup.underline.link	#1A5276	—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#7C3F00	bold
invalid, invalid.illegal	#C0392B	underline