Skip to main content
Warm Burnout | Coding Theme
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}!`;
}