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_Navy

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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