Oxocarbon Theme

Name: Oxocarbon Theme
Author: Nyoom Engineering

Publisher: Nyoom EngineeringThemes in package: 9

Oxocarbon theme for VSCode

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Oxocarbon Theme — oxocarbon monochrom (compatibility)

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#a8a8a8
activityBar.background#1e1e1e
activityBar.border#393939
activityBar.dropBorder#393939
activityBar.foreground#f2f4f8
activityBarBadge.background#525252
activityBarBadge.foreground#f2f4f8
activityErrorBadge.background#8d8d8d
activityErrorBadge.foreground#ffffff
activityWarningBadge.background#8d8d8d
activityWarningBadge.foreground#ffffff
banner.background#1b1b1b
banner.foreground#dde1e6
button.background#393939
button.border#525252
button.foreground#f2f4f8
button.hoverBackground#525252
button.secondaryBackground#262626
button.secondaryForeground#dde1e6
button.secondaryHoverBackground#393939
chart.axis#262626
chart.guide#262626
chart.line#262626
charts.blue#a8a8a8
charts.foreground#f2f4f8
charts.green#a8a8a8
charts.lines#f2f4f8
charts.orange#c6c6c6
charts.purple#a8a8a8
charts.red#8d8d8d
charts.yellow#a8a8a8
checkbox.background#161616
checkbox.border#525252
checkbox.foreground#ffffff
checkbox.selectBackground#393939
checkbox.selectBorder#525252
debugConsole.errorForeground#8d8d8d
debugConsole.infoForeground#dde1e6
debugConsole.sourceForeground#c6c6c6
debugConsole.warningForeground#a8a8a8
debugConsoleInputIcon.foreground#a8a8a8
debugIcon.breakpointCurrentStackframeForeground#a8a8a8
debugIcon.breakpointDisabledForeground#525252
debugIcon.breakpointForeground#8d8d8d
debugIcon.breakpointStackframeForeground#a8a8a8
debugIcon.breakpointUnverifiedForeground#a8a8a8
debugIcon.continueForeground#ffffff
debugIcon.disconnectForeground#c1c7cd
debugIcon.pauseForeground#ffffff
debugIcon.restartForeground#ffffff
debugIcon.startForeground#ffffff
debugIcon.stepBackForeground#ffffff
debugIcon.stepIntoForeground#ffffff
debugIcon.stepOutForeground#ffffff
debugIcon.stepOverForeground#ffffff
debugIcon.stopForeground#ffffff
diffEditor.diagonalFill#525252
diffEditor.insertedLineBackground#a8a8a820
diffEditor.insertedTextBackground#a8a8a840
diffEditor.moveActive.border#a8a8a8
diffEditor.removedLineBackground#8d8d8d20
diffEditor.removedTextBackground#8d8d8d40
diffEditorGutter.insertedLineBackground#a8a8a820
diffEditorGutter.removedLineBackground#8d8d8d20
disabledForeground#8d8d8d
dropdown.background#393939
dropdown.border#393939
dropdown.foreground#f2f4f8
editor.background#161616
editor.findMatchBackground#c6c6c640
editor.findMatchForeground#f2f4f8
editor.findMatchHighlightBackground#a8a8a840
editor.findMatchHighlightForeground#ffffff
editor.foreground#f2f4f8
editor.hoverHighlightBackground#39393999
editor.inactiveSelectionBackground#39393920
editor.linkedEditingBackground#a8a8a830
editor.placeholder.foreground#dde1e6
editor.selectionBackground#393939
editor.selectionForeground#f2f4f8
editor.selectionHighlightBackground#52525240
editor.snippetFinalTabstopHighlightBackground#525252
editor.snippetFinalTabstopHighlightBorder#8d8d8d
editor.snippetTabstopHighlightBackground#393939
editor.snippetTabstopHighlightBorder#a8a8a8
editor.wordHighlightBackground#26262630
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#39393930
editorBracketHighlight.foreground1#8d8d8d
editorBracketHighlight.foreground2#6f6f6f
editorBracketHighlight.foreground3#8d8d8d
editorBracketHighlight.foreground4#6f6f6f
editorBracketHighlight.foreground5#8d8d8d
editorBracketHighlight.foreground6#6f6f6f
editorBracketHighlight.unexpectedBracket.foreground#8d8d8d
editorBracketMatch.background#00000000
editorCursor.foreground#ffffff
editorError.background#00000000
editorError.foreground#8d8d8d
editorGhostText.background#00000000
editorGhostText.border#262626
editorGhostText.foreground#525252
editorGroup.border#262626
editorGroup.dropBackground#39393940
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#1e1e1e
editorGroupHeader.tabsBorder#262626
editorGutter.addedBackground#a8a8a8
editorGutter.background#131313
editorGutter.deletedBackground#8d8d8d
editorGutter.foldingControlForeground#525252
editorGutter.modifiedBackground#a8a8a8
editorHint.foreground#dde1e6
editorHoverWidget.background#1b1b1b
editorHoverWidget.border#262626
editorHoverWidget.foreground#dde1e6
editorInfo.background#00000000
editorInfo.foreground#a8a8a8
editorInlayHint.background#262626ff
editorInlayHint.foreground#ada8a8
editorLightBulb.foreground#ffffff
editorLightBulbAutoFix.foreground#f2f4f8
editorLineNumber.activeForeground#dde1e6
editorLineNumber.foreground#525252
editorLink.activeForeground#a8a8a8
editorMarkerNavigation.background#1b1b1b
editorMarkerNavigationError.background#8d8d8d
editorMarkerNavigationInfo.background#a8a8a8
editorMarkerNavigationWarning.background#a8a8a8
editorOverviewRuler.addedForeground#a8a8a8
editorOverviewRuler.background#00000000
editorOverviewRuler.border#262626
editorOverviewRuler.bracketMatchForeground#6f6f6f
editorOverviewRuler.currentContentForeground#a8a8a8
editorOverviewRuler.deletedForeground#8d8d8d
editorOverviewRuler.errorForeground#8d8d8d
editorOverviewRuler.findMatchForeground#c6c6c699
editorOverviewRuler.incomingContentForeground#a8a8a8
editorOverviewRuler.infoForeground#a8a8a8
editorOverviewRuler.inlineChatInserted#a8a8a8
editorOverviewRuler.inlineChatRemoved#8d8d8d
editorOverviewRuler.modifiedForeground#a8a8a8
editorOverviewRuler.rangeHighlightForeground#39393999
editorOverviewRuler.selectionHighlightForeground#52525220
editorOverviewRuler.warningForeground#a8a8a8
editorOverviewRuler.wordHighlightStrongForeground#52525240
editorRuler.foreground#262626
editorStickyScroll.border#262626
editorStickyScroll.shadow#00000080
editorStickyScrollHover.background#393939
editorSuggestWidget.background#1b1b1b
editorSuggestWidget.border#00000000
editorSuggestWidget.focusHighlightForeground#a8a8a8
editorSuggestWidget.foreground#dde1e6
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#393939
editorSuggestWidget.selectedForeground#ffffff
editorSuggestWidget.selectedIconForeground#ffffff
editorWarning.background#00000000
editorWarning.foreground#a8a8a8
editorWidget.background#1e1e1e
editorWidget.border#262626
editorWidget.foreground#f2f4f8
editorWidget.resizeBorder#2f2f2f
errorForeground#8d8d8d
extensionBadge.remoteBackground#0f62fe
extensionBadge.remoteForeground#ffffff
extensionButton.background#393939
extensionButton.foreground#f2f4f8
extensionButton.hoverBackground#525252
extensionButton.prominentBackground#262626
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#525252
extensionButton.separator#00000000
extensionIcon.preReleaseForeground#c6c6c6
extensionIcon.privateForeground#a8a8a8
extensionIcon.sponsorForeground#a8a8a8
extensionIcon.starForeground#f1c21b
extensionIcon.verifiedForeground#a8a8a8
focusBorder#262626
foreground#f2f4f8
gauge.background#262626
gauge.border#393939
gauge.errorBackground#262626
gauge.errorForeground#8d8d8d
gauge.foreground#a8a8a8
gauge.warningBackground#262626
gauge.warningForeground#a8a8a8
gitDecoration.addedResourceForeground#a8a8a8
gitDecoration.deletedResourceForeground#8d8d8d
gitDecoration.ignoredResourceForeground#8d8d8d
gitDecoration.modifiedResourceForeground#a8a8a8
gitDecoration.renamedResourceForeground#c6c6c6
gitDecoration.stageDeletedResourceForeground#8d8d8d
gitDecoration.stageModifiedResourceForeground#a8a8a8
gitDecoration.untrackedResourceForeground#c1c7cd
icon.foreground#f2f4f8
input.background#262626
input.foreground#dde1e6
input.placeholderForeground#dde1e6
inputOption.activeBackground#52525290
inputOption.activeBorder#525252
inputOption.activeForeground#ffffff
inputOption.hoverBackground#52525290
inputValidation.errorBorder#8d8d8d
inputValidation.infoBackground#262626
inputValidation.infoBorder#a8a8a8
inputValidation.warningBackground#393939
inputValidation.warningBorder#a8a8a8
keybindingLabel.background#262626
keybindingLabel.border#525252
keybindingLabel.foreground#dde1e6
list.activeSelectionBackground#393939
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.deemphasizedForeground#6f6f6f
list.dropBackground#52525240
list.dropBetweenBackground#525252
list.errorForeground#8d8d8d
list.filterMatchBackground#a8a8a850
list.filterMatchBorder#a8a8a800
list.focusAndSelectionOutline#262626
list.focusBackground#393939
list.focusForeground#ffffff
list.focusHighlightForeground#a8a8a8
list.focusOutline#262626
list.highlightForeground#ffffff
list.hoverBackground#393939
list.hoverForeground#ffffff
list.inactiveFocusBackground#262626
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#dde1e6
list.inactiveSelectionIconForeground#dde1e6
list.invalidItemForeground#8d8d8d
list.warningForeground#a8a8a8
listFilterWidget.background#262626
listFilterWidget.noMatchesOutline#8d8d8d
listFilterWidget.outline#525252
listFilterWidget.shadow#00000080
menu.background#262626
menu.border#393939
menu.foreground#dde1e6
menu.selectionBackground#393939
menu.selectionForeground#ffffff
menu.separatorBackground#393939
menubar.selectionBackground#39393940
menubar.selectionBorder#393939
menubar.selectionForeground#ffffff
merge.currentContentBackground#a8a8a820
merge.currentHeaderBackground#a8a8a860
merge.incomingContentBackground#a8a8a820
merge.incomingHeaderBackground#a8a8a860
minimap.errorHighlight#8d8d8d50
minimap.findMatchHighlight#8d8d8d50
minimap.infoHighlight#dde1e650
minimap.selectionHighlight#39393950
minimap.warningHighlight#a8a8a850
minimapGutter.addedBackground#a8a8a820
minimapGutter.deletedBackground#8d8d8d20
minimapGutter.modifiedBackground#a8a8a820
minimapSlider.activeBackground#52525255
minimapSlider.background#52525233
minimapSlider.hoverBackground#52525244
notebook.cellBorderColor#262626
notebook.cellEditorBackground#1b1b1b
notebook.cellStatusBarItemHoverBackground#393939
notebook.focusedCellBorder#a8a8a8
notebook.outputContainerBackgroundColor#181818
notificationCenterHeader.background#262626
notifications.background#262626
notificationsErrorIcon.foreground#8d8d8d
notificationsInfoIcon.foreground#a8a8a8
notificationsWarningIcon.foreground#a8a8a8
panel.background#1e1e1e
panel.border#2f2f2f
panelSection.border#262626
panelSection.dropBackground#39393940
panelTitle.activeBorder#a8a8a8
panelTitle.activeForeground#ffffff
panelTitle.border#00000000
peekView.border#262626
peekViewEditor.background#1b1b1b
peekViewEditor.matchHighlightBackground#525252
peekViewResult.background#212121
peekViewResult.lineForeground#dde1e6
peekViewResult.matchHighlightBackground#393939
peekViewResult.selectionBackground#393939
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#393939
peekViewTitleDescription.foreground#f2f4f8
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#393939
pickerGroup.foreground#a8a8a8
problemsErrorIcon.foreground#8d8d8d
problemsInfoIcon.foreground#a8a8a8
problemsWarningIcon.foreground#a8a8a8
progressBar.background#a8a8a8
sash.hoverBorder#525252
scmGraph.foreground1#a8a8a8
scmGraph.foreground2#c6c6c6
scmGraph.foreground3#8d8d8d
scmGraph.foreground4#a8a8a8
scmGraph.foreground5#a8a8a8
scmGraph.historyItemBaseRefColor#a8a8a8
scmGraph.historyItemHoverAdditionsForeground#a8a8a8
scmGraph.historyItemHoverDefaultLabelBackground#393939
scmGraph.historyItemHoverDefaultLabelForeground#f2f4f8
scmGraph.historyItemHoverDeletionsForeground#8d8d8d
scmGraph.historyItemHoverLabelForeground#161616
scmGraph.historyItemRefColor#a8a8a8
scmGraph.historyItemRemoteRefColor#a8a8a8
selection.background#525252
settings.modifiedItemIndicator#a8a8a8
sideBar.background#1e1e1e
sideBar.border#2f2f2f
sideBar.dropBackground#36363640
sideBarSectionHeader.background#393939
sideBarTitle.foreground#ffffff
simpleFindWidget.sashBorder#262626
statusBar.background#1e1e1e
statusBar.border#393939
statusBar.debuggingBackground#0f62fe
statusBar.debuggingForeground#ffffff
statusBar.foreground#dde1e6
statusBar.noFolderBackground#0f62fe
statusBar.noFolderForeground#ffffff
statusBarItem.errorBackground#00000000
statusBarItem.errorForeground#8d8d8d
statusBarItem.remoteBackground#0f62fe
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#00000000
statusBarItem.warningForeground#8d8d8d
symbolIcon.arrayForeground#ffffff
symbolIcon.booleanForeground#ffffff
symbolIcon.classForeground#ffffff
symbolIcon.colorForeground#ffffff
symbolIcon.constantForeground#ffffff
symbolIcon.constructorForeground#ffffff
symbolIcon.enumeratorForeground#ffffff
symbolIcon.enumeratorMemberForeground#ffffff
symbolIcon.eventForeground#ffffff
symbolIcon.fieldForeground#ffffff
symbolIcon.fileForeground#ffffff
symbolIcon.folderForeground#ffffff
symbolIcon.functionForeground#ffffff
symbolIcon.interfaceForeground#ffffff
symbolIcon.keyForeground#ffffff
symbolIcon.keywordForeground#ffffff
symbolIcon.methodForeground#ffffff
symbolIcon.moduleForeground#ffffff
symbolIcon.namespaceForeground#ffffff
symbolIcon.nullForeground#ffffff
symbolIcon.numberForeground#ffffff
symbolIcon.objectForeground#ffffff
symbolIcon.operatorForeground#ffffff
symbolIcon.packageForeground#ffffff
symbolIcon.propertyForeground#ffffff
symbolIcon.referenceForeground#ffffff
symbolIcon.snippetForeground#ffffff
symbolIcon.stringForeground#ffffff
symbolIcon.structForeground#ffffff
symbolIcon.textForeground#ffffff
symbolIcon.typeParameterForeground#ffffff
symbolIcon.unitForeground#ffffff
symbolIcon.variableForeground#ffffff
tab.activeBackground#161616
tab.activeBorder#161616
tab.activeBorderTop#a8a8a8
tab.activeForeground#ffffff
tab.activeModifiedBorder#a8a8a8
tab.border#2f2f2f
tab.dragAndDropBorder#a8a8a8
tab.hoverBackground#262626
tab.inactiveBackground#1e1e1e
tab.inactiveForeground#8d8d8d
tab.inactiveModifiedBorder#a8a8a860
tab.unfocusedActiveBorder#161616
tab.unfocusedActiveBorderTop#262626
tab.unfocusedActiveModifiedBorder#a8a8a860
tab.unfocusedInactiveForeground#8d8d8d
tab.unfocusedInactiveModifiedBorder#a8a8a840
terminal.ansiBlack#161616
terminal.ansiBlue#a8a8a8
terminal.ansiBrightBlack#525252
terminal.ansiBrightBlue#a8a8a8
terminal.ansiBrightCyan#a8a8a8
terminal.ansiBrightGreen#a8a8a8
terminal.ansiBrightMagenta#c6c6c6
terminal.ansiBrightRed#a8a8a8
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#a8a8a8
terminal.ansiCyan#a8a8a8
terminal.ansiGreen#a8a8a8
terminal.ansiMagenta#c6c6c6
terminal.ansiRed#a8a8a8
terminal.ansiWhite#dde1e6
terminal.ansiYellow#a8a8a8
terminal.background#161616
terminal.border#262626
terminal.findMatchBackground#c6c6c699
terminal.findMatchBorder#00000000
terminal.findMatchHighlightBackground#39393999
terminal.findMatchHighlightBorder#39393999
terminal.foreground#ffffff
terminal.hoverHighlightBackground#39393999
terminal.inactiveSelectionBackground#39393940
terminal.selectionBackground#393939
terminal.selectionForeground#ffffff
terminalCommandDecoration.defaultBackground#262626
terminalCommandDecoration.errorBackground#8d8d8d
terminalCommandDecoration.successBackground#c6c6c6
terminalCursor.background#161616
terminalCursor.foreground#ffffff
testing.iconErrored#8d8d8d
testing.iconFailed#8d8d8d
testing.iconPassed#a8a8a8
testing.iconSkipped#a8a8a8
testing.runAction#a8a8a8
textBlockQuote.background#1b1b1b
textBlockQuote.border#a8a8a8
textCodeBlock.background#1b1b1b
textLink.activeForeground#a8a8a8
textLink.foreground#a8a8a8
textPreformat.background#262626
textPreformat.foreground#f2f4f8
titleBar.activeBackground#393939
titleBar.activeForeground#ffffff
titleBar.border#393939
titleBar.inactiveBackground#262626
titleBar.inactiveForeground#8d8d8d
tree.inactiveIndentGuidesStroke#262626
tree.indentGuidesStroke#525252
tree.tableColumnsBorder#262626
tree.tableOddRowsBackground#212121
welcomePage.progress.background#393939
welcomePage.progress.foreground#525252
widget.border#262626
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6f6f6f	—
entity	#dde1e6	—
storage.modifier.package, storage.modifier.import	#f2f4f8	—
variable	#ffffff	—
support	#a8a8a8	—
storage.type, keyword.other.fn, keyword.operator, punctuation.separator, punctuation.definition.tag, punctuation.definition.list, variable.other.constant.singlequote, variable.other.constant.backquote, variable.other.constant.sharpsign	#c6c6c6	—
keyword	#a8a8a8	—
storage.modifier, keyword.other	#a8a8a8	—
entity.name.command, entity.name.function, support.function, storage.type.function.m.nosideeffects	#a8a8a8	—
string, punctuation.definition.string	#a8a8a8	—
constant	#c6c6c6	—
entity.name.function, variable.other.definition	#ffffff	bold
storage.type, variable.parameter	#f2f4f8	italic
keyword.control.directive, punctuation.definition.directive	#a8a8a8	—
storage.type.rust	#a8a8a8	—
entity.name.import.go	#a8a8a8	—
support.function.f.sideeffects	#8d8d8d	—
entity.name.type.module.verilog	#8d8d8d	—
entity.name.tag.module.identifier	#a8a8a8	—
entity.name.tag.module.reference	#ffffff	bold
entity.name.section.markdown, markup.inline.raw.string.markdown	#ffffff	bold
punctuation.definition.heading.markdown	#a8a8a8	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#a8a8a8	—
title	#ffffff	—
label	#ffffff	—
entity.other.attribute-name	#f2f4f8	—
markup.bold	#ffffff	bold
markup.italic	#f2f4f8	italic
markup.underline.link	#a8a8a8	underline
meta.embedded	#c6c6c6	—
constant.language	#c6c6c6	—
variable.member	#a8a8a8	—
preproc	#a8a8a8	—
punctuation	#f2f4f8	—
punctuation.definition.comment	#6f6f6f	—

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}!`;
}