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_Orchid

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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