Skip to main content
Home Theme VS Code Grand Budapest A colorful theme inspired by the film Grand Budapest Hotel by Wes Anderson
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.background #1F2838 activityBar.border #2D3A52 activityBar.dropBackground #2D3A52 activityBar.foreground #fff activityBarBadge.background #E6A2C5 activityBarBadge.foreground #000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #9CD9BF italic constant #dac291 — entity #E6A2C5 — invalid #f44542 — storage.type.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Grand Budapest — Grand Budapest Dark
badge.background
#E6A2C5
badge.foreground #000
button.background #527A86
button.foreground #fff
button.hoverBackground #D8A49B
contrastBorder #ffffff00
debugExceptionWidget.background #2D3A52
debugExceptionWidget.border #dad0d0
debugToolBar.background #2D3A52
descriptionForeground #dad0d0
diffEditor.insertedTextBackground #00A69A22
diffEditor.insertedTextBorder #00A69A44
diffEditor.removedTextBackground #B81B1222
diffEditor.removedTextBorder #B81B1244
dropdown.background #2D3A52
dropdown.border #1F2838
dropdown.foreground #fff
editor.background #2D3A52
editor.findMatchBackground #FF720066
editor.findMatchHighlightBackground #408fa766
editor.findRangeHighlightBackground #243E51
editor.foreground #fff
editor.hoverHighlightBackground #E6A2C533
editor.inactiveSelectionBackground #1F283880
editor.lineHighlightBackground #3C4475
editor.lineHighlightBorder #424a80
editor.rangeHighlightBackground #3C4475
editor.selectionBackground #74628A
editor.selectionHighlightBackground #74628A80
editor.wordHighlightBackground #ffffff21
editor.wordHighlightStrongBackground #ffffff21
editorBracketMatch.background #2D3A52
editorBracketMatch.border #E6A2C580
editorCodeLens.foreground #dad0d0
editorCursor.foreground #E6A2C5
editorError.border #2D3A52
editorError.foreground #A22929
editorGroup.background #A22929
editorGroup.border #7496D2
editorGroup.dropBackground #7496D299
editorGroupHeader.noTabsBackground #2D3A52
editorGroupHeader.tabsBackground #2D3A52
editorGroupHeader.tabsBorder #1F2838
editorGutter.addedBackground #3C9F4A
editorGutter.background #2D3A5266
editorGutter.deletedBackground #A22929
editorGutter.modifiedBackground #26506D
editorHoverWidget.background #1F2838
editorHoverWidget.border #2D3A52
editorIndentGuide.background #57709E
editorLineNumber.foreground #aaa
editorLink.activeForeground #dad0d0
editorMarkerNavigation.background #57709E33
editorMarkerNavigationError.background #A22929
editorMarkerNavigationWarning.background #E6A2C5
editorOverviewRuler.border #2D3A52
editorOverviewRuler.commonContentForeground #E6A2C555
editorOverviewRuler.currentContentForeground #ee3a4355
editorOverviewRuler.incomingContentForeground #7496D255
editorRuler.foreground #3C4475
editorSuggestWidget.background #1F2838
editorSuggestWidget.border #1F2838
editorSuggestWidget.foreground #dad0d0
editorSuggestWidget.highlightForeground #E6A2C5
editorSuggestWidget.selectedBackground #2D3A52
editorWarning.border #ffffff00
editorWarning.foreground #E6A2C5
editorWhitespace.foreground #ffffff1a
editorWidget.background #1F2838
editorWidget.border #2D3A52
errorForeground #A22929
extensionButton.prominentBackground #527A86
extensionButton.prominentForeground #fff
extensionButton.prominentHoverBackground #D8A49B
focusBorder #2D3A52
foreground #dad0d0
gitDecoration.conflictingResourceForeground #FF7200
gitDecoration.deletedResourceForeground #ff628c
gitDecoration.ignoredResourceForeground #808080
gitDecoration.modifiedResourceForeground #E6A2C5
gitDecoration.untrackedResourceForeground #7496D2
input.background #2D3A52
input.border #2D3A52
input.foreground #E6A2C5
input.placeholderForeground #dad0d0
inputOption.activeBorder #457A96
inputValidation.errorBackground #2D3A52
inputValidation.errorBorder #E6A2C5
inputValidation.infoBackground #2D3A52
inputValidation.infoBorder #2D3A52
inputValidation.warningBackground #2D3A52
inputValidation.warningBorder #E6A2C5
list.activeSelectionBackground #2D3A52
list.activeSelectionForeground #ece3e3
list.dropBackground #2D3A52
list.focusBackground #2D3A52
list.focusForeground #dad0d0
list.highlightForeground #E6A2C5
list.hoverBackground #2D3A52
list.hoverForeground #ece3e3
list.inactiveSelectionBackground #2D3A52
list.inactiveSelectionForeground #aaa
menu.background #546e9b
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #185294
merge.incomingHeaderBackground #185294
notification.background #E6A2C5
notification.buttonBackground #527A86
notification.buttonForeground #fff
notification.buttonHoverBackground #D8A49B
notification.errorBackground #A22929
notification.errorForeground #fff
notification.foreground #000
notification.infoBackground #527A86
notification.infoForeground #fff
notification.warningBackground #D8A49B
notification.warningForeground #000
notificationCenter.border #E6A2C5
notificationCenterHeader.background #2D3A52
notificationCenterHeader.foreground #dad0d0
notificationLink.foreground #E6A2C5
notifications.background #2D3A52
notifications.border #E6A2C5
notifications.foreground #dad0d0
notificationToast.border #E6A2C5
panel.background #2D3A52
panel.border #E6A2C5
panelTitle.activeBorder #E6A2C5
panelTitle.activeForeground #E6A2C5
panelTitle.inactiveForeground #dad0d0
peekView.border #E6A2C5
peekViewEditor.background #2D3A52
peekViewEditor.matchHighlightBackground #2D3A5200
peekViewEditorGutter.background #34435E
peekViewResult.background #1F2838
peekViewResult.fileForeground #dad0d0
peekViewResult.lineForeground #fff
peekViewResult.matchHighlightBackground #2D3A52
peekViewResult.selectionBackground #2D3A52
peekViewResult.selectionForeground #fff
peekViewTitle.background #1F2838
peekViewTitleDescription.foreground #dad0d0
peekViewTitleLabel.foreground #E6A2C5
pickerGroup.border #2D3A52
pickerGroup.foreground #dad0d0
progressBar.background #E6A2C5
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #D8A49Bcc
scrollbarSlider.background #57709E80
scrollbarSlider.hoverBackground #57709Ecc
selection.background #2D3A52
sideBar.background #1F2838
sideBar.border #2D3A52
sideBar.foreground #dad0d0
sideBarSectionHeader.background #2D3A52
sideBarSectionHeader.foreground #dad0d0
sideBarTitle.foreground #dad0d0
statusBar.background #1F2838
statusBar.border #2D3A52
statusBar.debuggingBackground #1F2838
statusBar.debuggingBorder #E6A2C5
statusBar.debuggingForeground #E6A2C5
statusBar.foreground #dad0d0
statusBar.noFolderBackground #1F2838
statusBar.noFolderBorder #2D3A52
statusBar.noFolderForeground #dad0d0
statusBarItem.activeBackground #527A86
statusBarItem.hoverBackground #2D3A52
statusBarItem.prominentBackground #1F2838
statusBarItem.prominentHoverBackground #2D3A52
tab.activeBackground #34435E
tab.activeBorder #E6A2C5
tab.activeForeground #fff
tab.border #1F2838
tab.inactiveBackground #1F2838
tab.inactiveForeground #dad0d0
tab.unfocusedActiveForeground #dad0d0
tab.unfocusedInactiveForeground #dad0d0
terminal.ansiBlack #000000
terminal.ansiBlue #527A86
terminal.ansiBrightBlack #1F2838
terminal.ansiBrightBlue #527A86
terminal.ansiBrightCyan #80fcff
terminal.ansiBrightGreen #7496D2
terminal.ansiBrightMagenta #fb94ff
terminal.ansiBrightRed #ff628c
terminal.ansiBrightWhite #2D3A52
terminal.ansiBrightYellow #E6A2C5
terminal.ansiCyan #80fcff
terminal.ansiGreen #7496D2
terminal.ansiMagenta #fb94ff
terminal.ansiRed #ff628c
terminal.ansiWhite #ffffff
terminal.ansiYellow #E6A2C5
terminal.background #34435E
terminal.foreground #f1e6e4
terminalCursor.background #E6A2C5
terminalCursor.foreground #E6A2C5
textBlockQuote.background #2D3A52
textBlockQuote.border #527A86
textCodeBlock.background #2D3A52
textLink.activeForeground #527A86
textLink.foreground #527A86
textPreformat.foreground #E6A2C5
textSeparator.foreground #2D3A52
titleBar.activeBackground #1F2838
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #2D3A52
titleBar.inactiveForeground #ffffff33
walkThrough.embeddedEditorBackground #2D3A52
welcomePage.buttonBackground #2D3A52
welcomePage.buttonHoverBackground #2D3A52
widget.shadow #00000026 #D8A49B
keyword, storage.type.class #D8A49B —
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #fff —
entity.name.tag.js #C7CEF6 —
support.class.component.js #fb94ff —
punctuation.definition.parameters #DAC391 —
punctuation.definition.template-expression #DAC391 —
storage.type.function.arrow #E6A2C5 —
storage.type.js, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx #D8A49B —
string, punctuation.definition.string #7396D1 —
string.template, punctuation.definition.string.template #7496D2 —
support.variable.property.dom #e1efff —
source.css entity, source.stylus entity #D8A49B —
support.type.property-name.css #C7CEF6 —
support.constant.property-value.css #6f98DE —
keyword.other.unit.rem.css, constant.numeric.css #6f98DE —
keyword.other.important #DAC391 —
entity.other.attribute-name.id.css #FFB454 —
support.function.misc.scss #D8A49B —
source.css support, source.stylus support #7396D1 —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #DAC391 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #DAC391 —
source.css variable, source.stylus variable #C7CEF6 —
text.html.basic entity.name #C7CEF6 —
meta.toc-list.id.html #7396D1 —
text.html.basic entity.other #E6A2C5 italic
meta.tag.metadata.script.html entity.name.tag.html #E6A2C5 —
punctuation.definition.string.begin, punctuation.definition.string.end #7A9DDE —
source.ini entity #e1efff —
source.ini keyword #E6A2C5 —
source.ini punctuation.definition #DAC391 —
source.ini punctuation.separator #D8A49B —
source.js storage.type.function #fb94ff —
variable.language, entity.name.type.class.js #fb94ff —
entity.other.inherited-class.js #ccc —
variable.parameter.function.language.special.self.python #fb94ff —
source.json support #E6A2C5 —
source.json string, source.json punctuation.definition.string #e1efff —
punctuation.definition.heading.markdown #e1efff —
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #E6A2C5 bold
meta.paragraph.markdown #e1efff —
beginning.punctuation.definition.quote.markdown #E6A2C5 —
markup.quote.markdown meta.paragraph.markdown #C7CEF6 italic
meta.separator.markdown #E6A2C5 —
markup.bold.markdown #C7CEF6 bold
markup.italic.markdown #C7CEF6 italic
beginning.punctuation.definition.list.markdown #E6A2C5 —
string.other.link.title.markdown #7396D1 —
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown #7396D1 —
markup.underline.link.markdown, markup.underline.link.image.markdown #C7CEF6 —
fenced_code.block.language, markup.inline.raw.markdown #C7CEF6 —
fenced_code.block.language, markup.inline.raw.markdown #C7CEF6 —
text.jade entity.name #C7CEF6 —
text.jade entity.other.attribute-name.tag — italic
text.jade string.interpolated #DAC391 —
source.ts entity.name.type #6f98DE —
source.ts keyword #E6A2C5 —
source.ts punctuation.definition.parameters #e1efff —
meta.arrow.ts punctuation.definition.parameters #DAC391 —
source.ts storage #C7CEF6 —
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx #fb94ff —
entity.other.inherited-class.ts, entity.other.inherited-class.tsx #ccc —
source.php entity #C7CEF6 —
variable.other.php #E6A2C5 —
entity.name.variable.property.cs #C7CEF6 —
storage.modifier.cs #6f98DE —
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html — italic
storage.modifier.cs, keyword.type.cs #fb94ff —
entity.name.type.namespace.cs, entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.property.cs #e1efff —
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
fetchUser 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...
~/my-project
main*
Grand Budapest | Coding Theme Button.tsx
31
$
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 } !` ;
}