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_Turquoise

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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