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_BlueViolet

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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