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_Gainsboro

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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