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_Maroon

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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