Skip to main content
Umbre | 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.activeBorder #f79b2d3d activityBar.background #0e0e10 activityBar.border #3232383d activityBar.foreground #71717b activityBar.inactiveForeground #3d3d45 activityBarBadge.background #f79b2d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #d6d6db — comment #5d5d66 italic string, constant.other.symbol #60cd86 — string.regexp, constant.character.escape, constant.other #60c5b8 — 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}!`;
}
Umbre — Umbre
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.foreground
#000000
badge.background #f79b2d
badge.foreground #000000
breadcrumb.activeSelectionForeground #e4e4e7
breadcrumb.background #121214
breadcrumb.focusForeground #e4e4e7
breadcrumb.foreground #71717b
breadcrumbPicker.background #151517
button.background #f79b2d
button.border #00000000
button.foreground #000000
button.hoverBackground #f9b829
button.secondaryBackground #1b1b1e
button.secondaryForeground #e4e4e7
button.secondaryHoverBackground #18181b
charts.blue #56a5de
charts.foreground #e4e4e7
charts.green #5bbe71
charts.lines #32323852
charts.orange #b888e6
charts.purple #5bb4e5
charts.red #e5615e
charts.yellow #e39e5a
chat.requestBackground #131316
chat.requestBorder #3232383d
checkbox.background #121214
checkbox.border #42424a3d
checkbox.foreground #e4e4e7
checkbox.selectBackground #121214
checkbox.selectBorder #f79b2d3d
contrastActiveBorder #00000000
contrastBorder #00000000
debugIcon.breakpointDisabledForeground #e5615e57
debugIcon.breakpointForeground #e5615e
debugIcon.breakpointUnverifiedForeground #e39e5a
debugIcon.continueForeground #5bbe71
debugIcon.disconnectForeground #e5615e
debugIcon.pauseForeground #f79b2d
debugIcon.restartForeground #5bbe71
debugIcon.startForeground #5bbe71
debugIcon.stepIntoForeground #56a5de
debugIcon.stepOutForeground #56a5de
debugIcon.stepOverForeground #56a5de
debugIcon.stopForeground #e5615e
debugToolBar.background #151517
debugToolBar.border #42424a3d
descriptionForeground #71717b
diffEditor.insertedLineBackground #5bbe7114
diffEditor.insertedTextBackground #5bbe7129
diffEditor.removedLineBackground #e85e7014
diffEditor.removedTextBackground #e85e7029
diffEditorGutter.insertedLineBackground #5bbe712e
diffEditorGutter.removedLineBackground #e85e702e
disabledForeground #71717b8c
dropdown.background #151517
dropdown.border #42424a3d
dropdown.foreground #e4e4e7
dropdown.listBackground #151517
editor.background #101012
editor.findMatchBackground #f79b2d52
editor.findMatchBorder #f79b2d3d
editor.findMatchHighlightBackground #ffffff0d
editor.findMatchHighlightBorder #ffffff3d
editor.foreground #e4e4e7
editor.hoverHighlightBackground #ffffff0a
editor.inactiveSelectionBackground #ffffff0a
editor.lineHighlightBackground #121214
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #ffffff0a
editor.selectionBackground #ffffff19
editor.selectionHighlightBackground #ffffff0d
editor.snippetTabstopHighlightBackground #5bbe712e
editor.wordHighlightBackground #ffffff0d
editor.wordHighlightStrongBackground #f79b2d21
editorBracketHighlight.foreground1 #9a7fb8
editorBracketHighlight.foreground2 #b4799a
editorBracketHighlight.foreground3 #6a98b7
editorBracketHighlight.unexpectedBracket.foreground #e5615e
editorBracketMatch.background #f79b2d1f
editorBracketMatch.border #f79b2d3d
editorBracketPairGuide.activeBackground1 #b888e61f
editorBracketPairGuide.activeBackground2 #e37bb21f
editorBracketPairGuide.activeBackground3 #5bb4e51f
editorBracketPairGuide.activeBackground4 #56a5de1f
editorBracketPairGuide.activeBackground5 #5bbe711f
editorBracketPairGuide.activeBackground6 #e3a1ac1f
editorBracketPairGuide.background1 #b888e60a
editorBracketPairGuide.background2 #e37bb20a
editorBracketPairGuide.background3 #5bb4e50a
editorBracketPairGuide.background4 #56a5de0a
editorBracketPairGuide.background5 #5bbe710a
editorBracketPairGuide.background6 #e3a1ac0a
editorCodeLens.foreground #5d5d66
editorCursor.background #101012
editorCursor.foreground #f79b2d
editorError.border #00000000
editorError.foreground #e5615e
editorGroup.border #3232383d
editorGroup.dropBackground #ffffff0d
editorGroupHeader.noTabsBackground #121214
editorGroupHeader.tabsBackground #121214
editorGroupHeader.tabsBorder #3232383d
editorGutter.addedBackground #5bbe713d
editorGutter.background #101012
editorGutter.commentRangeForeground #3d3d45
editorGutter.deletedBackground #e85e703d
editorGutter.foldingControlForeground #71717b
editorGutter.modifiedBackground #e39e5a3d
editorHint.foreground #60c5b8
editorHoverWidget.background #151517
editorHoverWidget.border #42424a3d
editorHoverWidget.foreground #e4e4e7
editorHoverWidget.highlightForeground #f79b2d
editorHoverWidget.statusBarBackground #131316
editorIndentGuide.activeBackground1 #3c3c436b
editorIndentGuide.background1 #42424a38
editorInfo.border #00000000
editorInfo.foreground #56a5de
editorLineNumber.activeForeground #71717b
editorLineNumber.foreground #3d3d45
editorLink.activeForeground #f79b2d
editorOverviewRuler.addedForeground #5bbe7161
editorOverviewRuler.background #101012
editorOverviewRuler.border #00000000
editorOverviewRuler.deletedForeground #e85e7061
editorOverviewRuler.errorForeground #e5615e6b
editorOverviewRuler.findMatchForeground #f79b2d61
editorOverviewRuler.infoForeground #56a5de6b
editorOverviewRuler.modifiedForeground #e39e5a61
editorOverviewRuler.selectionHighlightForeground #ffffff24
editorOverviewRuler.warningForeground #e39e5a6b
editorRuler.foreground #42424a73
editorSuggestWidget.background #151517
editorSuggestWidget.border #42424a3d
editorSuggestWidget.focusHighlightForeground #f79b2d
editorSuggestWidget.foreground #e4e4e7
editorSuggestWidget.highlightForeground #f79b2d
editorSuggestWidget.selectedBackground #1b1b1e
editorSuggestWidget.selectedForeground #e4e4e7
editorWarning.border #00000000
editorWarning.foreground #e39e5a
editorWhitespace.foreground #71717b47
editorWidget.background #151517
editorWidget.border #42424a3d
editorWidget.foreground #e4e4e7
editorWidget.resizeBorder #3c3c433d
errorForeground #e5615e
focusBorder #c38d5b3d
foreground #e4e4e7
gitDecoration.addedResourceForeground #5bbe71
gitDecoration.conflictingResourceForeground #b888e6
gitDecoration.deletedResourceForeground #bf6975
gitDecoration.ignoredResourceForeground #52525b
gitDecoration.modifiedResourceForeground #b28c6d
gitDecoration.renamedResourceForeground #e37bb2
gitDecoration.stageDeletedResourceForeground #e85e70
gitDecoration.stageModifiedResourceForeground #e39e5a
gitDecoration.submoduleResourceForeground #6a98b7
gitDecoration.untrackedResourceForeground #6a9e78
icon.foreground #71717b
input.background #121214
input.border #42424a3d
input.foreground #e4e4e7
input.placeholderForeground #3d3d45
inputOption.activeBackground #f79b2d29
inputOption.activeBorder #f79b2d3d
inputOption.activeForeground #f79b2d
inputOption.hoverBackground #1b1b1e
inputValidation.errorBackground #151517
inputValidation.errorBorder #e5615e3d
inputValidation.errorForeground #e5615e
inputValidation.infoBackground #151517
inputValidation.infoBorder #56a5de3d
inputValidation.warningBackground #151517
inputValidation.warningBorder #e39e5a3d
keybindingLabel.background #1b1b1e
keybindingLabel.border #42424a3d
keybindingLabel.bottomBorder #42424a3d
keybindingLabel.foreground #e4e4e7
list.activeSelectionBackground #ffffff19
list.activeSelectionForeground #e4e4e7
list.activeSelectionIconForeground #e4e4e7
list.deemphasizedForeground #52525b
list.dropBackground #ffffff0d
list.errorForeground #e5615e
list.focusBackground #ffffff0d
list.focusForeground #e4e4e7
list.focusHighlightForeground #f79b2d
list.focusIconForeground #e4e4e7
list.focusOutline #ffffff3d
list.highlightForeground #f79b2d
list.hoverBackground #151517
list.hoverForeground #e4e4e7
list.inactiveFocusBackground #ffffff0d
list.inactiveFocusOutline #00000000
list.inactiveSelectionBackground #ffffff0d
list.inactiveSelectionForeground #e4e4e7
list.inactiveSelectionIconForeground #e4e4e7
list.invalidItemForeground #e5615e
list.warningForeground #e39e5a
listFilterWidget.background #151517
listFilterWidget.noMatchesOutline #e5615e3d
listFilterWidget.outline #00000000
menu.background #151517
menu.border #42424a3d
menu.foreground #e4e4e7
menu.selectionBackground #1b1b1e
menu.selectionForeground #e4e4e7
menu.separatorBackground #42424a6b
menubar.selectionBackground #1b1b1e
menubar.selectionForeground #e4e4e7
minimap.background #101012
minimap.errorHighlight #e5615e5c
minimap.findMatchHighlight #f79b2d61
minimap.foregroundOpacity #000000ba
minimap.selectionHighlight #ffffff33
minimap.warningHighlight #e39e5a5c
minimapGutter.addedBackground #5bbe7161
minimapGutter.deletedBackground #e85e7061
minimapGutter.modifiedBackground #e39e5a61
minimapSlider.activeBackground #71717b57
minimapSlider.background #71717b24
minimapSlider.hoverBackground #71717b3d
notificationCenter.border #42424a3d
notificationCenterHeader.background #131316
notificationCenterHeader.foreground #71717b
notificationLink.foreground #f79b2d
notifications.background #151517
notifications.border #42424a3d
notifications.foreground #e4e4e7
notificationsErrorIcon.foreground #e5615e
notificationsInfoIcon.foreground #56a5de
notificationsWarningIcon.foreground #e39e5a
notificationToast.border #42424a3d
panel.background #131316
panel.border #42424a3d
panel.dropBorder #f79b2d3d
panelSection.border #42424a3d
panelSectionHeader.background #151517
panelSectionHeader.foreground #71717b
panelTitle.activeBorder #f79b2d3d
panelTitle.activeForeground #e4e4e7
panelTitle.inactiveForeground #71717b
peekView.border #42424a3d
peekViewEditor.background #121214
peekViewEditor.matchHighlightBackground #f79b2d29
peekViewEditor.matchHighlightBorder #f79b2d3d
peekViewEditorGutter.background #121214
peekViewResult.background #131316
peekViewResult.fileForeground #e4e4e7
peekViewResult.lineForeground #71717b
peekViewResult.matchHighlightBackground #f79b2d29
peekViewResult.selectionBackground #1b1b1e
peekViewResult.selectionForeground #e4e4e7
peekViewTitle.background #151517
peekViewTitleDescription.foreground #71717b
peekViewTitleLabel.foreground #e4e4e7
pickerGroup.border #3232383d
pickerGroup.foreground #71717b
problemsErrorIcon.foreground #e5615e
problemsInfoIcon.foreground #56a5de
problemsWarningIcon.foreground #e39e5a
progressBar.background #f79b2d
quickInput.background #151517
quickInput.foreground #e4e4e7
quickInputList.focusBackground #1b1b1e
quickInputList.focusForeground #e4e4e7
quickInputList.focusIconForeground #e4e4e7
quickInputTitle.background #131316
scrollbar.shadow #00000029
scrollbarSlider.activeBackground #71717b85
scrollbarSlider.background #71717b38
scrollbarSlider.hoverBackground #71717b61
selection.background #ffffff19
settings.checkboxBackground #121214
settings.checkboxBorder #42424a3d
settings.checkboxForeground #e4e4e7
settings.dropdownBackground #121214
settings.dropdownBorder #42424a3d
settings.dropdownForeground #e4e4e7
settings.focusedRowBackground #151517
settings.headerForeground #e4e4e7
settings.modifiedItemIndicator #f79b2d
settings.numberInputBackground #121214
settings.numberInputBorder #42424a3d
settings.numberInputForeground #e4e4e7
settings.rowHoverBackground #131316
settings.textInputBackground #121214
settings.textInputBorder #42424a3d
settings.textInputForeground #e4e4e7
sideBar.background #121215
sideBar.border #3232383d
sideBar.dropBackground #ffffff0d
sideBar.foreground #71717b
sideBarSectionHeader.background #131316
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #71717b
sideBarTitle.foreground #71717b
statusBar.background #0e0e10
statusBar.border #3232383d
statusBar.debuggingBackground #f79b2d
statusBar.debuggingForeground #000000
statusBar.foreground #71717b
statusBar.noFolderBackground #0e0e10
statusBar.noFolderForeground #71717b
statusBarItem.activeBackground #18181b
statusBarItem.errorBackground #e5615e
statusBarItem.errorForeground #000000
statusBarItem.hoverBackground #1b1b1e
statusBarItem.remoteBackground #f79b2d
statusBarItem.remoteForeground #000000
statusBarItem.warningBackground #e39e5a
statusBarItem.warningForeground #000000
symbolIcon.arrayForeground #b888e6
symbolIcon.booleanForeground #b888e6
symbolIcon.classForeground #5bb4e5
symbolIcon.colorForeground #e1c46b
symbolIcon.constantForeground #b888e6
symbolIcon.constructorForeground #e0bc61
symbolIcon.enumeratorForeground #5bb4e5
symbolIcon.enumeratorMemberForeground #b888e6
symbolIcon.eventForeground #e37bb2
symbolIcon.fieldForeground #e3a1ac
symbolIcon.fileForeground #e4e4e7
symbolIcon.folderForeground #71717b
symbolIcon.functionForeground #e0bc61
symbolIcon.interfaceForeground #60c4dc
symbolIcon.keyForeground #e1cd69
symbolIcon.keywordForeground #e49358
symbolIcon.methodForeground #e0bc61
symbolIcon.moduleForeground #60cd86
symbolIcon.namespaceForeground #60cd86
symbolIcon.nullForeground #b888e6
symbolIcon.numberForeground #b888e6
symbolIcon.objectForeground #5bb4e5
symbolIcon.operatorForeground #e37bb2
symbolIcon.packageForeground #60cd86
symbolIcon.propertyForeground #e3a1ac
symbolIcon.referenceForeground #5bb4e5
symbolIcon.snippetForeground #e1c46b
symbolIcon.stringForeground #60cd86
symbolIcon.structForeground #5bb4e5
symbolIcon.textForeground #e4e4e7
symbolIcon.typeParameterForeground #5bb4e5
symbolIcon.unitForeground #b888e6
symbolIcon.variableForeground #e4e4e7
tab.activeBackground #101012
tab.activeBorder #00000000
tab.activeBorderTop #f79b2d3d
tab.activeForeground #e4e4e7
tab.border #1212143d
tab.hoverBackground #131316
tab.hoverForeground #e4e4e7
tab.inactiveBackground #121214
tab.inactiveForeground #71717b
tab.unfocusedActiveBackground #101012
tab.unfocusedActiveForeground #71717b
tab.unfocusedInactiveForeground #3d3d45
terminal.ansiBlack #18181b
terminal.ansiBlue #e0bc61
terminal.ansiBrightBlack #52525c
terminal.ansiBrightBlue #e4c477
terminal.ansiBrightCyan #e88bbb
terminal.ansiBrightGreen #72c682
terminal.ansiBrightMagenta #72bde9
terminal.ansiBrightRed #eb7671
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #e7aa70
terminal.ansiCyan #e37bb2
terminal.ansiGreen #5bbe71
terminal.ansiMagenta #5bb4e5
terminal.ansiRed #e5615e
terminal.ansiWhite #d4d4d8
terminal.ansiYellow #e39e5a
terminal.background #131315
terminal.foreground #e4e4e7
terminal.selectionBackground #ffffff19
terminalCursor.foreground #f79b2d
testing.iconErrored #e5615e
testing.iconFailed #e5615e
testing.iconPassed #5bbe71
testing.iconQueued #f79b2d
testing.iconSkipped #71717b
testing.iconUnset #71717b
textBlockQuote.background #131316
textBlockQuote.border #42424a3d
textCodeBlock.background #131316
textLink.activeForeground #f9b829
textLink.foreground #f79b2d
textPreformat.foreground #f79b2d
textSeparator.foreground #32323852
titleBar.activeBackground #0e0e10
titleBar.activeForeground #71717b
titleBar.border #3232383d
titleBar.inactiveBackground #0e0e10
titleBar.inactiveForeground #3d3d45
tree.inactiveIndentGuidesStroke #32323852
tree.indentGuidesStroke #42424a6b
tree.tableColumnsBorder #42424a3d
welcomePage.background #101012
welcomePage.progress.background #32323852
welcomePage.progress.foreground #f79b2d
welcomePage.tileBackground #131316
welcomePage.tileBorder #3232383d
welcomePage.tileHoverBackground #151517
widget.border #42424a3d
widget.shadow #0000005c
window.activeBorder #121215
window.inactiveBorder #121215 #b888e6
constant.language #b888e6 —
support.constant #e37bb2 italic
variable, variable.parameter.function-call #d6d6db —
variable.member, variable.other.property #d6d6db —
variable.language #60c4dc italic
storage, storage.type #e67f54 —
keyword.operator, punctuation.accessor #e37bb2 —
punctuation.separator, punctuation.terminator #d6d6dbb8 —
punctuation.section, punctuation.definition #d6d6db —
punctuation.definition.template-expression, punctuation.section.embedded #e49358 —
meta.embedded, source.embedded #d6d6db —
invalid, message.error #e5615e —
entity.other.inherited-class #60c4dc —
support.type, source.go storage.type #60c4dc —
entity.name.class, entity.name.struct, support.class.component #5bb4e5 —
entity.name.interface #60c4dc —
entity.name.function #e0bc61 —
support.function, support.macro #e3a1ac —
variable.function, meta.function-call.generic, support.function.go #e0bc61 —
variable.parameter, meta.parameter #d6d6db —
entity.name.import, entity.name.package #d6d6db —
entity.name.tag, meta.tag.sgml #60c4dc —
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag #60c4dc8c —
entity.other.attribute-name #e1cd69 —
entity.other.attribute-name.pseudo-class #60c5b8 —
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator #e1c46b —
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 #5bb4e5 —
support.type.property-name #60c4dc —
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type #5d5d66 —
constant.numeric.line-number.find-in-files - match #5d5d66 —
constant.numeric.line-number.match #e49358 —
entity.name.filename.find-in-files #60cd86 —
markup.heading, markup.heading entity.name #60cd86 bold
markup.underline.link, string.other.link #60c4dc —
markup.italic, emphasis #e3a1ac italic
markup.bold, strong #e3a1ac bold
markup.underline — underline
markup.italic markup.bold, markup.bold markup.italic — bold italic
markup.raw.inline #e37bb2 —
markup.quote #60c5b8 italic
markup.list punctuation.definition.list.begin #e0bc61 —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
31
32
33
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}!`;
}
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 $