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_DarkSlateGray

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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