Skip to main content
Home Theme VS Code Warm Burnout The theme for developers who are already burned out but still have deadlines. Mostly warm palette, one cool type accent, WCAG-audited contrast.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #ffffff0d activityBar.activeBorder #b8522e activityBar.background #14120f activityBar.border #ffffff08 activityBar.foreground #ada69ccc activityBar.inactiveForeground #ada69c60 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #bfbdb6 — comment #b4a89c italic string, constant.other.symbol #b4bc78 — string.regexp, constant.character, constant.other #96b898 — constant.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
Warm Burnout — Warm Burnout Dark main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.background #b8522e
activityBarBadge.foreground #ffffff
activityBarTop.activeBorder #b8522e
activityBarTop.foreground #8a8178
badge.background #b8522e
badge.foreground #ffffff
button.background #b8522e
button.border #ffffff1a
button.foreground #ffffff
button.hoverBackground #a04828
button.secondaryBackground #ffffff0d
button.secondaryForeground #bfbdb6
button.secondaryHoverBackground #ffffff1a
button.separator #ffffff4d
chat.checkpointSeparator #b4a89c
chat.editedFileForeground #73b8ff
chat.requestBackground #14120f
chat.requestBorder #ffffff0d
chat.requestBubbleBackground #ffffff08
chat.requestBubbleHoverBackground #ffffff0d
chat.slashCommandBackground #39bae633
chat.slashCommandForeground #39bae6
commandCenter.activeBackground #ffffff0d
commandCenter.activeBorder #ffffff00
commandCenter.activeForeground #ada69c
commandCenter.background #1a1510
commandCenter.border #ffffff0d
commandCenter.foreground #ada69c
commandCenter.inactiveBorder #ffffff08
debugConsoleInputIcon.foreground #b8522e
debugExceptionWidget.background #1f1d17
debugExceptionWidget.border #ffffff0d
debugIcon.breakpointDisabledForeground #f2966880
debugIcon.breakpointForeground #f29668
debugToolBar.background #1f1d17
descriptionForeground #ada69c
diffEditor.diagonalFill #ffffff08
diffEditor.insertedTextBackground #70bf5630
diffEditor.removedTextBackground #f26d7830
disabledForeground #ada69c50
dropdown.background #1f1d17
dropdown.border #ffffff0d
dropdown.foreground #ada69c
editor.background #1a1510
editor.findMatchBackground #4c4126
editor.findMatchHighlightBackground #4c412680
editor.foreground #bfbdb6
editor.inactiveSelectionBackground #8aa8b826
editor.lineHighlightBackground #222018
editor.rangeHighlightBackground #4c412633
editor.selectionBackground #8aa8b840
editor.selectionHighlightBackground #70bf5626
editor.selectionHighlightBorder #70bf5600
editor.snippetTabstopHighlightBackground #70bf5633
editor.wordHighlightBackground #73b8ff14
editor.wordHighlightBorder #73b8ff80
editor.wordHighlightStrongBackground #70bf5614
editor.wordHighlightStrongBorder #70bf5680
editorBracketHighlight.foreground1 #e6c08a
editorBracketHighlight.foreground2 #90aec0
editorBracketHighlight.foreground3 #d4a8b8
editorBracketHighlight.foreground4 #b4bc78
editorBracketHighlight.foreground5 #f29668
editorBracketHighlight.foreground6 #96b898
editorBracketHighlight.unexpectedBracket.foreground #f49090
editorBracketMatch.background #a59f964d
editorBracketMatch.border #a59f964d
editorBracketPairGuide.activeBackground1 #e6c08a80
editorBracketPairGuide.activeBackground2 #90aec080
editorBracketPairGuide.activeBackground3 #d4a8b880
editorBracketPairGuide.activeBackground4 #b4bc7880
editorBracketPairGuide.activeBackground5 #f2966880
editorBracketPairGuide.activeBackground6 #96b89880
editorCodeLens.foreground #b4a89c
editorCursor.foreground #f5c56e
editorError.foreground #f49090
editorGroup.background #1f1d17
editorGroup.border #ffffff0d
editorGroupHeader.noTabsBackground #14120f
editorGroupHeader.tabsBackground #14120f
editorGroupHeader.tabsBorder #ffffff08
editorGutter.addedBackground #70bf56
editorGutter.deletedBackground #f26d78
editorGutter.modifiedBackground #73b8ff
editorHoverWidget.background #1f1d17
editorHoverWidget.border #ffffff0d
editorIndentGuide.activeBackground #a59f96a1
editorIndentGuide.background #a59f9642
editorInlayHint.foreground #bfbdb680
editorLineNumber.activeForeground #a59f96
editorLineNumber.foreground #a59f96a6
editorLink.activeForeground #b8522e
editorMarkerNavigation.background #1f1d17
editorOverviewRuler.addedForeground #70bf56
editorOverviewRuler.border #ffffff08
editorOverviewRuler.bracketMatchForeground #a59f96b3
editorOverviewRuler.deletedForeground #f26d78
editorOverviewRuler.errorForeground #f49090
editorOverviewRuler.findMatchForeground #4c4126
editorOverviewRuler.modifiedForeground #73b8ff
editorOverviewRuler.warningForeground #b8522e
editorOverviewRuler.wordHighlightForeground #73b8ff66
editorOverviewRuler.wordHighlightStrongForeground #70bf5666
editorRuler.foreground #a59f9642
editorStickyScroll.border #ffffff08
editorStickyScroll.shadow #00000040
editorStickyScrollHover.background #ffffff08
editorSuggestWidget.background #1f1d17
editorSuggestWidget.border #ffffff0d
editorSuggestWidget.highlightForeground #b8522e
editorSuggestWidget.selectedBackground #ffffff0d
editorWarning.foreground #b8522e
editorWhitespace.foreground #a59f96a6
editorWidget.background #1f1d17
editorWidget.border #ffffff0d
editorWidget.resizeBorder #1f1d17
errorForeground #f49090
extensionButton.prominentBackground #b8522e
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #a04828
focusBorder #b8522e
foreground #ada69c
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground #f26d78
gitDecoration.ignoredResourceForeground #ada69c60
gitDecoration.modifiedResourceForeground #73b8ff
gitDecoration.submoduleResourceForeground #d2a6ff
gitDecoration.untrackedResourceForeground #70bf56
icon.foreground #ada69c
inlineChat.background #1f1d17
inlineChat.border #ffffff0d
inlineChat.foreground #bfbdb6
inlineChat.shadow #00000066
inlineChatDiff.inserted #70bf5633
inlineChatDiff.removed #f26d7833
inlineChatInput.background #14120f
inlineChatInput.border #ffffff0d
inlineChatInput.focusBorder #b8522eb3
inlineChatInput.placeholderForeground #ada69c50
inlineEdit.gutterIndicator.background #ffffff08
inlineEdit.gutterIndicator.primaryBackground #8aa8b826
inlineEdit.gutterIndicator.primaryBorder #b8522e
inlineEdit.gutterIndicator.primaryForeground #b8522e
inlineEdit.gutterIndicator.secondaryBackground #ada69c1a
inlineEdit.gutterIndicator.secondaryBorder #ada69c60
inlineEdit.gutterIndicator.secondaryForeground #ada69c
inlineEdit.gutterIndicator.successfulBackground #70bf561a
inlineEdit.gutterIndicator.successfulBorder #70bf56
inlineEdit.gutterIndicator.successfulForeground #70bf56
inlineEdit.modifiedBackground #70bf561a
inlineEdit.modifiedBorder #70bf5680
inlineEdit.modifiedChangedLineBackground #70bf5626
inlineEdit.modifiedChangedTextBackground #70bf5640
inlineEdit.originalBackground #f26d781a
inlineEdit.originalBorder #f26d7880
inlineEdit.originalChangedLineBackground #f26d7826
inlineEdit.originalChangedTextBackground #f26d7840
input.background #14120f
input.border #ffffff10
input.foreground #bfbdb6
input.placeholderForeground #ada69c50
inputOption.activeBackground #8aa8b826
inputOption.activeBorder #b8522e33
inputOption.activeForeground #b8522e
inputOption.hoverBackground #ffffff0d
inputValidation.errorBackground #14120f
inputValidation.errorBorder #f49090
inputValidation.infoBackground #14120f
inputValidation.infoBorder #39bae6
inputValidation.warningBackground #14120f
inputValidation.warningBorder #ffb454
keybindingLabel.background #ffffff0d
keybindingLabel.border #ffffff14
keybindingLabel.bottomBorder #ffffff14
keybindingLabel.foreground #bfbdb6
list.activeSelectionBackground #ffffff0d
list.activeSelectionForeground #bfbdb6
list.deemphasizedForeground #f49090
list.errorForeground #f49090
list.filterMatchBackground #43392180
list.filterMatchBorder #4c412680
list.focusBackground #ffffff0d
list.focusForeground #bfbdb6
list.focusOutline #ffffff0d
list.highlightForeground #b8522e
list.hoverBackground #ffffff08
list.inactiveSelectionBackground #ffffff08
list.inactiveSelectionForeground #ada69c
list.invalidItemForeground #ada69c4d
listFilterWidget.background #1f1d17
listFilterWidget.noMatchesOutline #f49090
listFilterWidget.outline #b8522e
menu.background #1b1913
menu.border #ffffff0d
menu.foreground #ada69c
menu.selectionBackground #ffffff0d
menu.selectionBorder #ffffff00
menu.separatorBackground #ffffff0d
minimap.background #1a1510
minimap.errorHighlight #f49090
minimap.findMatchHighlight #4c4126
minimap.selectionHighlight #8aa8b840
minimapGutter.addedBackground #70bf56
minimapGutter.deletedBackground #f26d78
minimapGutter.modifiedBackground #73b8ff
multiDiffEditor.background #14120f
multiDiffEditor.border #ffffff0d
multiDiffEditor.headerBackground #1f1d17
panel.background #14120f
panel.border #ffffff0d
panelStickyScroll.border #ffffff08
panelStickyScroll.shadow #00000040
panelTitle.activeBorder #b8522e
panelTitle.activeForeground #bfbdb6
panelTitle.inactiveForeground #ada69c
peekView.border #ffffff14
peekViewEditor.background #1f1d17
peekViewEditor.matchHighlightBackground #4c412680
peekViewEditor.matchHighlightBorder #43392180
peekViewResult.background #1f1d17
peekViewResult.fileForeground #bfbdb6
peekViewResult.lineForeground #ada69c
peekViewResult.matchHighlightBackground #4c412680
peekViewResult.selectionBackground #ffffff0d
peekViewTitle.background #ffffff0d
peekViewTitleDescription.foreground #ada69c
peekViewTitleLabel.foreground #bfbdb6
pickerGroup.border #ffffff0d
pickerGroup.foreground #ada69c60
profileBadge.background #b8522e
profileBadge.foreground #ffffff
progressBar.background #b8522e
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #ada69c90
scrollbarSlider.background #ada69c30
scrollbarSlider.hoverBackground #ada69c60
selection.background #8aa8b840
settings.headerForeground #bfbdb6
settings.modifiedItemIndicator #73b8ff
sideBar.background #14120f
sideBar.border #ffffff08
sideBarSectionHeader.background #14120f
sideBarSectionHeader.border #ffffff08
sideBarSectionHeader.foreground #ada69c
sideBarStickyScroll.border #ffffff08
sideBarStickyScroll.shadow #00000040
sideBarTitle.foreground #ada69c
statusBar.background #14120f
statusBar.border #ffffff08
statusBar.debuggingBackground #f29668
statusBar.debuggingForeground #1a1510
statusBar.foreground #ada69c
statusBar.noFolderBackground #1f1d17
statusBarItem.activeBackground #ffffff14
statusBarItem.hoverBackground #ffffff0d
statusBarItem.prominentBackground #ffffff0d
statusBarItem.prominentHoverBackground #ffffff14
statusBarItem.remoteBackground #b8522e
statusBarItem.remoteForeground #ffffff
symbolIcon.arrayForeground #90aec0
symbolIcon.booleanForeground #d4a8b8
symbolIcon.classForeground #90aec0
symbolIcon.colorForeground #e6c08a
symbolIcon.constantForeground #d4a8b8
symbolIcon.constructorForeground #ffb454
symbolIcon.enumeratorForeground #90aec0
symbolIcon.enumeratorMemberForeground #d4a8b8
symbolIcon.eventForeground #e6c08a
symbolIcon.fieldForeground #ec9878
symbolIcon.fileForeground #ada69c
symbolIcon.folderForeground #ada69c
symbolIcon.functionForeground #ffb454
symbolIcon.interfaceForeground #90aec0
symbolIcon.keyForeground #dc9e92
symbolIcon.keywordForeground #ff8f40
symbolIcon.methodForeground #ffb454
symbolIcon.moduleForeground #b4bc78
symbolIcon.namespaceForeground #b4bc78
symbolIcon.nullForeground #d4a8b8
symbolIcon.numberForeground #d4a8b8
symbolIcon.objectForeground #90aec0
symbolIcon.operatorForeground #f29668
symbolIcon.packageForeground #b4bc78
symbolIcon.propertyForeground #ec9878
symbolIcon.referenceForeground #90aec0
symbolIcon.snippetForeground #e6c08a
symbolIcon.stringForeground #b4bc78
symbolIcon.structForeground #90aec0
symbolIcon.textForeground #bfbdb6
symbolIcon.typeParameterForeground #90aec0
symbolIcon.unitForeground #d4a8b8
symbolIcon.variableForeground #bfbdb6
tab.activeBackground #1a1510
tab.activeBorder #1a1510
tab.activeBorderTop #b8522e
tab.activeForeground #bfbdb6
tab.border #ffffff00
tab.inactiveBackground #14120f
tab.inactiveForeground #ada69c
tab.unfocusedActiveBorderTop #ada69c60
tab.unfocusedActiveForeground #ada69c
tab.unfocusedInactiveForeground #ada69c
terminal.ansiBlack #23211b
terminal.ansiBlue #4fbfff
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #59c2ff
terminal.ansiBrightCyan #95e6cb
terminal.ansiBrightGreen #aad94c
terminal.ansiBrightMagenta #d2a6ff
terminal.ansiBrightRed #f07178
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffb454
terminal.ansiCyan #93e2c8
terminal.ansiGreen #70bf56
terminal.ansiMagenta #d0a1ff
terminal.ansiRed #f06b73
terminal.ansiWhite #c7c7c7
terminal.ansiYellow #fdb04c
terminal.background #141211
terminal.foreground #bfbdb6
terminalCommandGuide.foreground #ada69c4d
terminalStickyScroll.border #ffffff08
terminalStickyScroll.shadow #00000040
terminalStickyScrollHover.background #ffffff08
textBlockQuote.background #1f1d17
textLink.activeForeground #b8522e
textLink.foreground #b8522e
textPreformat.foreground #bfbdb6
titleBar.activeBackground #14120f
titleBar.activeForeground #ada69c
titleBar.border #ffffff08
titleBar.inactiveBackground #14120f
titleBar.inactiveForeground #ada69cb3
toolbar.hoverBackground #ffffff0d
tree.indentGuidesStroke #ada69c30
walkThrough.embeddedEditorBackground #1f1d17
welcomePage.buttonBackground #b8522e40
welcomePage.progress.background #1d1b15
welcomePage.tileBackground #14120f
welcomePage.tileShadow #00000066
widget.border #ffffff0d
widget.shadow #00000066 #d4a8b8
constant.language #d4a8b8 —
variable, variable.parameter.function-call #bfbdb6 —
variable.language #dc9e92 italic
punctuation.separator, punctuation.terminator #bfbdb6d9 —
punctuation.section #bfbdb6 —
punctuation.accessor #f29668 —
punctuation.definition.template-expression #ff8f40 —
punctuation.section.embedded #ff8f40 —
source.java storage.type, source.haskell storage.type, source.c storage.type #90aec0 —
entity.other.inherited-class #90aec0 —
storage.type.function #ff8f40 —
source.java storage.type.primitive #90aec0 —
entity.name.function #ffb454 —
variable.parameter, meta.parameter #d4a8b8 —
variable.function, variable.annotation, meta.function-call.generic, support.function.go #ffb454 —
support.function, support.macro #ec9878 —
entity.name.import, entity.name.package #b4bc78 —
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, entity.name.union, entity.name.trait #90aec0 italic
entity.name.tag, meta.tag.sgml #dc9e92 bold
support.class.component #90aec0 —
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag #dc9e92 —
entity.other.attribute-name #ffb454 —
entity.other.attribute-name.pseudo-class #96b898 —
support.constant #f29668 italic
support.type, support.class, source.go storage.type #90aec0 —
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator #e6c08a italic
meta.diff, meta.diff.header #c0a0a0 —
source.ruby variable.other.readwrite #ffb454 —
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag #deb074 —
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type #b4a89c —
support.type.property-name #deb074 italic
constant.numeric.line-number.find-in-files - match #b4a89c —
constant.numeric.line-number.match #ff8f40 —
entity.name.filename.find-in-files #b4bc78 —
markup.heading, markup.heading entity.name #b4bc78 bold
markup.underline.link, string.other.link #dc9e92 —
markup.italic, emphasis #ec9878 italic
markup.underline — underline
markup.italic markup.bold, markup.bold markup.italic — bold italic
meta.separator #b4a89c bold
markup.quote #96b898 italic
markup.list punctuation.definition.list.begin #ffb454 —
text.html.markdown markup.inline.raw #f29668 —
text.html.markdown meta.dummy.line-break #b4a89c —
punctuation.definition.markdown #b4a89c —
Open Editors fetchUser.ts index.ts README.md My-Project src components fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline fetchUser.ts
index.ts
README.md
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 $
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}!`;
}
Warm Burnout | Coding Theme