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_Peru

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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