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_Chocolate

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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