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_PaleGoldenRod

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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