Skip to main content
Home Theme VS Code Vincent van Gogh Painting Themes Vincent Willem van Gogh Painting Themes.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #73728e33 activityBar.activeBorder #c8be72 activityBar.activeFocusBorder #c57a2e activityBar.background #626394 activityBar.border #626394 activityBar.dropBorder #989aa1 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #c8be72 — comment #959083 — constant #353658 — entity #b4c6a7 — invalid
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Vincent van Gogh Painting Themes — Starry Night (Van Gogh)
activityBar.foreground
#b7af77
activityBar.inactiveForeground #a6a07d
activityBarBadge.background #c57a2e
activityBarBadge.foreground #626394
badge.background #c57a2e
badge.foreground #626394
breadcrumb.activeSelectionForeground #d9cd6c
breadcrumb.background #626394
breadcrumb.focusForeground #c8be72
breadcrumb.foreground #b7af77
breadcrumbPicker.background #626394
button.background #989aa1
button.foreground #626394
button.hoverBackground #b4c6a7
button.secondaryBackground #c8be72
button.secondaryForeground #626394
button.secondaryHoverBackground #b7af77
charts.blue #989aa1
charts.foreground #c8be72
charts.green #e9c53c
charts.lines #959083
charts.orange #bac23a
charts.purple #c57a2e
charts.red #575761
charts.yellow #b8cacd
checkbox.background #989aa1
checkbox.border #73728e
checkbox.foreground #626394
debugConsole.errorForeground #575761
debugConsole.infoForeground #989aa1
debugConsole.sourceForeground #c57a2e
debugConsole.warningForeground #bac23a
debugConsoleInputIcon.foreground #a6a07d
debugExceptionWidget.background #73728e
debugExceptionWidget.border #73728e
debugIcon.breakpointCurrentStackframeForeground #e9c53c
debugIcon.breakpointDisabledForeground #a6a07d
debugIcon.breakpointForeground #575761
debugIcon.breakpointStackframeForeground #b8cacd
debugIcon.breakpointUnverifiedForeground #b7af77
debugIcon.continueForeground #e9c53c
debugIcon.disconnectForeground #bac23a
debugIcon.pauseForeground #989aa1
debugIcon.restartForeground #353658
debugIcon.startForeground #e9c53c
debugIcon.stepBackForeground #d9cd6c
debugIcon.stepIntoForeground #d9cd6c
debugIcon.stepOutForeground #d9cd6c
debugIcon.stepOverForeground #d9cd6c
debugIcon.stopForeground #575761
debugTokenExpression.boolean #c57a2e
debugTokenExpression.error #575761
debugTokenExpression.name #989aa1
debugTokenExpression.number #353658
debugTokenExpression.string #e9c53c
debugTokenExpression.value #d9cd6c
debugToolBar.background #73728e
debugToolBar.border #848189
debugView.exceptionLabelBackground #73728e
debugView.exceptionLabelForeground #b8cacd
debugView.stateLabelBackground #73728e
debugView.stateLabelForeground #989aa1
debugView.valueChangedHighlight #b8cacd33
descriptionForeground #c8be72
diffEditor.border #73728e
diffEditor.diagonalFill #73728e7f
diffEditor.insertedTextBackground #e9c53c20
diffEditor.removedTextBackground #57576120
dropdown.background #73728e
dropdown.border #73728e
dropdown.foreground #c8be72
dropdown.listBackground #73728e
editor.background #626394
editor.findMatchBackground #b8cacd3f
editor.findMatchHighlightBackground #b8cacd33
editor.findRangeHighlightBackground #73728e
editor.focusedStackFrameHighlightBackground #e9c53c3f
editor.foldBackground #73728e66
editor.foreground #d9cd6c
editor.hoverHighlightBackground #8481897f
editor.inactiveSelectionBackground #989aa133
editor.lineHighlightBackground #626394
editor.lineHighlightBorder #73728e
editor.rangeHighlightBackground #b8cacd33
editor.selectionBackground #989aa133
editor.selectionForeground #d9cd6c
editor.selectionHighlightBackground #73728e
editor.snippetFinalTabstopHighlightBackground #8481897f
editor.snippetTabstopHighlightBackground #73728e7f
editor.stackFrameHighlightBackground #b4c6a73f
editor.symbolHighlightBackground #c57a2e33
editor.wordHighlightBackground #c57a2e33
editor.wordHighlightStrongBackground #35365833
editorBracketMatch.background #73728e
editorBracketMatch.border #848189
editorCodeLens.foreground #b7af77
editorCursor.background #626394
editorCursor.foreground #c57a2e
editorError.border #d9cd6c
editorError.foreground #575761
editorGroup.border #73728e
editorGroup.dropBackground #8481897f
editorGroup.emptyBackground #626394
editorGroup.focusedEmptyBorder #73728e
editorGroupHeader.border #626394
editorGroupHeader.noTabsBackground #626394
editorGroupHeader.tabsBackground #626394
editorGroupHeader.tabsBorder #626394
editorGutter.addedBackground #e9c53c
editorGutter.background #626394
editorGutter.commentRangeForeground #959083
editorGutter.deletedBackground #575761
editorGutter.foldingControlForeground #b7af77
editorGutter.modifiedBackground #b8cacd
editorHint.border #a6a07d
editorHint.foreground #353658
editorHoverWidget.background #73728e
editorHoverWidget.border #73728e
editorHoverWidget.foreground #c8be72
editorHoverWidget.statusBarBackground #989aa133
editorIndentGuide.activeBackground #848189
editorIndentGuide.background #73728e
editorInfo.border #b7af77
editorInfo.foreground #989aa1
editorLightBulb.foreground #b8cacd
editorLightBulbAutoFix.foreground #989aa1
editorLineNumber.activeForeground #a6a07d
editorLineNumber.foreground #848189
editorLink.activeForeground #b4c6a7
editorMarkerNavigation.background #73728e
editorMarkerNavigationError.background #575761
editorMarkerNavigationInfo.background #989aa1
editorMarkerNavigationWarning.background #bac23a
editorOverviewRuler.addedForeground #e9c53c7f
editorOverviewRuler.border #73728e
editorOverviewRuler.bracketMatchForeground #959083
editorOverviewRuler.commonContentForeground #c57a2e
editorOverviewRuler.currentContentForeground #b4c6a7
editorOverviewRuler.deletedForeground #5757617f
editorOverviewRuler.errorForeground #5757617f
editorOverviewRuler.findMatchForeground #b8cacdbf
editorOverviewRuler.incomingContentForeground #989aa1
editorOverviewRuler.infoForeground #989aa17f
editorOverviewRuler.modifiedForeground #b8cacd7f
editorOverviewRuler.rangeHighlightForeground #848189bf
editorOverviewRuler.selectionHighlightForeground #73728ebf
editorOverviewRuler.warningForeground #bac23a7f
editorOverviewRuler.wordHighlightForeground #848189bf
editorOverviewRuler.wordHighlightStrongForeground #959083bf
editorPane.background #626394
editorRuler.foreground #73728e
editorSuggestWidget.background #73728e
editorSuggestWidget.border #73728e
editorSuggestWidget.foreground #c8be72
editorSuggestWidget.highlightForeground #353658
editorSuggestWidget.selectedBackground #848189
editorUnnecessaryCode.opacity #0000007f
editorWarning.border #c8be72
editorWarning.foreground #bac23a
editorWhitespace.foreground #73728e
editorWidget.background #73728e
editorWidget.border #73728e
editorWidget.foreground #c8be72
editorWidget.resizeBorder #989aa1
errorForeground #575761
extensionBadge.remoteBackground #353658
extensionBadge.remoteForeground #626394
extensionButton.prominentBackground #989aa1
extensionButton.prominentForeground #626394
extensionButton.prominentHoverBackground #b4c6a7
focusBorder #c57a2e
foreground #d9cd6c
gitDecoration.addedResourceForeground #e9c53c
gitDecoration.conflictingResourceForeground #b4c6a7
gitDecoration.deletedResourceForeground #575761
gitDecoration.ignoredResourceForeground #959083
gitDecoration.modifiedResourceForeground #b8cacd
gitDecoration.stageDeletedResourceForeground #575761
gitDecoration.stageModifiedResourceForeground #b4c6a7
gitDecoration.submoduleResourceForeground #353658
gitDecoration.untrackedResourceForeground #c57a2e
icon.foreground #c8be72
imagePreview.border #73728e
input.background #73728e
input.border #73728e
input.foreground #c8be72
input.placeholderForeground #848189
inputOption.activeBackground #848189
inputOption.activeBorder #b4c6a7
inputOption.activeForeground #d9cd6c
inputValidation.errorBackground #73728e
inputValidation.errorBorder #575761
inputValidation.errorForeground #575761
inputValidation.infoBackground #73728e
inputValidation.infoBorder #989aa1
inputValidation.infoForeground #989aa1
inputValidation.warningBackground #73728e
inputValidation.warningBorder #bac23a
inputValidation.warningForeground #bac23a
list.activeSelectionBackground #c57a2e33
list.activeSelectionForeground #d9cd6c
list.deemphasizedForeground #a6a07d
list.dropBackground #73728e
list.errorForeground #575761
list.filterMatchBackground #b8cacd33
list.filterMatchBorder #b8cacd33
list.focusBackground #9590833f
list.focusForeground #d9cd6c
list.highlightForeground #b8cacd
list.hoverBackground #73728e33
list.hoverForeground #d9cd6c
list.inactiveFocusBackground #73728e3f
list.inactiveSelectionBackground #8481893f
list.inactiveSelectionForeground #c8be72
list.invalidItemForeground #575761
list.warningForeground #b8cacd
listFilterWidget.background #73728e
listFilterWidget.noMatchesOutline #575761
listFilterWidget.outline #989aa1
menu.background #626394
menu.foreground #c8be72
menu.selectionBackground #73728e
menu.selectionForeground #d9cd6c
menu.separatorBackground #848189
menubar.selectionBackground #73728e
menubar.selectionForeground #d9cd6c
merge.border #a6a07d
merge.commonContentBackground #c57a2e4c
merge.commonHeaderBackground #c57a2e4c
merge.currentContentBackground #b4c6a74c
merge.currentHeaderBackground #b4c6a74c
merge.incomingContentBackground #989aa14c
merge.incomingHeaderBackground #989aa14c
minimap.background #626394
minimap.errorHighlight #57576180
minimap.findMatchHighlight #b8cacd
minimap.selectionHighlight #989aa180
minimap.warningHighlight #bac23a80
minimapGutter.addedBackground #e9c53c80
minimapGutter.deletedBackground #57576180
minimapGutter.modifiedBackground #b8cacd80
minimapSlider.activeBackground #95908333
minimapSlider.background #73728e33
minimapSlider.hoverBackground #84818933
notebook.cellBorderColor #73728e3f
notebook.cellHoverBackground #73728e3f
notebook.cellInsertionIndicator #e9c53c
notebook.cellStatusBarItemHoverBackground #73728e3f
notebook.cellToolbarSeparator #73728e3f
notebook.focusedCellBackground #73728e7f
notebook.focusedCellBorder #c57a2e
notebook.focusedCellShadow #0000003f
notebook.focusedEditorBorder #73728e
notebook.focusedRowBorder #c57a2e
notebook.inactiveFocusedCellBorder #b7af77
notebook.outputContainerBackgroundColor #626394
notebook.rowHoverBackground #73728e7f
notebook.selectedCellBorder #a6a07d
notebook.symbolHighlightBackground #c57a2e3f
notebookScrollbarSlider.activeBackground #b7af777f
notebookScrollbarSlider.background #9590837f
notebookScrollbarSlider.hoverBackground #a6a07d7f
notebookStatusErrorIcon.foreground #575761
notebookStatusRunningIcon.foreground #989aa1
notebookStatusSuccessIcon.foreground #e9c53c
notificationCenterHeader.background #848189
notificationCenterHeader.foreground #c8be72
notificationLink.foreground #989aa1
notifications.background #73728e
notifications.border #959083
notifications.foreground #d9cd6c
notificationsErrorIcon.foreground #575761
notificationsInfoIcon.foreground #989aa1
notificationsWarningIcon.foreground #bac23a
notificationToast.border #959083
panel.background #626394
panel.border #73728e
panel.dropBorder #989aa1
panelSection.border #73728e
panelSection.dropBackground #73728e3f
panelSectionHeader.background #848189
panelSectionHeader.border #626394
panelSectionHeader.foreground #c8be72
panelTitle.activeBorder #959083
panelTitle.activeForeground #c8be72
panelTitle.inactiveForeground #a6a07d
peekView.border #353658
peekViewEditor.background #73728e7f
peekViewEditor.matchHighlightBackground #b8cacd7f
peekViewEditorGutter.background #73728e7f
peekViewResult.background #73728e
peekViewResult.fileForeground #c8be72
peekViewResult.lineForeground #848189
peekViewResult.matchHighlightBackground #b8cacd
peekViewResult.selectionBackground #959083
peekViewResult.selectionForeground #d9cd6c
peekViewTitle.background #73728e
peekViewTitleDescription.foreground #b7af77
peekViewTitleLabel.foreground #d9cd6c
pickerGroup.border #848189
pickerGroup.foreground #a6a07d
problemsErrorIcon.foreground #575761
problemsInfoIcon.foreground #989aa1
problemsWarningIcon.foreground #bac23a
progressBar.background #e9c53c
quickInput.background #73728e
quickInput.foreground #d9cd6c
quickInputTitle.background #848189
sash.hoverBorder #989aa1
scm.providerBorder #848189
scrollbar.shadow #d9cd6c66
scrollbarSlider.activeBackground #b7af777f
scrollbarSlider.background #9590837f
scrollbarSlider.hoverBackground #a6a07d7f
selection.background #848189
settings.checkboxBackground #989aa1
settings.checkboxBorder #989aa1
settings.checkboxForeground #626394
settings.dropdownBackground #73728e
settings.dropdownForeground #c8be72
settings.dropdownListBorder #848189
settings.focusedRowBackground #626394
settings.headerForeground #d9cd6c
settings.modifiedItemIndicator #b4c6a7
settings.numberInputBackground #73728e
settings.numberInputForeground #c8be72
settings.textInputBackground #73728e
settings.textInputForeground #c8be72
sideBar.background #626394
sideBar.border #73728e
sideBar.dropBackground #73728e3f
sideBar.foreground #c8be72
sideBarSectionHeader.background #848189
sideBarSectionHeader.border #626394
sideBarSectionHeader.foreground #c8be72
sideBarTitle.foreground #b7af77
statusBar.background #989aa1
statusBar.border #626394
statusBar.debuggingBackground #bac23a
statusBar.debuggingBorder #626394
statusBar.debuggingForeground #626394
statusBar.foreground #626394
statusBar.noFolderBackground #c57a2e
statusBar.noFolderBorder #626394
statusBar.noFolderForeground #626394
statusBarItem.activeBackground #b4c6a7
statusBarItem.errorBackground #575761
statusBarItem.errorForeground #626394
statusBarItem.hoverBackground #e9c53c
statusBarItem.prominentBackground #b4c6a7
statusBarItem.prominentHoverBackground #e9c53c
statusBarItem.remoteBackground #b4c6a7
statusBarItem.remoteForeground #626394
symbolIcon.arrayForeground #353658
symbolIcon.booleanForeground #c57a2e
symbolIcon.classForeground #989aa1
symbolIcon.colorForeground #b4c6a7
symbolIcon.constantForeground #e9c53c
symbolIcon.constructorForeground #c57a2e
symbolIcon.enumeratorForeground #b4c6a7
symbolIcon.enumeratorMemberForeground #989aa1
symbolIcon.eventForeground #bac23a
symbolIcon.fieldForeground #575761
symbolIcon.fileForeground #c8be72
symbolIcon.folderForeground #b7af77
symbolIcon.functionForeground #c57a2e
symbolIcon.interfaceForeground #575761
symbolIcon.keyForeground #b8cacd
symbolIcon.keywordForeground #989aa1
symbolIcon.methodForeground #b4c6a7
symbolIcon.moduleForeground #b4c6a7
symbolIcon.namespaceForeground #989aa1
symbolIcon.nullForeground #575761
symbolIcon.numberForeground #bac23a
symbolIcon.objectForeground #d9cd6c
symbolIcon.operatorForeground #575761
symbolIcon.packageForeground #bac23a
symbolIcon.propertyForeground #b4c6a7
symbolIcon.referenceForeground #bac23a
symbolIcon.snippetForeground #b7af77
symbolIcon.stringForeground #e9c53c
symbolIcon.structForeground #989aa1
symbolIcon.textForeground #d9cd6c
symbolIcon.typeParameterForeground #989aa1
symbolIcon.unitForeground #b8cacd
symbolIcon.variableForeground #bac23a
tab.activeBackground #626394
tab.activeForeground #c8be72
tab.activeModifiedBorder #b8cacd
tab.border #626394
tab.hoverBackground #73728e80
tab.hoverForeground #b7af77
tab.inactiveBackground #73728e
tab.inactiveForeground #959083
tab.inactiveModifiedBorder #b8cacd
tab.lastPinnedBorder #353658
tab.unfocusedActiveBackground #626394
tab.unfocusedActiveForeground #959083
tab.unfocusedActiveModifiedBorder #b8cacd
tab.unfocusedHoverBackground #73728e80
tab.unfocusedHoverForeground #a6a07d
tab.unfocusedInactiveBackground #73728e
tab.unfocusedInactiveForeground #848189
tab.unfocusedInactiveModifiedBorder #b8cacd
terminal.ansiBlack #626394
terminal.ansiBlue #989aa1
terminal.ansiBrightBlack #73728e
terminal.ansiBrightBlue #989aa1
terminal.ansiBrightCyan #b4c6a7
terminal.ansiBrightGreen #b4c6a7
terminal.ansiBrightMagenta #353658
terminal.ansiBrightRed #bac23a
terminal.ansiBrightWhite #d9cd6c
terminal.ansiBrightYellow #b8cacd
terminal.ansiCyan #b4c6a7
terminal.ansiGreen #e9c53c
terminal.ansiMagenta #353658
terminal.ansiRed #575761
terminal.ansiWhite #c8be72
terminal.ansiYellow #b8cacd
terminal.background #626394
terminal.foreground #c8be72
terminal.selectionBackground #989aa17f
terminalCursor.background #73728e
terminalCursor.foreground #b7af77
testing.iconErrored #575761
testing.iconFailed #bac23a
testing.iconPassed #e9c53c
testing.iconQueued #b4c6a7
testing.iconSkipped #a6a07d
testing.iconUnset #b7af77
testing.message.error.decorationForeground #575761
testing.message.error.lineBackground #5757613f
testing.message.hint.decorationForeground #353658
testing.message.hint.lineBackground #3536583f
testing.message.info.decorationForeground #989aa1
testing.message.info.lineBackground #989aa13f
testing.message.warning.decorationForeground #bac23a
testing.message.warning.lineBackground #bac23a3f
testing.peekBorder #959083
testing.runAction #989aa1
textBlockQuote.background #73728e
textBlockQuote.border #73728e
textCodeBlock.background #626394
textLink.activeForeground #b4c6a7
textLink.foreground #989aa1
textPreformat.foreground #bac23a
textSeparator.foreground #a6a07d
titleBar.activeBackground #626394
titleBar.activeForeground #b7af77
titleBar.inactiveBackground #626394
titleBar.inactiveForeground #959083
tree.indentGuidesStroke #73728e
walkThrough.embeddedEditorBackground #626394
welcomePage.background #626394
welcomePage.buttonBackground #73728e
welcomePage.buttonHoverBackground #848189
welcomePage.progress.background #989aa1
welcomePage.progress.foreground #626394
widget.shadow #d9cd6c66
#575761
markup.underline — underline
markup.underline.link #989aa1 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status }` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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*
Button.tsx
fetchUser
31
~/my-project
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status }` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}
Vincent van Gogh Painting Themes | Coding Theme