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 #acb79e33 activityBar.activeBorder #73693b activityBar.activeFocusBorder #332718 activityBar.background #b7c6b2 activityBar.border #b7c6b2 activityBar.dropBorder #cea032 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #73693b — comment #959876 — constant #9e6a28 — entity #718656 — invalid
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Vincent van Gogh Painting Themes — Vase with Twelve Sunflowers (Van Gogh) Vincent van Gogh Painting Themes | Coding Theme
activityBar.foreground
#7f794f
activityBar.inactiveForeground #8a8863
activityBarBadge.background #332718
activityBarBadge.foreground #b7c6b2
badge.background #332718
badge.foreground #b7c6b2
breadcrumb.activeSelectionForeground #685a27
breadcrumb.background #b7c6b2
breadcrumb.focusForeground #73693b
breadcrumb.foreground #7f794f
breadcrumbPicker.background #b7c6b2
button.background #cea032
button.foreground #b7c6b2
button.hoverBackground #718656
button.secondaryBackground #73693b
button.secondaryForeground #b7c6b2
button.secondaryHoverBackground #7f794f
charts.blue #cea032
charts.foreground #73693b
charts.green #632b17
charts.lines #959876
charts.orange #67714b
charts.purple #332718
charts.red #d2ab53
charts.yellow #dac371
checkbox.background #cea032
checkbox.border #acb79e
checkbox.foreground #b7c6b2
debugConsole.errorForeground #d2ab53
debugConsole.infoForeground #cea032
debugConsole.sourceForeground #332718
debugConsole.warningForeground #67714b
debugConsoleInputIcon.foreground #8a8863
debugExceptionWidget.background #acb79e
debugExceptionWidget.border #acb79e
debugIcon.breakpointCurrentStackframeForeground #632b17
debugIcon.breakpointDisabledForeground #8a8863
debugIcon.breakpointForeground #d2ab53
debugIcon.breakpointStackframeForeground #dac371
debugIcon.breakpointUnverifiedForeground #7f794f
debugIcon.continueForeground #632b17
debugIcon.disconnectForeground #67714b
debugIcon.pauseForeground #cea032
debugIcon.restartForeground #9e6a28
debugIcon.startForeground #632b17
debugIcon.stepBackForeground #685a27
debugIcon.stepIntoForeground #685a27
debugIcon.stepOutForeground #685a27
debugIcon.stepOverForeground #685a27
debugIcon.stopForeground #d2ab53
debugTokenExpression.boolean #332718
debugTokenExpression.error #d2ab53
debugTokenExpression.name #cea032
debugTokenExpression.number #9e6a28
debugTokenExpression.string #632b17
debugTokenExpression.value #685a27
debugToolBar.background #acb79e
debugToolBar.border #a0a78a
debugView.exceptionLabelBackground #acb79e
debugView.exceptionLabelForeground #dac371
debugView.stateLabelBackground #acb79e
debugView.stateLabelForeground #cea032
debugView.valueChangedHighlight #dac37133
descriptionForeground #73693b
diffEditor.border #acb79e
diffEditor.diagonalFill #acb79e7f
diffEditor.insertedTextBackground #632b1720
diffEditor.removedTextBackground #d2ab5320
dropdown.background #acb79e
dropdown.border #acb79e
dropdown.foreground #73693b
dropdown.listBackground #acb79e
editor.background #b7c6b2
editor.findMatchBackground #dac3713f
editor.findMatchHighlightBackground #dac37133
editor.findRangeHighlightBackground #acb79e
editor.focusedStackFrameHighlightBackground #632b173f
editor.foldBackground #acb79e66
editor.foreground #685a27
editor.hoverHighlightBackground #a0a78a7f
editor.inactiveSelectionBackground #cea03233
editor.lineHighlightBackground #b7c6b2
editor.lineHighlightBorder #acb79e
editor.rangeHighlightBackground #dac37133
editor.selectionBackground #cea03233
editor.selectionForeground #685a27
editor.selectionHighlightBackground #acb79e
editor.snippetFinalTabstopHighlightBackground #a0a78a7f
editor.snippetTabstopHighlightBackground #acb79e7f
editor.stackFrameHighlightBackground #7186563f
editor.symbolHighlightBackground #33271833
editor.wordHighlightBackground #33271833
editor.wordHighlightStrongBackground #9e6a2833
editorBracketMatch.background #acb79e
editorBracketMatch.border #a0a78a
editorCodeLens.foreground #7f794f
editorCursor.background #b7c6b2
editorCursor.foreground #332718
editorError.border #685a27
editorError.foreground #d2ab53
editorGroup.border #acb79e
editorGroup.dropBackground #a0a78a7f
editorGroup.emptyBackground #b7c6b2
editorGroup.focusedEmptyBorder #acb79e
editorGroupHeader.border #b7c6b2
editorGroupHeader.noTabsBackground #b7c6b2
editorGroupHeader.tabsBackground #b7c6b2
editorGroupHeader.tabsBorder #b7c6b2
editorGutter.addedBackground #632b17
editorGutter.background #b7c6b2
editorGutter.commentRangeForeground #959876
editorGutter.deletedBackground #d2ab53
editorGutter.foldingControlForeground #7f794f
editorGutter.modifiedBackground #dac371
editorHint.border #8a8863
editorHint.foreground #9e6a28
editorHoverWidget.background #acb79e
editorHoverWidget.border #acb79e
editorHoverWidget.foreground #73693b
editorHoverWidget.statusBarBackground #cea03233
editorIndentGuide.activeBackground #a0a78a
editorIndentGuide.background #acb79e
editorInfo.border #7f794f
editorInfo.foreground #cea032
editorLightBulb.foreground #dac371
editorLightBulbAutoFix.foreground #cea032
editorLineNumber.activeForeground #8a8863
editorLineNumber.foreground #a0a78a
editorLink.activeForeground #718656
editorMarkerNavigation.background #acb79e
editorMarkerNavigationError.background #d2ab53
editorMarkerNavigationInfo.background #cea032
editorMarkerNavigationWarning.background #67714b
editorOverviewRuler.addedForeground #632b177f
editorOverviewRuler.border #acb79e
editorOverviewRuler.bracketMatchForeground #959876
editorOverviewRuler.commonContentForeground #332718
editorOverviewRuler.currentContentForeground #718656
editorOverviewRuler.deletedForeground #d2ab537f
editorOverviewRuler.errorForeground #d2ab537f
editorOverviewRuler.findMatchForeground #dac371bf
editorOverviewRuler.incomingContentForeground #cea032
editorOverviewRuler.infoForeground #cea0327f
editorOverviewRuler.modifiedForeground #dac3717f
editorOverviewRuler.rangeHighlightForeground #a0a78abf
editorOverviewRuler.selectionHighlightForeground #acb79ebf
editorOverviewRuler.warningForeground #67714b7f
editorOverviewRuler.wordHighlightForeground #a0a78abf
editorOverviewRuler.wordHighlightStrongForeground #959876bf
editorPane.background #b7c6b2
editorRuler.foreground #acb79e
editorSuggestWidget.background #acb79e
editorSuggestWidget.border #acb79e
editorSuggestWidget.foreground #73693b
editorSuggestWidget.highlightForeground #9e6a28
editorSuggestWidget.selectedBackground #a0a78a
editorUnnecessaryCode.opacity #0000007f
editorWarning.border #73693b
editorWarning.foreground #67714b
editorWhitespace.foreground #acb79e
editorWidget.background #acb79e
editorWidget.border #acb79e
editorWidget.foreground #73693b
editorWidget.resizeBorder #cea032
errorForeground #d2ab53
extensionBadge.remoteBackground #9e6a28
extensionBadge.remoteForeground #b7c6b2
extensionButton.prominentBackground #cea032
extensionButton.prominentForeground #b7c6b2
extensionButton.prominentHoverBackground #718656
focusBorder #332718
foreground #685a27
gitDecoration.addedResourceForeground #632b17
gitDecoration.conflictingResourceForeground #718656
gitDecoration.deletedResourceForeground #d2ab53
gitDecoration.ignoredResourceForeground #959876
gitDecoration.modifiedResourceForeground #dac371
gitDecoration.stageDeletedResourceForeground #d2ab53
gitDecoration.stageModifiedResourceForeground #718656
gitDecoration.submoduleResourceForeground #9e6a28
gitDecoration.untrackedResourceForeground #332718
icon.foreground #73693b
imagePreview.border #acb79e
input.background #acb79e
input.border #acb79e
input.foreground #73693b
input.placeholderForeground #a0a78a
inputOption.activeBackground #a0a78a
inputOption.activeBorder #718656
inputOption.activeForeground #685a27
inputValidation.errorBackground #acb79e
inputValidation.errorBorder #d2ab53
inputValidation.errorForeground #d2ab53
inputValidation.infoBackground #acb79e
inputValidation.infoBorder #cea032
inputValidation.infoForeground #cea032
inputValidation.warningBackground #acb79e
inputValidation.warningBorder #67714b
inputValidation.warningForeground #67714b
list.activeSelectionBackground #33271833
list.activeSelectionForeground #685a27
list.deemphasizedForeground #8a8863
list.dropBackground #acb79e
list.errorForeground #d2ab53
list.filterMatchBackground #dac37133
list.filterMatchBorder #dac37133
list.focusBackground #9598763f
list.focusForeground #685a27
list.highlightForeground #dac371
list.hoverBackground #acb79e33
list.hoverForeground #685a27
list.inactiveFocusBackground #acb79e3f
list.inactiveSelectionBackground #a0a78a3f
list.inactiveSelectionForeground #73693b
list.invalidItemForeground #d2ab53
list.warningForeground #dac371
listFilterWidget.background #acb79e
listFilterWidget.noMatchesOutline #d2ab53
listFilterWidget.outline #cea032
menu.background #b7c6b2
menu.foreground #73693b
menu.selectionBackground #acb79e
menu.selectionForeground #685a27
menu.separatorBackground #a0a78a
menubar.selectionBackground #acb79e
menubar.selectionForeground #685a27
merge.border #8a8863
merge.commonContentBackground #3327184c
merge.commonHeaderBackground #3327184c
merge.currentContentBackground #7186564c
merge.currentHeaderBackground #7186564c
merge.incomingContentBackground #cea0324c
merge.incomingHeaderBackground #cea0324c
minimap.background #b7c6b2
minimap.errorHighlight #d2ab5380
minimap.findMatchHighlight #dac371
minimap.selectionHighlight #cea03280
minimap.warningHighlight #67714b80
minimapGutter.addedBackground #632b1780
minimapGutter.deletedBackground #d2ab5380
minimapGutter.modifiedBackground #dac37180
minimapSlider.activeBackground #95987633
minimapSlider.background #acb79e33
minimapSlider.hoverBackground #a0a78a33
notebook.cellBorderColor #acb79e3f
notebook.cellHoverBackground #acb79e3f
notebook.cellInsertionIndicator #632b17
notebook.cellStatusBarItemHoverBackground #acb79e3f
notebook.cellToolbarSeparator #acb79e3f
notebook.focusedCellBackground #acb79e7f
notebook.focusedCellBorder #332718
notebook.focusedCellShadow #0000003f
notebook.focusedEditorBorder #acb79e
notebook.focusedRowBorder #332718
notebook.inactiveFocusedCellBorder #7f794f
notebook.outputContainerBackgroundColor #b7c6b2
notebook.rowHoverBackground #acb79e7f
notebook.selectedCellBorder #8a8863
notebook.symbolHighlightBackground #3327183f
notebookScrollbarSlider.activeBackground #7f794f7f
notebookScrollbarSlider.background #9598767f
notebookScrollbarSlider.hoverBackground #8a88637f
notebookStatusErrorIcon.foreground #d2ab53
notebookStatusRunningIcon.foreground #cea032
notebookStatusSuccessIcon.foreground #632b17
notificationCenterHeader.background #a0a78a
notificationCenterHeader.foreground #73693b
notificationLink.foreground #cea032
notifications.background #acb79e
notifications.border #959876
notifications.foreground #685a27
notificationsErrorIcon.foreground #d2ab53
notificationsInfoIcon.foreground #cea032
notificationsWarningIcon.foreground #67714b
notificationToast.border #959876
panel.background #b7c6b2
panel.border #acb79e
panel.dropBorder #cea032
panelSection.border #acb79e
panelSection.dropBackground #acb79e3f
panelSectionHeader.background #a0a78a
panelSectionHeader.border #b7c6b2
panelSectionHeader.foreground #73693b
panelTitle.activeBorder #959876
panelTitle.activeForeground #73693b
panelTitle.inactiveForeground #8a8863
peekView.border #9e6a28
peekViewEditor.background #acb79e7f
peekViewEditor.matchHighlightBackground #dac3717f
peekViewEditorGutter.background #acb79e7f
peekViewResult.background #acb79e
peekViewResult.fileForeground #73693b
peekViewResult.lineForeground #a0a78a
peekViewResult.matchHighlightBackground #dac371
peekViewResult.selectionBackground #959876
peekViewResult.selectionForeground #685a27
peekViewTitle.background #acb79e
peekViewTitleDescription.foreground #7f794f
peekViewTitleLabel.foreground #685a27
pickerGroup.border #a0a78a
pickerGroup.foreground #8a8863
problemsErrorIcon.foreground #d2ab53
problemsInfoIcon.foreground #cea032
problemsWarningIcon.foreground #67714b
progressBar.background #632b17
quickInput.background #acb79e
quickInput.foreground #685a27
quickInputTitle.background #a0a78a
sash.hoverBorder #cea032
scm.providerBorder #a0a78a
scrollbar.shadow #685a2766
scrollbarSlider.activeBackground #7f794f7f
scrollbarSlider.background #9598767f
scrollbarSlider.hoverBackground #8a88637f
selection.background #a0a78a
settings.checkboxBackground #cea032
settings.checkboxBorder #cea032
settings.checkboxForeground #b7c6b2
settings.dropdownBackground #acb79e
settings.dropdownForeground #73693b
settings.dropdownListBorder #a0a78a
settings.focusedRowBackground #b7c6b2
settings.headerForeground #685a27
settings.modifiedItemIndicator #718656
settings.numberInputBackground #acb79e
settings.numberInputForeground #73693b
settings.textInputBackground #acb79e
settings.textInputForeground #73693b
sideBar.background #b7c6b2
sideBar.border #acb79e
sideBar.dropBackground #acb79e3f
sideBar.foreground #73693b
sideBarSectionHeader.background #a0a78a
sideBarSectionHeader.border #b7c6b2
sideBarSectionHeader.foreground #73693b
sideBarTitle.foreground #7f794f
statusBar.background #cea032
statusBar.border #b7c6b2
statusBar.debuggingBackground #67714b
statusBar.debuggingBorder #b7c6b2
statusBar.debuggingForeground #b7c6b2
statusBar.foreground #b7c6b2
statusBar.noFolderBackground #332718
statusBar.noFolderBorder #b7c6b2
statusBar.noFolderForeground #b7c6b2
statusBarItem.activeBackground #718656
statusBarItem.errorBackground #d2ab53
statusBarItem.errorForeground #b7c6b2
statusBarItem.hoverBackground #632b17
statusBarItem.prominentBackground #718656
statusBarItem.prominentHoverBackground #632b17
statusBarItem.remoteBackground #718656
statusBarItem.remoteForeground #b7c6b2
symbolIcon.arrayForeground #9e6a28
symbolIcon.booleanForeground #332718
symbolIcon.classForeground #cea032
symbolIcon.colorForeground #718656
symbolIcon.constantForeground #632b17
symbolIcon.constructorForeground #332718
symbolIcon.enumeratorForeground #718656
symbolIcon.enumeratorMemberForeground #cea032
symbolIcon.eventForeground #67714b
symbolIcon.fieldForeground #d2ab53
symbolIcon.fileForeground #73693b
symbolIcon.folderForeground #7f794f
symbolIcon.functionForeground #332718
symbolIcon.interfaceForeground #d2ab53
symbolIcon.keyForeground #dac371
symbolIcon.keywordForeground #cea032
symbolIcon.methodForeground #718656
symbolIcon.moduleForeground #718656
symbolIcon.namespaceForeground #cea032
symbolIcon.nullForeground #d2ab53
symbolIcon.numberForeground #67714b
symbolIcon.objectForeground #685a27
symbolIcon.operatorForeground #d2ab53
symbolIcon.packageForeground #67714b
symbolIcon.propertyForeground #718656
symbolIcon.referenceForeground #67714b
symbolIcon.snippetForeground #7f794f
symbolIcon.stringForeground #632b17
symbolIcon.structForeground #cea032
symbolIcon.textForeground #685a27
symbolIcon.typeParameterForeground #cea032
symbolIcon.unitForeground #dac371
symbolIcon.variableForeground #67714b
tab.activeBackground #b7c6b2
tab.activeForeground #73693b
tab.activeModifiedBorder #dac371
tab.border #b7c6b2
tab.hoverBackground #acb79e80
tab.hoverForeground #7f794f
tab.inactiveBackground #acb79e
tab.inactiveForeground #959876
tab.inactiveModifiedBorder #dac371
tab.lastPinnedBorder #9e6a28
tab.unfocusedActiveBackground #b7c6b2
tab.unfocusedActiveForeground #959876
tab.unfocusedActiveModifiedBorder #dac371
tab.unfocusedHoverBackground #acb79e80
tab.unfocusedHoverForeground #8a8863
tab.unfocusedInactiveBackground #acb79e
tab.unfocusedInactiveForeground #a0a78a
tab.unfocusedInactiveModifiedBorder #dac371
terminal.ansiBlack #b7c6b2
terminal.ansiBlue #cea032
terminal.ansiBrightBlack #acb79e
terminal.ansiBrightBlue #cea032
terminal.ansiBrightCyan #718656
terminal.ansiBrightGreen #718656
terminal.ansiBrightMagenta #9e6a28
terminal.ansiBrightRed #67714b
terminal.ansiBrightWhite #685a27
terminal.ansiBrightYellow #dac371
terminal.ansiCyan #718656
terminal.ansiGreen #632b17
terminal.ansiMagenta #9e6a28
terminal.ansiRed #d2ab53
terminal.ansiWhite #73693b
terminal.ansiYellow #dac371
terminal.background #b7c6b2
terminal.foreground #73693b
terminal.selectionBackground #cea0327f
terminalCursor.background #acb79e
terminalCursor.foreground #7f794f
testing.iconErrored #d2ab53
testing.iconFailed #67714b
testing.iconPassed #632b17
testing.iconQueued #718656
testing.iconSkipped #8a8863
testing.iconUnset #7f794f
testing.message.error.decorationForeground #d2ab53
testing.message.error.lineBackground #d2ab533f
testing.message.hint.decorationForeground #9e6a28
testing.message.hint.lineBackground #9e6a283f
testing.message.info.decorationForeground #cea032
testing.message.info.lineBackground #cea0323f
testing.message.warning.decorationForeground #67714b
testing.message.warning.lineBackground #67714b3f
testing.peekBorder #959876
testing.runAction #cea032
textBlockQuote.background #acb79e
textBlockQuote.border #acb79e
textCodeBlock.background #b7c6b2
textLink.activeForeground #718656
textLink.foreground #cea032
textPreformat.foreground #67714b
textSeparator.foreground #8a8863
titleBar.activeBackground #b7c6b2
titleBar.activeForeground #7f794f
titleBar.inactiveBackground #b7c6b2
titleBar.inactiveForeground #959876
tree.indentGuidesStroke #acb79e
walkThrough.embeddedEditorBackground #b7c6b2
welcomePage.background #b7c6b2
welcomePage.buttonBackground #acb79e
welcomePage.buttonHoverBackground #a0a78a
welcomePage.progress.background #cea032
welcomePage.progress.foreground #b7c6b2
widget.shadow #685a2766
#d2ab53
markup.underline — underline
markup.underline.link #cea032 —
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 }!` ;
}