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_YellowOrange

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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