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_DarkSlateBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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