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_NavajoWhite

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#FFDEAD88	—
keyword, storage	#FFDEAD88	—
entity, strong	—	bold
invalid	#FFDEAD88	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}!`;
}