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_GoldenRod

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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