OhLED Themes (142-in-1)

Name: OhLED Themes (142-in-1)
Author: Ophuscado

Publisher: OphuscadoThemes in package: 142

The OhLED Themes (142-in-1) for VSCode are inspired by the classic CRT monitors of yesteryear, specially crafted for the modern OLED displays of today.

Open in VS Code GitHub

Color themes

VS Code preview

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

OhLED Themes (142-in-1) — OhLED_PeachPuff

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...

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#FFDAB988
activityBar.activeBorder#FFDAB988
activityBar.activeFocusBorder#FFDAB988
activityBar.background#000000
activityBar.border#FFDAB988
activityBar.dropBorder#FFDAB988
activityBar.foreground#FFDAB9
activityBar.inactiveForeground#FFDAB988
activityBarBadge.background#FFDAB9
activityBarBadge.foreground#000000
badge.background#000000
badge.foreground#FFDAB9
breadcrumb.activeSelectionForeground#FFDAB9
breadcrumb.background#000000
breadcrumb.focusForeground#FFDAB9
breadcrumb.foreground#FFDAB988
breadcrumbPicker.background#000000
button.background#000000
button.foreground#FFDAB9
button.hoverBackground#FFDAB988
checkbox.background#000000
checkbox.border#FFDAB988
checkbox.foreground#FFDAB9
debugConsole.errorForeground#FFDAB9
debugConsole.infoForeground#FFDAB9
debugConsole.sourceForeground#FFDAB9
debugConsole.warningForeground#FFDAB9
debugConsoleInputIcon.foreground#FFDAB9
debugExceptionWidget.background#000000
debugExceptionWidget.border#FFDAB988
debugIcon.breakpointCurrentStackframeForeground#FFDAB9
debugIcon.breakpointDisabledForeground#FFDAB933
debugIcon.breakpointForeground#FFDAB9
debugIcon.breakpointStackframeForeground#FFDAB9
debugIcon.breakpointUnverifiedForeground#FFDAB9
debugIcon.continueForeground#FFDAB9
debugIcon.disconnectForeground#FFDAB9
debugIcon.pauseForeground#FFDAB9
debugIcon.restartForeground#FFDAB9
debugIcon.startForeground#FFDAB9
debugIcon.stepBackForeground#FFDAB9
debugIcon.stepIntoForeground#FFDAB9
debugIcon.stepOutForeground#FFDAB9
debugIcon.stepOverForeground#FFDAB9
debugIcon.stopForeground#FFDAB9
debugTokenExpression.boolean#FFDAB9
debugTokenExpression.error#FFDAB9
debugTokenExpression.name#FFDAB9
debugTokenExpression.number#FFDAB9
debugTokenExpression.string#FFDAB9
debugTokenExpression.value#FFDAB9
debugToolBar.background#000000
debugToolBar.border#FFDAB988
debugView.exceptionLabelBackground#000000
debugView.exceptionLabelForeground#FFDAB9
debugView.stateLabelBackground#000000
debugView.stateLabelForeground#FFDAB9
debugView.valueChangedHighlight#FFDAB988
descriptionForeground#FFDAB9
diffEditor.border#FFDAB988
diffEditor.diagonalFill#FFDAB911
diffEditor.insertedTextBackground#FFDAB933
diffEditor.removedTextBackground#FFDAB933
dropdown.background#000000
dropdown.border#FFDAB988
dropdown.foreground#FFDAB9
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#FFDAB988
editor.findMatchBorder#FFDAB988
editor.findMatchHighlightBackground#000000
editor.findMatchHighlightBorder#FFDAB988
editor.findRangeHighlightBackground#000000
editor.findRangeHighlightBorder#FFDAB988
editor.focusedStackFrameHighlightBackground#000000
editor.foldBackground#000000
editor.foreground#FFDAB9
editor.hoverHighlightBackground#332c25ff
editor.inactiveSelectionBackground#000000
editor.lineHighlightBackground#FFDAB911
editor.rangeHighlightBackground#000000
editor.rangeHighlightBorder#FFDAB988
editor.selectionBackground#FFDAB933
editor.selectionForeground#FFDAB9
editor.selectionHighlightBackground#000000
editor.selectionHighlightBorder#FFDAB988
editor.snippetFinalTabstopHighlightBackground#000000
editor.snippetFinalTabstopHighlightBorder#FFDAB988
editor.snippetTabstopHighlightBackground#000000
editor.snippetTabstopHighlightBorder#FFDAB988
editor.stackFrameHighlightBackground#000000
editor.symbolHighlightBackground#FFDAB933
editor.symbolHighlightBorder#FFDAB988
editor.wordHighlightBackground#FFDAB933
editor.wordHighlightBorder#FFDAB988
editor.wordHighlightStrongBackground#FFDAB988
editor.wordHighlightStrongBorder#FFDAB988
editorBracketMatch.background#000000
editorBracketMatch.border#FFDAB988
editorCodeLens.foreground#FFDAB9
editorCursor.background#000000
editorCursor.foreground#FFDAB9
editorError.border#FFDAB988
editorError.foreground#FFDAB9
editorGroup.border#FFDAB988
editorGroup.dropBackground#FFDAB933
editorGroup.emptyBackground#000000
editorGroup.focusedEmptyBorder#FFDAB988
editorGroupHeader.border#FFDAB988
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#FFDAB988
editorGutter.addedBackground#FFDAB933
editorGutter.background#000000
editorGutter.commentRangeForeground#FFDAB933
editorGutter.deletedBackground#FFDAB933
editorGutter.foldingControlForeground#FFDAB988
editorGutter.modifiedBackground#FFDAB933
editorHint.border#FFDAB988
editorHint.foreground#FFDAB9
editorHoverWidget.background#332c25ff
editorHoverWidget.border#FFDAB988
editorHoverWidget.foreground#FFDAB9
editorHoverWidget.statusBarBackground#FFDAB933
editorIndentGuide.activeBackground#FFDAB933
editorIndentGuide.background#FFDAB911
editorInfo.border#FFDAB988
editorInfo.foreground#FFDAB9
editorLightBulb.foreground#FFDAB988
editorLightBulbAutoFix.foreground#FFDAB988
editorLineNumber.activeForeground#FFDAB9
editorLineNumber.foreground#FFDAB933
editorLink.activeForeground#FFDAB9
editorMarkerNavigation.background#FFDAB933
editorMarkerNavigationError.background#FFDAB933
editorMarkerNavigationInfo.background#FFDAB933
editorMarkerNavigationWarning.background#FFDAB933
editorOverviewRuler.addedForeground#FFDAB933
editorOverviewRuler.background#000000
editorOverviewRuler.border#FFDAB988
editorOverviewRuler.bracketMatchForeground#FFDAB933
editorOverviewRuler.commonContentForeground#FFDAB933
editorOverviewRuler.currentContentForeground#FFDAB933
editorOverviewRuler.deletedForeground#FFDAB933
editorOverviewRuler.errorForeground#FFDAB988
editorOverviewRuler.findMatchForeground#FFDAB933
editorOverviewRuler.incomingContentForeground#FFDAB933
editorOverviewRuler.infoForeground#FFDAB933
editorOverviewRuler.modifiedForeground#FFDAB933
editorOverviewRuler.rangeHighlightForeground#FFDAB933
editorOverviewRuler.selectionHighlightForeground#FFDAB933
editorOverviewRuler.warningForeground#FFDAB933
editorOverviewRuler.wordHighlightForeground#FFDAB933
editorOverviewRuler.wordHighlightStrongForeground#FFDAB933
editorPane.background#FFDAB933
editorRuler.foreground#FFDAB9
editorSuggestWidget.background#000000
editorSuggestWidget.border#FFDAB988
editorSuggestWidget.foreground#FFDAB9
editorSuggestWidget.highlightForeground#FFDAB9
editorSuggestWidget.selectedBackground#FFDAB988
editorUnnecessaryCode.border#FFDAB988
editorUnnecessaryCode.opacity#FFDAB933
editorWarning.border#FFDAB988
editorWarning.foreground#FFDAB9
editorWhitespace.foreground#FFDAB933
editorWidget.background#000000
editorWidget.border#FFDAB988
editorWidget.foreground#FFDAB9
editorWidget.resizeBorder#FFDAB988
errorForeground#FFDAB9
extensionBadge.remoteBackground#000000
extensionBadge.remoteForeground#FFDAB9
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#FFDAB9
extensionButton.prominentHoverBackground#000000
focusBorder#FFDAB988
foreground#FFDAB9
gitDecoration.addedResourceForeground#FFDAB9
gitDecoration.conflictingResourceForeground#FFDAB9
gitDecoration.deletedResourceForeground#FFDAB9
gitDecoration.ignoredResourceForeground#FFDAB988
gitDecoration.modifiedResourceForeground#FFDAB9
gitDecoration.submoduleResourceForeground#FFDAB9
gitDecoration.untrackedResourceForeground#FFDAB9
icon.foreground#FFDAB9
imagePreview.border#FFDAB988
input.background#000000
input.border#FFDAB988
input.foreground#FFDAB9
input.placeholderForeground#FFDAB988
inputOption.activeBackground#FFDAB933
inputOption.activeBorder#FFDAB988
inputOption.activeForeground#FFDAB988
inputValidation.errorBackground#000000
inputValidation.errorBorder#FFDAB988
inputValidation.errorForeground#FFDAB9
inputValidation.infoBackground#000000
inputValidation.infoBorder#FFDAB988
inputValidation.infoForeground#FFDAB9
inputValidation.warningBackground#000000
inputValidation.warningBorder#FFDAB988
inputValidation.warningForeground#FFDAB9
list.activeSelectionBackground#FFDAB9
list.activeSelectionForeground#000000
list.deemphasizedForeground#FFDAB988
list.dropBackground#FFDAB933
list.errorForeground#FFDAB9
list.filterMatchBackground#000000
list.filterMatchBorder#FFDAB988
list.focusBackground#FFDAB988
list.focusForeground#FFDAB9
list.highlightForeground#FFDAB9
list.hoverBackground#FFDAB988
list.hoverForeground#FFDAB9
list.inactiveFocusBackground#FFDAB933
list.inactiveSelectionBackground#FFDAB933
list.inactiveSelectionForeground#FFDAB9
list.invalidItemForeground#FFDAB9
list.warningForeground#FFDAB9
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#FFDAB988
listFilterWidget.outline#FFDAB9
menu.background#000000
menu.border#FFDAB988
menu.foreground#FFDAB9
menu.selectionBackground#FFDAB988
menu.selectionBorder#FFDAB988
menu.selectionForeground#000000
menu.separatorBackground#FFDAB988
menubar.selectionBackground#FFDAB933
menubar.selectionBorder#FFDAB988
menubar.selectionForeground#FFDAB9
merge.border#FFDAB988
merge.commonContentBackground#000000
merge.commonHeaderBackground#000000
merge.currentContentBackground#000000
merge.currentHeaderBackground#000000
merge.incomingContentBackground#000000
merge.incomingHeaderBackground#000000
minimap.background#000000
minimap.errorHighlight#FFDAB988
minimap.findMatchHighlight#FFDAB988
minimap.selectionHighlight#FFDAB988
minimap.warningHighlight#FFDAB988
minimapGutter.addedBackground#FFDAB933
minimapGutter.deletedBackground#FFDAB933
minimapGutter.modifiedBackground#FFDAB933
minimapSlider.activeBackground#FFDAB933
minimapSlider.background#FFDAB911
minimapSlider.hoverBackground#FFDAB911
notebook.cellBorderColor#FFDAB988
notebook.cellStatusBarItemHoverBackground#FFDAB911
notebook.cellToolbarSeperator#FFDAB988
notebook.focusedCellIndicator#FFDAB933
notebook.outputContainerBackgroundColor#000000
notebookStatusErrorIcon.foreground#ff0000
notebookStatusRunningIcon.foreground#ff0000
notebookStatusSuccessIcon.foreground#ff0000
notificationCenter.border#FFDAB988
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#FFDAB9
notificationLink.foreground#FFDAB9
notifications.background#000000
notifications.border#FFDAB988
notifications.foreground#FFDAB9
notificationsErrorIcon.foreground#FFDAB9
notificationsInfoIcon.foreground#FFDAB9
notificationsWarningIcon.foreground#FFDAB9
notificationToast.border#FFDAB988
panel.background#000000
panel.border#FFDAB988
panel.dropBorder#FFDAB9
panelInput.border#FFDAB988
panelSection.border#FFDAB988
panelSection.dropBackground#FFDAB911
panelSectionHeader.background#000000
panelSectionHeader.border#FFDAB988
panelSectionHeader.foreground#FFDAB9
panelTitle.activeBorder#FFDAB988
panelTitle.activeForeground#FFDAB9
panelTitle.inactiveForeground#FFDAB988
peekView.border#FFDAB988
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#000000
peekViewEditor.matchHighlightBorder#FFDAB988
peekViewEditorGutter.background#000000
peekViewResult.background#000000
peekViewResult.fileForeground#FFDAB9
peekViewResult.lineForeground#FFDAB9
peekViewResult.matchHighlightBackground#000000
peekViewResult.selectionBackground#000000
peekViewResult.selectionForeground#FFDAB9
peekViewTitle.background#000000
peekViewTitleDescription.foreground#FFDAB9
peekViewTitleLabel.foreground#FFDAB9
pickerGroup.border#FFDAB988
pickerGroup.foreground#FFDAB9
problemsErrorIcon.foreground#FFDAB9
problemsInfoIcon.foreground#FFDAB9
problemsWarningIcon.foreground#FFDAB9
progressBar.background#FFDAB988
quickInput.background#000000
quickInput.foreground#FFDAB9
quickInputTitle.background#000000
scrollbar.shadow#FFDAB933
scrollbarSlider.activeBackground#FFDAB933
scrollbarSlider.background#FFDAB933
scrollbarSlider.hoverBackground#FFDAB933
searchEditor.findMatchBackground#000000
searchEditor.findMatchBorder#FFDAB988
searchEditor.textInputBorder#FFDAB988
selection.background#FFDAB988
settings.checkboxBackground#000000
settings.checkboxBorder#FFDAB988
settings.checkboxForeground#FFDAB9
settings.dropdownBackground#000000
settings.dropdownBorder#FFDAB988
settings.dropdownForeground#FFDAB9
settings.dropdownListBorder#FFDAB988
settings.headerForeground#FFDAB9
settings.modifiedItemIndicator#FFDAB988
settings.numberInputBackground#000000
settings.numberInputBorder#FFDAB988
settings.numberInputForeground#FFDAB9
settings.textInputBackground#000000
settings.textInputBorder#FFDAB988
settings.textInputForeground#FFDAB9
sideBar.background#000000
sideBar.border#FFDAB988
sideBar.dropBackground#FFDAB933
sideBar.foreground#FFDAB9
sideBarSectionHeader.background#FFDAB933
sideBarSectionHeader.border#FFDAB988
sideBarSectionHeader.foreground#FFDAB9
sideBarTitle.foreground#FFDAB9
statusBar.background#FFDAB933
statusBar.border#FFDAB988
statusBar.debuggingBackground#FFDAB9
statusBar.debuggingBorder#FFDAB988
statusBar.debuggingForeground#000000
statusBar.foreground#FFDAB9
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#FFDAB988
statusBar.noFolderForeground#FFDAB9
statusBarItem.activeBackground#000000
statusBarItem.hoverBackground#000000
statusBarItem.prominentBackground#000000
statusBarItem.prominentForeground#FFDAB9
statusBarItem.prominentHoverBackground#000000
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#FFDAB9
symbolIcon.arrayForeground#FFDAB9
symbolIcon.booleanForeground#FFDAB9
symbolIcon.classForeground#FFDAB9
symbolIcon.colorForeground#FFDAB9
symbolIcon.constantForeground#FFDAB9
symbolIcon.constructorForeground#FFDAB9
symbolIcon.enumeratorForeground#FFDAB9
symbolIcon.enumeratorMemberForeground#FFDAB9
symbolIcon.eventForeground#FFDAB9
symbolIcon.fieldForeground#FFDAB9
symbolIcon.fileForeground#FFDAB9
symbolIcon.folderForeground#FFDAB9
symbolIcon.functionForeground#FFDAB9
symbolIcon.interfaceForeground#FFDAB9
symbolIcon.keyForeground#FFDAB9
symbolIcon.keywordForeground#FFDAB9
symbolIcon.methodForeground#FFDAB9
symbolIcon.moduleForeground#FFDAB9
symbolIcon.namespaceForeground#FFDAB9
symbolIcon.nullForeground#FFDAB9
symbolIcon.numberForeground#FFDAB9
symbolIcon.objectForeground#FFDAB9
symbolIcon.operatorForeground#FFDAB9
symbolIcon.packageForeground#FFDAB9
symbolIcon.propertyForeground#FFDAB9
symbolIcon.referenceForeground#FFDAB9
symbolIcon.snippetForeground#FFDAB9
symbolIcon.stringForeground#FFDAB9
symbolIcon.structForeground#FFDAB9
symbolIcon.textForeground#FFDAB9
symbolIcon.typeParameterForeground#FFDAB9
symbolIcon.unitForeground#FFDAB9
symbolIcon.variableForeground#FFDAB9
tab.activeBackground#FFDAB933
tab.activeBorder#000000
tab.activeBorderTop#000000
tab.activeForeground#FFDAB9
tab.activeModifiedBorder#FFDAB988
tab.border#000000
tab.hoverBackground#FFDAB933
tab.hoverBorder#FFDAB988
tab.hoverForeground#FFDAB988
tab.inactiveBackground#000000
tab.inactiveForeground#FFDAB988
tab.inactiveModifiedBorder#000000
tab.unfocusedActiveBackground#FFDAB933
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#000000
tab.unfocusedActiveForeground#FFDAB9
tab.unfocusedActiveModifiedBorder#000000
tab.unfocusedHoverBackground#FFDAB933
tab.unfocusedHoverBorder#000000
tab.unfocusedHoverForeground#FFDAB933
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#FFDAB988
tab.unfocusedInactiveModifiedBorder#000000
terminal.ansiBlack#ffdab9ff
terminal.ansiBlue#eecbadff
terminal.ansiBrightBlack#ffdab9ff
terminal.ansiBrightBlue#eecbadff
terminal.ansiBrightCyan#aa917bff
terminal.ansiBrightGreen#ccae94ff
terminal.ansiBrightMagenta#ddbda0ff
terminal.ansiBrightRed#bba088ff
terminal.ansiBrightWhite#887463ff
terminal.ansiBrightYellow#99836fff
terminal.ansiCyan#aa917bff
terminal.ansiGreen#ccae94ff
terminal.ansiMagenta#ddbda0ff
terminal.ansiRed#bba088ff
terminal.ansiWhite#887463ff
terminal.ansiYellow#99836fff
terminal.background#000000
terminal.border#FFDAB988
terminal.foreground#FFDAB9
terminal.selectionBackground#FFDAB933
terminalCursor.background#000000
terminalCursor.foreground#FFDAB9
textBlockQuote.background#000000
textBlockQuote.border#FFDAB988
textCodeBlock.background#000000
textLink.activeForeground#FFDAB9
textLink.foreground#FFDAB988
textPreformat.foreground#FFDAB9
textSeparator.foreground#FFDAB9
titleBar.activeBackground#000000
titleBar.activeForeground#FFDAB9
titleBar.border#FFDAB988
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#FFDAB9
tree.indentGuidesStroke#FFDAB988
walkThrough.embeddedEditorBackground#000000
welcomePage.background#000000
welcomePage.buttonBackground#000000
welcomePage.buttonHoverBackground#000000
widget.shadow#FFDAB933
window.activeBorder#FFDAB988
window.inactiveBorder#FFDAB933

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#FFDAB988	—
keyword, storage	#FFDAB988	—
entity, strong	—	bold
invalid	#FFDAB988	italic underline

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}!`;
}