Skip to main content
Home Theme VS Code Vincent van Gogh Painting Themes Vincent Willem van Gogh Painting Themes.
Vincent van Gogh Painting Themes | Coding Theme
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 }!` ;
}