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_SandyBrown

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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