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_MediumBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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