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_DarkSeaGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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