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_Crimson

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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