Retro Dark Theme

Name: Retro Dark Theme
Author: AnhhTuann

Publisher: AnhhTuannThemes in package: 1

Retro Dark Theme - A customized dark theme inspired by Oh My Posh OS & Terminal colors: Tím khói, Xanh thép, Xanh rêu, Vàng đồng, Hồng đất, Cam đất, Xanh cổ vịt trầm, Đỏ gạch.

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Retro Dark Theme — Retro Dark Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#222033
activityBar.activeBorder#FF8DA1
activityBar.activeFocusBorder#FF8DA1
activityBar.background#161420
activityBar.border#161420
activityBar.foreground#FF8DA1
activityBar.inactiveForeground#565075
activityBarBadge.background#FFA8C5
activityBarBadge.foreground#161420
badge.background#FFA8C5
badge.foreground#161420
breadcrumb.activeSelectionForeground#FF8DA1
breadcrumb.focusForeground#B0A9C2
breadcrumb.foreground#565075
breadcrumbPicker.background#1B1928
button.background#FFA8C5
button.foreground#FFFFFF
button.hoverBackground#7A9DC6
charts.blue#FFA8C5
charts.green#82E0AA
charts.orange#F9E79F
charts.purple#FF8DA1
charts.red#FF6B6B
charts.yellow#A8E6CF
chat.requestBackground#1B1928
chat.slashCommandForeground#FF8DA1
commandCenter.activeBackground#2A283D
commandCenter.activeBorder#FF8DA1
commandCenter.background#1B1928
commandCenter.border#2E2B42
commandCenter.foreground#E2E0E7
debugConsole.errorForeground#FF6B6B
debugConsole.infoForeground#FFA8C5
debugConsole.sourceForeground#848BBD
debugConsole.warningForeground#A8E6CF
debugIcon.breakpointDisabledForeground#565075
debugIcon.breakpointForeground#FF6B6B
debugIcon.breakpointStackframeForeground#82E0AA
debugIcon.breakpointStackframeSelectedForeground#A8E6CF
debugIcon.breakpointUnverifiedForeground#A8E6CF
debugIcon.continueForeground#82E0AA
debugIcon.pauseForeground#A8E6CF
debugIcon.restartForeground#848BBD
debugIcon.startForeground#82E0AA
debugIcon.stepBackForeground#FF8DA1
debugIcon.stepIntoForeground#FFA8C5
debugIcon.stepOutForeground#FFA8C5
debugIcon.stepOverForeground#FFA8C5
debugIcon.stopForeground#FF6B6B
debugTokenExpression.boolean#F9E79F
debugTokenExpression.error#FF6B6B
debugTokenExpression.name#FF8DA1
debugTokenExpression.number#F9E79F
debugTokenExpression.string#82E0AA
debugTokenExpression.value#82E0AA
debugToolBar.background#161420
debugToolBar.border#2E2B42
diffEditor.diagonalFill#2E2B42
diffEditor.insertedLineBackground#82E0AA10
diffEditor.insertedTextBackground#82E0AA25
diffEditor.removedLineBackground#FF6B6B10
diffEditor.removedTextBackground#FF6B6B25
editor.background#222033
editor.findMatchBackground#A8E6CF40
editor.findMatchBorder#A8E6CF
editor.findMatchHighlightBackground#A8E6CF20
editor.findRangeHighlightBackground#FFA8C515
editor.foreground#E2E0E7
editor.inactiveSelectionBackground#FFA8C520
editor.lineHighlightBackground#2A283D
editor.selectionBackground#FFA8C550
editor.wordHighlightBackground#FFA8C520
editor.wordHighlightBorder#FFA8C550
editor.wordHighlightStrongBackground#FF8DA125
editor.wordHighlightStrongBorder#FF8DA160
editor.wordHighlightTextBackground#A8E6CF20
editorBracketHighlight.foreground1#FF8DA1
editorBracketHighlight.foreground2#82E0AA
editorBracketHighlight.foreground3#FFA8C5
editorBracketHighlight.foreground4#A8E6CF
editorBracketHighlight.foreground5#D7BDE2
editorBracketHighlight.foreground6#F9E79F
editorBracketMatch.background#FF8DA130
editorBracketMatch.border#FF8DA1
editorCursor.foreground#A8E6CF
editorError.background#FF6B6B15
editorError.foreground#FF6B6B
editorGroup.border#2E2B42
editorGroupHeader.tabsBackground#161420
editorGroupHeader.tabsBorder#161420
editorGutter.addedBackground#82E0AA
editorGutter.deletedBackground#FF6B6B
editorGutter.foldingControlForeground#FF8DA1
editorGutter.modifiedBackground#A8E6CF
editorHint.foreground#848BBD
editorHoverWidget.background#1B1928
editorHoverWidget.border#2E2B42
editorHoverWidget.foreground#E2E0E7
editorIndentGuide.activeBackground#FFA8C5
editorIndentGuide.background#2E2B42
editorInfo.background#FFA8C515
editorInfo.foreground#FFA8C5
editorLightBulb.foreground#A8E6CF
editorLightBulbAutoFix.foreground#82E0AA
editorLineNumber.activeForeground#FF8DA1
editorLineNumber.foreground#565075
editorOverviewRuler.addedForeground#82E0AA
editorOverviewRuler.bracketMatchForeground#FF8DA1
editorOverviewRuler.deletedForeground#FF6B6B
editorOverviewRuler.errorForeground#FF6B6B
editorOverviewRuler.findMatchForeground#A8E6CF80
editorOverviewRuler.infoForeground#FFA8C5
editorOverviewRuler.modifiedForeground#A8E6CF
editorOverviewRuler.selectionHighlightForeground#FFA8C540
editorOverviewRuler.warningForeground#A8E6CF
editorOverviewRuler.wordHighlightForeground#FFA8C560
editorOverviewRuler.wordHighlightStrongForeground#FF8DA160
editorOverviewRuler.wordHighlightTextForeground#A8E6CF60
editorSuggestWidget.background#1B1928
editorSuggestWidget.border#2E2B42
editorSuggestWidget.foreground#E2E0E7
editorSuggestWidget.highlightForeground#A8E6CF
editorSuggestWidget.selectedBackground#2A283D
editorWarning.background#A8E6CF15
editorWarning.foreground#A8E6CF
editorWhitespace.foreground#34314A
editorWidget.background#1B1928
editorWidget.border#2E2B42
editorWidget.foreground#E2E0E7
editorWidget.resizeBorder#FF8DA1
errorLens.errorBackground#FF6B6B25
errorLens.errorForeground#FF8080
errorLens.hintBackground#82E0AA25
errorLens.hintForeground#80FF80
errorLens.infoBackground#FFA8C525
errorLens.infoForeground#80C0FF
errorLens.statusBarErrorForeground#FF6B6B
errorLens.statusBarWarningForeground#A8E6CF
errorLens.warningBackground#A8E6CF25
errorLens.warningForeground#FFE080
extensionBadge.remoteBackground#FF8DA1
extensionBadge.remoteForeground#161420
extensionButton.prominentBackground#FFA8C5
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#7A9DC6
focusBorder#FFA8C5
gitDecoration.conflictingResourceForeground#F9E79F
gitDecoration.deletedResourceForeground#FF6B6B
gitDecoration.ignoredResourceForeground#565075
gitDecoration.modifiedResourceForeground#A8E6CF
gitDecoration.untrackedResourceForeground#82E0AA
gitlens.gutterBackgroundColor#1B1928
gitlens.gutterForegroundColor#848BBD
gitlens.gutterUncommittedForegroundColor#A8E6CF
gitlens.lineHighlightBackgroundColor#FF8DA115
gitlens.lineHighlightOverviewRulerColor#FF8DA1
gitlens.trailingLineForegroundColor#565075
inlineChat.background#1B1928
inlineChat.border#FF8DA1
inlineChatDiff.inserted#82E0AA20
inlineChatDiff.removed#FF6B6B20
input.background#161420
input.border#2E2B42
input.foreground#E2E0E7
inputOption.activeBorder#FF8DA1
keybindingLabel.background#222033
keybindingLabel.border#2E2B42
keybindingLabel.bottomBorder#FF8DA1
keybindingLabel.foreground#E2E0E7
list.activeSelectionBackground#2A283D
list.activeSelectionForeground#FF8DA1
list.highlightForeground#A8E6CF
list.hoverBackground#2E2B42
list.inactiveSelectionBackground#2A283D
menu.background#1B1928
menu.foreground#E2E0E7
menu.selectionBackground#2A283D
menu.selectionForeground#E2E0E7
menu.separatorBackground#2E2B42
menubar.selectionBackground#2A283D
menubar.selectionForeground#E2E0E7
minimap.errorHighlight#FF6B6B
minimap.findMatchHighlight#A8E6CF80
minimap.selectionHighlight#FFA8C550
minimap.warningHighlight#A8E6CF
minimapGutter.addedBackground#82E0AA
minimapGutter.deletedBackground#FF6B6B
minimapGutter.modifiedBackground#A8E6CF
notebook.cellBorderColor#2E2B42
notebook.cellHoverBackground#1B1928
notebook.cellInsertedIndicator#82E0AA
notebook.cellRemovedIndicator#FF6B6B
notebook.cellToolbarSeparator#2E2B42
notebook.editorBackground#161420
notebook.focusedCellBorder#FF8DA1
notificationCenterHeader.background#161420
notificationCenterHeader.foreground#FF8DA1
notificationLink.foreground#FFA8C5
notifications.background#1B1928
notifications.border#2E2B42
notifications.foreground#E2E0E7
notificationToast.border#2E2B42
panel.background#222033
panel.border#2E2B42
panelTitle.activeBorder#FF8DA1
panelTitle.activeForeground#FF8DA1
panelTitle.inactiveForeground#6C658C
peekView.border#FF8DA1
peekViewEditor.background#1B1928
peekViewEditor.matchHighlightBackground#A8E6CF30
peekViewResult.background#161420
peekViewResult.matchHighlightBackground#A8E6CF30
peekViewResult.selectionBackground#2A283D
peekViewResult.selectionForeground#E2E0E7
peekViewTitle.background#222033
peekViewTitleDescription.foreground#FF8DA1
peekViewTitleLabel.foreground#E2E0E7
ports.iconRunningProcessForeground#82E0AA
problemsErrorIcon.foreground#FF6B6B
problemsInfoIcon.foreground#FFA8C5
problemsWarningIcon.foreground#A8E6CF
quickInput.background#1B1928
quickInput.foreground#E2E0E7
quickInputList.focusBackground#2A283D
quickInputTitle.background#222033
sash.hoverBorder#FF8DA1
scrollbarSlider.activeBackground#56507580
scrollbarSlider.background#56507540
scrollbarSlider.hoverBackground#56507560
searchEditor.findMatchBackground#A8E6CF25
searchEditor.findMatchBorder#A8E6CF60
settings.checkboxBackground#1B1928
settings.checkboxBorder#2E2B42
settings.checkboxForeground#E2E0E7
settings.dropdownBackground#1B1928
settings.dropdownBorder#2E2B42
settings.dropdownForeground#E2E0E7
settings.headerForeground#FF8DA1
settings.modifiedItemIndicator#A8E6CF
settings.numberInputBackground#161420
settings.numberInputForeground#E2E0E7
settings.textInputBackground#161420
settings.textInputBorder#2E2B42
settings.textInputForeground#E2E0E7
sideBar.background#1B1928
sideBar.border#2E2B42
sideBar.foreground#B0A9C2
sideBarSectionHeader.background#222033
sideBarSectionHeader.foreground#FF8DA1
sideBarTitle.foreground#FF8DA1
statusBar.background#161420
statusBar.border#161420
statusBar.debuggingBackground#F9E79F
statusBar.debuggingForeground#161420
statusBar.foreground#B0A9C2
statusBar.noFolderBackground#161420
statusBarItem.errorBackground#FF6B6B
statusBarItem.errorForeground#E2E0E7
statusBarItem.remoteBackground#FF8DA1
statusBarItem.remoteForeground#161420
statusBarItem.warningBackground#A8E6CF
statusBarItem.warningForeground#161420
symbolIcon.arrayForeground#F9E79F
symbolIcon.booleanForeground#F9E79F
symbolIcon.classForeground#D7BDE2
symbolIcon.colorForeground#D7BDE2
symbolIcon.constantForeground#F9E79F
symbolIcon.constructorForeground#FFA8C5
symbolIcon.enumeratorForeground#D7BDE2
symbolIcon.enumeratorMemberForeground#F9E79F
symbolIcon.eventForeground#A8E6CF
symbolIcon.fieldForeground#82E0AA
symbolIcon.fileForeground#FF8DA1
symbolIcon.folderForeground#A8E6CF
symbolIcon.functionForeground#FFA8C5
symbolIcon.interfaceForeground#D7BDE2
symbolIcon.keyForeground#82E0AA
symbolIcon.keywordForeground#FF8DA1
symbolIcon.methodForeground#FFA8C5
symbolIcon.moduleForeground#D7BDE2
symbolIcon.namespaceForeground#D7BDE2
symbolIcon.nullForeground#F9E79F
symbolIcon.numberForeground#F9E79F
symbolIcon.objectForeground#A8E6CF
symbolIcon.operatorForeground#FF8DA1
symbolIcon.packageForeground#FF8DA1
symbolIcon.propertyForeground#82E0AA
symbolIcon.referenceForeground#848BBD
symbolIcon.snippetForeground#82E0AA
symbolIcon.stringForeground#82E0AA
symbolIcon.structForeground#D7BDE2
symbolIcon.textForeground#E2E0E7
symbolIcon.typeParameterForeground#D7BDE2
symbolIcon.unitForeground#F9E79F
symbolIcon.variableForeground#A8E6CF
tab.activeBackground#222033
tab.activeBorderTop#FF8DA1
tab.activeForeground#FF8DA1
tab.border#2E2B42
tab.hoverBackground#1B1928
tab.inactiveBackground#161420
tab.inactiveForeground#6C658C
terminal.ansiBlack#161420
terminal.ansiBlue#FFA8C5
terminal.ansiBrightBlack#565075
terminal.ansiBrightBlue#7A9DC6
terminal.ansiBrightCyan#78B4B5
terminal.ansiBrightGreen#92C492
terminal.ansiBrightMagenta#B3A7CF
terminal.ansiBrightRed#D7BDE2
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5B667
terminal.ansiCyan#848BBD
terminal.ansiGreen#82E0AA
terminal.ansiMagenta#FF8DA1
terminal.ansiRed#FF6B6B
terminal.ansiWhite#E2E0E7
terminal.ansiYellow#A8E6CF
terminal.background#222033
terminal.foreground#E2E0E7
terminal.selectionBackground#FFA8C540
terminal.tab.activeBorder#FF8DA1
terminalCommandDecoration.defaultBackground#565075
terminalCommandDecoration.errorBackground#FF6B6B
terminalCommandDecoration.successBackground#82E0AA
terminalCursor.foreground#A8E6CF
testing.iconErrored#FF6B6B
testing.iconFailed#FF6B6B
testing.iconPassed#82E0AA
testing.iconQueued#A8E6CF
testing.iconSkipped#565075
testing.iconUnset#848BBD
testing.message.error.decorationForeground#FF6B6B
testing.message.error.lineBackground#FF6B6B20
testing.message.info.decorationForeground#FFA8C5
testing.runAction#82E0AA
textBlockQuote.background#1B1928
textBlockQuote.border#FF8DA1
textLink.activeForeground#7A9DC6
textLink.foreground#FFA8C5
textPreformat.foreground#82E0AA
textSeparator.foreground#565075
titleBar.activeBackground#161420
titleBar.activeForeground#E2E0E7
titleBar.border#161420
titleBar.inactiveBackground#161420
walkThrough.embeddedEditorBackground#1B1928
walkthrough.stepTitle.foreground#FF8DA1
welcomePage.background#161420
welcomePage.buttonBackground#FFA8C5
welcomePage.buttonHoverBackground#7A9DC6
welcomePage.tileBackground#1B1928
welcomePage.tileBorder#2E2B42
welcomePage.tileHoverBackground#222033
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment	#848BBD	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.word, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, punctuation.definition.keyword, entity.name.tag	#FF8DA1	italic
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method, support.method, meta.method-call, support.function.builtin	#FFA8C5	bold
string, string.quoted, string.template, string.unquoted, punctuation.definition.string, string.regexp, constant.character.escape	#82E0AA	—
variable, variable.other, variable.parameter, support.variable, variable.language, meta.variable, variable.other.readwrite, entity.other.attribute-name	#A8E6CF	—
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class, entity.name.namespace, entity.name.module, support.module, meta.type, meta.class, entity.name.interface, entity.name.enum, entity.name.struct, entity.name.union, support.type.primitive	#D7BDE2	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language, constant.other, constant.character, keyword.other.unit, support.constant	#F9E79F	—
invalid, invalid.illegal, invalid.deprecated, message.error, string.regexp.error	#FF6B6B	bold underline
keyword.operator, punctuation, meta.brace, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.map, punctuation.definition.binding-pattern, punctuation.section, punctuation.terminator, punctuation.separator	#FF8DA1CC	—
support.type.property-name.json, entity.name.tag.yaml, meta.object-literal.key, variable.other.property, variable.other.object.property, meta.property-name	#82E0AA	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#82E0AA	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.scss	#D7BDE2	—
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx	#FF8DA1	—
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#A8E6CF	—
markup.heading, entity.name.section	#FF8DA1	bold
markup.inline.raw, markup.raw.block	#82E0AA	—
support.class.component, support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx	#D7BDE2	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.tag.attributes.jsx, meta.tag.attributes.tsx	#A8E6CF	italic
support.function.react, support.function.builtin.react	#FFA8C5	bold italic
variable.other.env	#A8E6CF	bold
keyword.control.flow, keyword.control.trycatch, storage.modifier.async	#D7BDE2	bold italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, storage.type.module	#FF8DA1	bold italic
variable.language.this, variable.language.super, variable.language.self, keyword.other.this	#D7BDE2	bold italic
string.template, punctuation.definition.template-expression, punctuation.section.embedded	#82E0AA	—
variable.css, variable.scss, variable.other.less, support.type.custom-property.css, variable.argument.css	#A8E6CF	italic
string.other.link.title.markdown, string.other.link.description.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown	#848BBD	underline
variable.other.readwrite.alias, meta.import variable.other.readwrite, meta.export variable.other.readwrite, meta.variable.declaration.js variable.other.readwrite	#FF6B6B	bold italic
string.regexp, constant.character.escape.regexp, support.other.match.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp	#D7BDE2	—
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp	#A8E6CF	bold
markup.bold.markdown, markup.italic.markdown, markup.heading.markdown, entity.name.section.markdown	#FF8DA1	bold
markup.quote.markdown, markup.list.unnumbered.markdown, markup.list.numbered.markdown, markup.inline.raw.markdown	#82E0AA	—
markup.inserted.diff, markup.deleted.diff, meta.diff.header	#FFA8C5	—