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_DarkTurquoise

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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