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_MidnightBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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