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_SaddleBrown

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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