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_Wheat

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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