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_SlateBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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