Nothing OS Theme

Name: Nothing OS Theme
Author: xexefe

Publisher: xexefeThemes in package: 5

A minimal, high-contrast theme inspired by Nothing OS design language with signature red accents and dot-matrix aesthetics

GitHub

Color themes

VS Code preview

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

Nothing OS Theme — Nothing OS Dark

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.activeBackground#1A1A1A
activityBar.activeBorder#D71921
activityBar.background#000000
activityBar.border#1A1A1A
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#666666
activityBarBadge.background#D71921
activityBarBadge.foreground#FFFFFF
badge.background#D71921
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#FFFFFF
breadcrumb.foreground#888888
breadcrumbPicker.background#0A0A0A
button.background#D71921
button.border#D71921
button.foreground#FFFFFF
button.hoverBackground#FF2D35
button.secondaryBackground#1A1A1A
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#2A2A2A
charts.blue#888888
charts.foreground#FFFFFF
charts.green#50FA7B
charts.lines#666666
charts.orange#FF6600
charts.purple#AA88FF
charts.red#D71921
charts.yellow#FFAA00
checkbox.background#0A0A0A
checkbox.border#333333
checkbox.foreground#FFFFFF
commandCenter.activeBackground#1A1A1A
commandCenter.activeBorder#D71921
commandCenter.activeForeground#FFFFFF
commandCenter.background#0A0A0A
commandCenter.border#333333
commandCenter.foreground#888888
debugConsole.errorForeground#D71921
debugConsole.infoForeground#888888
debugConsole.sourceForeground#CCCCCC
debugConsole.warningForeground#FFAA00
debugConsoleInputIcon.foreground#D71921
debugExceptionWidget.background#0A0A0A
debugExceptionWidget.border#D71921
debugIcon.breakpointCurrentStackframeForeground#D71921
debugIcon.breakpointDisabledForeground#666666
debugIcon.breakpointForeground#D71921
debugIcon.breakpointStackframeForeground#888888
debugIcon.breakpointUnverifiedForeground#888888
debugIcon.continueForeground#50FA7B
debugIcon.disconnectForeground#D71921
debugIcon.pauseForeground#FFAA00
debugIcon.restartForeground#50FA7B
debugIcon.startForeground#50FA7B
debugIcon.stepBackForeground#FFFFFF
debugIcon.stepIntoForeground#FFFFFF
debugIcon.stepOutForeground#FFFFFF
debugIcon.stepOverForeground#FFFFFF
debugIcon.stopForeground#D71921
debugToolBar.background#0A0A0A
debugToolBar.border#333333
descriptionForeground#888888
diffEditor.diagonalFill#1A1A1A
diffEditor.insertedTextBackground#50FA7B20
diffEditor.removedTextBackground#D7192120
dropdown.background#0A0A0A
dropdown.border#333333
dropdown.foreground#FFFFFF
dropdown.listBackground#0A0A0A
editor.background#000000
editor.findMatchBackground#D7192150
editor.findMatchHighlightBackground#D7192130
editor.findRangeHighlightBackground#D7192120
editor.foreground#FFFFFF
editor.hoverHighlightBackground#D7192120
editor.inactiveSelectionBackground#D7192120
editor.lineHighlightBackground#0A0A0A
editor.lineHighlightBorder#1A1A1A
editor.rangeHighlightBackground#D7192115
editor.selectionBackground#D7192133
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#D7192120
editor.snippetFinalTabstopHighlightBackground#D7192150
editor.snippetFinalTabstopHighlightBorder#D71921
editor.snippetTabstopHighlightBackground#D7192133
editor.wordHighlightBackground#D7192120
editor.wordHighlightStrongBackground#D7192133
editorBracketHighlight.foreground1#D71921
editorBracketHighlight.foreground2#FFFFFF
editorBracketHighlight.foreground3#888888
editorBracketHighlight.foreground4#D71921
editorBracketHighlight.foreground5#FFFFFF
editorBracketHighlight.foreground6#888888
editorBracketHighlight.unexpectedBracket.foreground#D71921
editorBracketMatch.background#D7192133
editorBracketMatch.border#D71921
editorCodeLens.foreground#666666
editorCursor.background#000000
editorCursor.foreground#D71921
editorError.foreground#D71921
editorGroup.border#1A1A1A
editorGroup.dropBackground#D7192133
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#1A1A1A
editorGutter.addedBackground#50FA7B
editorGutter.deletedBackground#D71921
editorGutter.foldingControlForeground#666666
editorGutter.modifiedBackground#FFAA00
editorHint.foreground#888888
editorHoverWidget.background#0A0A0A
editorHoverWidget.border#333333
editorHoverWidget.foreground#CCCCCC
editorIndentGuide.activeBackground1#333333
editorIndentGuide.background1#1A1A1A
editorInfo.foreground#666666
editorLineNumber.activeForeground#D71921
editorLineNumber.foreground#444444
editorLink.activeForeground#D71921
editorMarkerNavigation.background#0A0A0A
editorMarkerNavigationError.background#D71921
editorMarkerNavigationInfo.background#666666
editorMarkerNavigationWarning.background#FFAA00
editorOverviewRuler.addedForeground#50FA7B
editorOverviewRuler.border#1A1A1A
editorOverviewRuler.bracketMatchForeground#D71921
editorOverviewRuler.deletedForeground#D71921
editorOverviewRuler.errorForeground#D71921
editorOverviewRuler.findMatchForeground#D71921
editorOverviewRuler.infoForeground#666666
editorOverviewRuler.modifiedForeground#FFAA00
editorOverviewRuler.rangeHighlightForeground#D7192180
editorOverviewRuler.selectionHighlightForeground#D7192180
editorOverviewRuler.warningForeground#FFAA00
editorOverviewRuler.wordHighlightForeground#D7192180
editorOverviewRuler.wordHighlightStrongForeground#D71921
editorRuler.foreground#1A1A1A
editorSuggestWidget.background#0A0A0A
editorSuggestWidget.border#333333
editorSuggestWidget.focusHighlightForeground#D71921
editorSuggestWidget.foreground#CCCCCC
editorSuggestWidget.highlightForeground#D71921
editorSuggestWidget.selectedBackground#D7192133
editorWarning.foreground#FFAA00
editorWhitespace.foreground#333333
editorWidget.background#0A0A0A
editorWidget.border#333333
editorWidget.foreground#FFFFFF
errorForeground#D71921
extensionBadge.remoteBackground#D71921
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#D71921
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#FF2D35
extensionIcon.starForeground#FFAA00
focusBorder#D71921
foreground#FFFFFF
gitDecoration.addedResourceForeground#50FA7B
gitDecoration.conflictingResourceForeground#FFAA00
gitDecoration.deletedResourceForeground#D71921
gitDecoration.ignoredResourceForeground#444444
gitDecoration.modifiedResourceForeground#FFAA00
gitDecoration.renamedResourceForeground#50FA7B
gitDecoration.stageDeletedResourceForeground#D71921
gitDecoration.stageModifiedResourceForeground#FFAA00
gitDecoration.submoduleResourceForeground#888888
gitDecoration.untrackedResourceForeground#50FA7B
icon.foreground#CCCCCC
input.background#0A0A0A
input.border#333333
input.foreground#FFFFFF
input.placeholderForeground#666666
inputOption.activeBackground#D7192133
inputOption.activeBorder#D71921
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#0A0A0A
inputValidation.errorBorder#D71921
inputValidation.infoBackground#0A0A0A
inputValidation.infoBorder#666666
inputValidation.warningBackground#0A0A0A
inputValidation.warningBorder#FFAA00
keybindingLabel.background#1A1A1A
keybindingLabel.border#333333
keybindingLabel.bottomBorder#333333
keybindingLabel.foreground#FFFFFF
keybindingTable.headerBackground#0A0A0A
keybindingTable.rowsBackground#000000
list.activeSelectionBackground#D7192133
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.dropBackground#D7192133
list.errorForeground#D71921
list.focusBackground#D7192133
list.focusForeground#FFFFFF
list.focusOutline#D71921
list.highlightForeground#D71921
list.hoverBackground#1A1A1A
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#1A1A1A
list.inactiveSelectionForeground#FFFFFF
list.invalidItemForeground#D71921
list.warningForeground#FFAA00
listFilterWidget.background#0A0A0A
listFilterWidget.noMatchesOutline#D71921
listFilterWidget.outline#333333
menu.background#0A0A0A
menu.border#333333
menu.foreground#CCCCCC
menu.selectionBackground#D7192133
menu.selectionForeground#FFFFFF
menu.separatorBackground#333333
menubar.selectionBackground#1A1A1A
menubar.selectionForeground#FFFFFF
merge.border#333333
merge.commonContentBackground#33333330
merge.commonHeaderBackground#33333350
merge.currentContentBackground#50FA7B20
merge.currentHeaderBackground#50FA7B40
merge.incomingContentBackground#D7192120
merge.incomingHeaderBackground#D7192140
minimap.background#000000
minimap.errorHighlight#D71921
minimap.findMatchHighlight#D7192180
minimap.selectionHighlight#D7192150
minimap.warningHighlight#FFAA00
minimapGutter.addedBackground#50FA7B
minimapGutter.deletedBackground#D71921
minimapGutter.modifiedBackground#FFAA00
minimapSlider.activeBackground#D7192150
minimapSlider.background#33333333
minimapSlider.hoverBackground#33333366
notificationCenter.border#333333
notificationCenterHeader.background#0A0A0A
notificationCenterHeader.foreground#FFFFFF
notificationLink.foreground#D71921
notifications.background#0A0A0A
notifications.border#333333
notifications.foreground#CCCCCC
notificationsErrorIcon.foreground#D71921
notificationsInfoIcon.foreground#888888
notificationsWarningIcon.foreground#FFAA00
notificationToast.border#333333
panel.background#000000
panel.border#1A1A1A
panel.dropBorder#D71921
panelInput.border#333333
panelSection.border#1A1A1A
panelSection.dropBackground#D7192133
panelSectionHeader.background#0A0A0A
panelSectionHeader.border#1A1A1A
panelSectionHeader.foreground#FFFFFF
panelTitle.activeBorder#D71921
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#666666
peekView.border#D71921
peekViewEditor.background#0A0A0A
peekViewEditor.matchHighlightBackground#D7192150
peekViewEditorGutter.background#0A0A0A
peekViewResult.background#000000
peekViewResult.fileForeground#FFFFFF
peekViewResult.lineForeground#CCCCCC
peekViewResult.matchHighlightBackground#D7192150
peekViewResult.selectionBackground#D7192133
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#0A0A0A
peekViewTitleDescription.foreground#888888
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#D71921
quickInput.background#0A0A0A
quickInput.foreground#FFFFFF
quickInputList.focusBackground#D7192133
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#0A0A0A
scrollbar.shadow#00000050
scrollbarSlider.activeBackground#D7192180
scrollbarSlider.background#33333380
scrollbarSlider.hoverBackground#44444480
selection.background#D7192133
settings.checkboxBackground#0A0A0A
settings.checkboxBorder#333333
settings.checkboxForeground#FFFFFF
settings.dropdownBackground#0A0A0A
settings.dropdownBorder#333333
settings.dropdownForeground#FFFFFF
settings.dropdownListBorder#333333
settings.focusedRowBackground#0A0A0A
settings.focusedRowBorder#D71921
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#D71921
settings.numberInputBackground#0A0A0A
settings.numberInputBorder#333333
settings.numberInputForeground#FFFFFF
settings.textInputBackground#0A0A0A
settings.textInputBorder#333333
settings.textInputForeground#FFFFFF
sideBar.background#000000
sideBar.border#1A1A1A
sideBar.dropBackground#D7192133
sideBar.foreground#CCCCCC
sideBarSectionHeader.background#0A0A0A
sideBarSectionHeader.border#1A1A1A
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#000000
statusBar.border#1A1A1A
statusBar.debuggingBackground#D71921
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#888888
statusBar.noFolderBackground#0A0A0A
statusBar.noFolderForeground#888888
statusBarItem.activeBackground#D7192133
statusBarItem.errorBackground#D71921
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#1A1A1A
statusBarItem.prominentBackground#D71921
statusBarItem.prominentForeground#FFFFFF
statusBarItem.prominentHoverBackground#FF2D35
statusBarItem.remoteBackground#D71921
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#FFAA00
statusBarItem.warningForeground#000000
symbolIcon.arrayForeground#FFFFFF
symbolIcon.booleanForeground#D71921
symbolIcon.classForeground#FFFFFF
symbolIcon.colorForeground#D71921
symbolIcon.constantForeground#D71921
symbolIcon.constructorForeground#FFFFFF
symbolIcon.enumeratorForeground#FFFFFF
symbolIcon.enumeratorMemberForeground#CCCCCC
symbolIcon.eventForeground#D71921
symbolIcon.fieldForeground#CCCCCC
symbolIcon.fileForeground#888888
symbolIcon.folderForeground#888888
symbolIcon.functionForeground#FFFFFF
symbolIcon.interfaceForeground#CCCCCC
symbolIcon.keyForeground#D71921
symbolIcon.keywordForeground#D71921
symbolIcon.methodForeground#FFFFFF
symbolIcon.moduleForeground#888888
symbolIcon.namespaceForeground#888888
symbolIcon.nullForeground#666666
symbolIcon.numberForeground#D71921
symbolIcon.objectForeground#CCCCCC
symbolIcon.operatorForeground#888888
symbolIcon.packageForeground#888888
symbolIcon.propertyForeground#CCCCCC
symbolIcon.referenceForeground#888888
symbolIcon.snippetForeground#888888
symbolIcon.stringForeground#CCCCCC
symbolIcon.structForeground#FFFFFF
symbolIcon.textForeground#CCCCCC
symbolIcon.typeParameterForeground#CCCCCC
symbolIcon.unitForeground#D71921
symbolIcon.variableForeground#FFFFFF
tab.activeBackground#0A0A0A
tab.activeBorder#0A0A0A
tab.activeBorderTop#D71921
tab.activeForeground#FFFFFF
tab.border#1A1A1A
tab.hoverBackground#1A1A1A
tab.hoverForeground#FFFFFF
tab.inactiveBackground#000000
tab.inactiveForeground#666666
tab.unfocusedActiveBackground#0A0A0A
tab.unfocusedActiveForeground#CCCCCC
tab.unfocusedInactiveForeground#666666
terminal.ansiBlack#000000
terminal.ansiBlue#666666
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#888888
terminal.ansiBrightCyan#CCCCCC
terminal.ansiBrightGreen#50FA7B
terminal.ansiBrightMagenta#D71921
terminal.ansiBrightRed#FF2D35
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFAA00
terminal.ansiCyan#AAAAAA
terminal.ansiGreen#50FA7B
terminal.ansiMagenta#D71921
terminal.ansiRed#D71921
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#FFAA00
terminal.background#000000
terminal.border#1A1A1A
terminal.foreground#FFFFFF
terminal.selectionBackground#D7192133
terminal.tab.activeBorder#D71921
terminalCursor.background#000000
terminalCursor.foreground#D71921
testing.iconErrored#D71921
testing.iconFailed#D71921
testing.iconPassed#50FA7B
testing.iconQueued#888888
testing.iconSkipped#666666
testing.iconUnset#666666
testing.runAction#50FA7B
textBlockQuote.background#0A0A0A
textBlockQuote.border#D71921
textCodeBlock.background#0A0A0A
textLink.activeForeground#FFFFFF
textLink.foreground#D71921
textPreformat.foreground#CCCCCC
textSeparator.foreground#333333
titleBar.activeBackground#000000
titleBar.activeForeground#FFFFFF
titleBar.border#1A1A1A
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#666666
tree.indentGuidesStroke#333333
tree.tableColumnsBorder#333333
walkThrough.embeddedEditorBackground#0A0A0A
welcomePage.background#000000
welcomePage.tileBackground#0A0A0A
welcomePage.tileBorder#333333
welcomePage.tileHoverBackground#1A1A1A
widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#555555	italic
string, string.quoted, string.template, string.interpolated	#AAAAAA	—
constant.character.escape, string.regexp	#D71921	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary	#D71921	—
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#D71921	—
variable, variable.other, variable.other.readwrite	#FFFFFF	—
variable.other.property, variable.other.object.property	#CCCCCC	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof	#D71921	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, punctuation.separator	#888888	—
storage, storage.type, storage.modifier	#D71921	—
entity.name.function, meta.function-call, support.function	#FFFFFF	—
variable.parameter, meta.parameters, meta.function.parameters	#CCCCCC	—
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class	#FFFFFF	bold
entity.name.type.interface	#CCCCCC	—
entity.name.type, support.type, support.type.primitive	#CCCCCC	—
punctuation, punctuation.definition, punctuation.definition.tag, punctuation.definition.string, punctuation.accessor, punctuation.terminator	#666666	—
punctuation.definition.block, punctuation.section, meta.brace	#888888	—
entity.name.tag, meta.tag	#D71921	—
entity.other.attribute-name	#FFFFFF	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FFFFFF	—
support.type.property-name.css	#CCCCCC	—
support.constant.property-value.css, meta.property-value.css	#AAAAAA	—
keyword.other.unit.css	#D71921	—
support.type.property-name.json	#FFFFFF	—
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading	#FFFFFF	bold
markup.bold	#FFFFFF	bold
markup.italic	#CCCCCC	italic
markup.underline.link	#D71921	—
markup.inline.raw, markup.fenced_code.block	#AAAAAA	—
markup.quote	#666666	italic
punctuation.definition.list	#D71921	—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#D71921	—
entity.name.module, variable.import, variable.other.module	#CCCCCC	—
meta.decorator, punctuation.decorator	#D71921	—
string.regexp	#D71921	—
invalid, invalid.illegal	#FFFFFF	—
invalid.deprecated	#888888	strikethrough
markup.inserted, punctuation.definition.inserted	#50FA7B	—
markup.deleted, punctuation.definition.deleted	#D71921	—
markup.changed, punctuation.definition.changed	#FFAA00	—
entity.name.tag.yaml	#FFFFFF	—
keyword.key.toml	#FFFFFF	—
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell	#FFFFFF	—

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