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_Thistle

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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