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.

GitHub

Color themes

VS Code preview

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

OhLED Themes (142-in-1) — OhLED_BurlyWood

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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