Noir Omarchy

Name: Noir Omarchy
Author: Taha Sadough

Publisher: Taha SadoughThemes in package: 2

A dark theme for Visual Studio Code with muted sage accents.

Open in VS Code GitHub

Color themes

VS Code preview

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

Noir Omarchy — Noir

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#000000
activityBar.activeBorder#1c1c1c
activityBar.background#000000
activityBar.border#000000
activityBar.foreground#c1c1c1
activityBar.inactiveForeground#505050
activityBarBadge.background#8a9a7b
activityBarBadge.foreground#000000
badge.background#8a9a7b
badge.foreground#000000
breadcrumb.activeSelectionForeground#8a9a7b
breadcrumb.focusForeground#c1c1c1
breadcrumb.foreground#505050
breadcrumbPicker.background#000000
button.background#8a9a7b
button.foreground#000000
button.hoverBackground#8a9a7b
button.secondaryBackground#333333
button.secondaryForeground#c1c1c1
button.secondaryHoverBackground#505050
chat.avatarBackground#1c1c1c
chat.avatarForeground#c1c1c1
chat.requestBackground#000000
chat.requestBorder#333333
chat.slashCommandBackground#1c1c1c
chat.slashCommandForeground#8a9a7b
checkbox.background#000000
checkbox.border#505050
checkbox.foreground#c1c1c1
commandCenter.activeBackground#333333
commandCenter.activeForeground#c1c1c1
commandCenter.background#1c1c1c
commandCenter.border#000000
commandCenter.foreground#c1c1c1
contrastActiveBorder#1c1c1c
contrastBorder#000000
debugExceptionWidget.background#000000
debugExceptionWidget.border#333333
debugToolBar.background#1c1c1c
descriptionForeground#505050
diffEditor.diagonalFill#1c1c1c
diffEditor.insertedLineBackground#1c1c1c
diffEditor.insertedTextBackground#1c1c1c
diffEditor.removedLineBackground#1c1c1c
diffEditor.removedTextBackground#1c1c1c
disabledForeground#505050
dropdown.background#000000
dropdown.border#505050
dropdown.foreground#c1c1c1
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#8a9a7b
editor.findMatchForeground#000000
editor.findMatchHighlightBackground#1c1c1c
editor.findRangeHighlightBackground#1c1c1c
editor.foreground#c1c1c1
editor.hoverHighlightBackground#1c1c1c
editor.inactiveSelectionBackground#333333
editor.lineHighlightBackground#1c1c1c
editor.lineHighlightBorder#000000
editor.rangeHighlightBackground#1c1c1c
editor.selectionBackground#333333
editor.selectionHighlightBackground#1c1c1c
editor.wordHighlightBackground#333333
editor.wordHighlightStrongBackground#333333
editorBracketHighlight.foreground1#c1c1c1
editorBracketHighlight.foreground2#aa9988
editorBracketHighlight.foreground3#8a9a7b
editorBracketHighlight.foreground4#aaaaaa
editorBracketHighlight.foreground5#999999
editorBracketHighlight.foreground6#777755
editorBracketHighlight.unexpectedBracket.foreground#8a9a7b
editorBracketPairGuide.activeBackground1#8a9a7b
editorBracketPairGuide.background1#505050
editorCursor.foreground#c1c1c1
editorError.border#333333
editorError.foreground#8a9a7b
editorGhostText.foreground#505050
editorGroup.border#000000
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#000000
editorGutter.addedBackground#6e4c4c
editorGutter.background#000000
editorGutter.commentRangeForeground#505050
editorGutter.deletedBackground#8a9a7b
editorGutter.modifiedBackground#8a9a7b
editorHint.foreground#8a9a7b
editorHoverWidget.background#000000
editorHoverWidget.border#333333
editorHoverWidget.foreground#c1c1c1
editorHoverWidget.statusBarBackground#1c1c1c
editorIndentGuide.activeBackground1#505050
editorIndentGuide.background1#1c1c1c
editorInfo.border#333333
editorInfo.foreground#999999
editorInlayHint.background#1c1c1c
editorInlayHint.foreground#505050
editorInlayHint.parameterBackground#1c1c1c
editorInlayHint.parameterForeground#505050
editorInlayHint.typeBackground#1c1c1c
editorInlayHint.typeForeground#505050
editorLightBulb.foreground#999999
editorLightBulbAutoFix.foreground#8a9a7b
editorLineNumber.activeForeground#c1c1c1
editorLineNumber.foreground#505050
editorLink.activeForeground#8a9a7b
editorOverviewRuler.addedForeground#6e4c4c
editorOverviewRuler.border#000000
editorOverviewRuler.bracketMatchForeground#8a9a7b
editorOverviewRuler.deletedForeground#8a9a7b
editorOverviewRuler.errorForeground#8a9a7b
editorOverviewRuler.findMatchForeground#8a9a7b
editorOverviewRuler.infoForeground#999999
editorOverviewRuler.modifiedForeground#8a9a7b
editorOverviewRuler.selectionHighlightForeground#333333
editorOverviewRuler.warningForeground#8a9a7b
editorPane.background#000000
editorRuler.foreground#1c1c1c
editorStickyScroll.background#000000
editorStickyScrollHover.background#1c1c1c
editorSuggestWidget.background#000000
editorSuggestWidget.border#333333
editorSuggestWidget.foreground#c1c1c1
editorSuggestWidget.highlightForeground#8a9a7b
editorSuggestWidget.selectedBackground#333333
editorUnnecessaryCode.opacity#505050
editorWarning.border#333333
editorWarning.foreground#8a9a7b
editorWhitespace.foreground#333333
editorWidget.background#000000
editorWidget.border#333333
editorWidget.foreground#c1c1c1
errorForeground#8a9a7b
extensionBadge.background#8a9a7b
extensionBadge.foreground#000000
extensionButton.background#8a9a7b
extensionButton.foreground#000000
extensionButton.hoverBackground#8a9a7b
extensionButton.prominentBackground#8a9a7b
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#8a9a7b
extensionIcon.debuggingForeground#8a9a7b
extensionIcon.starForeground#8a9a7b
focusBorder#333333
foreground#c1c1c1
gitDecoration.addedResourceForeground#6e4c4c
gitDecoration.conflictingResourceForeground#8a9a7b
gitDecoration.deletedResourceForeground#8a9a7b
gitDecoration.ignoredResourceForeground#505050
gitDecoration.modifiedResourceForeground#8a9a7b
gitDecoration.stageDeletedResourceForeground#8a9a7b
gitDecoration.stageModifiedResourceForeground#8a9a7b
gitDecoration.untrackedResourceForeground#8a9a7b
icon.focusBorder#333333
icon.foreground#c1c1c1
icon.hoverForeground#8a9a7b
input.background#000000
input.border#505050
input.foreground#c1c1c1
input.placeholderForeground#505050
inputOption.activeBackground#8a9a7b
inputOption.activeBorder#8a9a7b
inputOption.activeForeground#000000
inputValidation.errorBackground#000000
inputValidation.errorBorder#505050
inputValidation.errorForeground#8a9a7b
inputValidation.infoBackground#000000
inputValidation.infoBorder#505050
inputValidation.warningBackground#000000
inputValidation.warningBorder#505050
inputValidation.warningForeground#8a9a7b
list.activeSelectionBackground#333333
list.activeSelectionForeground#c1c1c1
list.activeSelectionIconForeground#8a9a7b
list.errorForeground#c1c1c1
list.focusBackground#333333
list.focusForeground#c1c1c1
list.focusOutline#333333
list.highlightForeground#8a9a7b
list.hoverBackground#1c1c1c
list.hoverForeground#c1c1c1
list.inactiveSelectionBackground#333333
list.inactiveSelectionForeground#c1c1c1
list.invalidItemForeground#8a9a7b
list.warningForeground#c1c1c1
listFilterWidget.background#1c1c1c
listFilterWidget.noMatchesOutline#333333
listFilterWidget.outline#333333
menu.background#000000
menu.border#333333
menu.foreground#c1c1c1
menu.selectionBackground#8a9a7b
menu.selectionForeground#000000
menu.separatorBackground#1c1c1c
menubar.selectionBackground#333333
menubar.selectionForeground#c1c1c1
minimap.background#000000
minimap.errorHighlight#8a9a7b
minimap.selectionHighlight#333333
minimap.warningHighlight#8a9a7b
notificationCenter.border#333333
notificationLink.foreground#8a9a7b
notifications.background#000000
notifications.foreground#c1c1c1
notificationsErrorIcon.foreground#8a9a7b
notificationsInfoIcon.foreground#999999
notificationsWarningIcon.foreground#8a9a7b
notificationToast.border#333333
panel.background#000000
panel.border#1c1c1c
panelSection.border#1c1c1c
panelSectionHeader.background#000000
panelSectionHeader.foreground#c1c1c1
panelTitle.activeBorder#8a9a7b
panelTitle.activeForeground#c1c1c1
panelTitle.inactiveForeground#505050
peekView.border#333333
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#8a9a7b
peekViewResult.background#000000
peekViewResult.fileForeground#c1c1c1
peekViewResult.lineForeground#505050
peekViewResult.matchHighlightBackground#8a9a7b
peekViewResult.selectionBackground#333333
peekViewResult.selectionForeground#c1c1c1
peekViewTitle.background#1c1c1c
peekViewTitleDescription.foreground#505050
peekViewTitleLabel.foreground#c1c1c1
problemsErrorIcon.foreground#8a9a7b
problemsInfoIcon.foreground#999999
problemsWarningIcon.foreground#8a9a7b
progressBar.background#8a9a7b
scrollbar.shadow#000000
scrollbarSlider.activeBackground#8a9a7b
scrollbarSlider.background#333333
scrollbarSlider.hoverBackground#505050
selection.background#333333
settings.checkboxBackground#000000
settings.checkboxBorder#505050
settings.checkboxForeground#c1c1c1
settings.dropdownBackground#000000
settings.dropdownBorder#505050
settings.dropdownForeground#c1c1c1
settings.headerForeground#c1c1c1
settings.modifiedItemIndicator#8a9a7b
settings.numberInputBackground#000000
settings.numberInputBorder#505050
settings.rowHoverBackground#1c1c1c
settings.textInputBackground#000000
settings.textInputBorder#505050
sideBar.background#000000
sideBar.border#000000
sideBar.foreground#c1c1c1
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#1c1c1c
sideBarSectionHeader.foreground#505050
sideBarTitle.foreground#c1c1c1
statusBar.background#1c1c1c
statusBar.border#000000
statusBar.debuggingBackground#1c1c1c
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#c1c1c1
statusBar.folderBackground#1c1c1c
statusBar.folderBorder#000000
statusBar.folderForeground#c1c1c1
statusBar.foreground#c1c1c1
statusBar.noFolderBackground#1c1c1c
statusBar.noFolderBorder#000000
statusBar.noFolderForeground#c1c1c1
statusBarItem.activeBackground#000000
statusBarItem.errorBackground#8a9a7b
statusBarItem.errorForeground#000000
statusBarItem.focusBorder#8a9a7b
statusBarItem.hoverBackground#333333
statusBarItem.prominentForeground#8a9a7b
statusBarItem.prominentHoverBackground#333333
statusBarItem.remoteBackground#8a9a7b
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#8a9a7b
statusBarItem.warningForeground#000000
tab.activeBackground#000000
tab.activeBorderTop#8a9a7b
tab.activeForeground#c1c1c1
tab.activeModifiedBorder#8a9a7b
tab.border#1c1c1c
tab.hoverBackground#1c1c1c
tab.hoverForeground#c1c1c1
tab.inactiveBackground#000000
tab.inactiveForeground#505050
tab.inactiveModifiedBorder#505050
tab.unfocusedActiveBackground#000000
tab.unfocusedActiveForeground#505050
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#505050
terminal.ansiBlack#1c1c1c
terminal.ansiBlue#aaaaaa
terminal.ansiBrightBlack#505050
terminal.ansiBrightBlue#aaaaaa
terminal.ansiBrightCyan#aa9988
terminal.ansiBrightGreen#c1c1c1
terminal.ansiBrightMagenta#999999
terminal.ansiBrightRed#8a9a7b
terminal.ansiBrightWhite#c1c1c1
terminal.ansiBrightYellow#888888
terminal.ansiCyan#aa9988
terminal.ansiGreen#c1c1c1
terminal.ansiMagenta#999999
terminal.ansiRed#8a9a7b
terminal.ansiWhite#c1c1c1
terminal.ansiYellow#888888
terminal.background#000000
terminal.foreground#c1c1c1
terminal.selectionBackground#333333
terminalCursor.background#000000
terminalCursor.foreground#c1c1c1
textBlockQuote.background#1c1c1c
textBlockQuote.border#333333
textCodeBlock.background#000000
textLink.activeForeground#8a9a7b
textLink.foreground#c1c1c1
textPreformat.foreground#aa9988
textSeparator.foreground#505050
titleBar.activeBackground#000000
titleBar.activeForeground#c1c1c1
titleBar.border#000000
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#505050
tree.indentGuidesStroke#1c1c1c
tree.tableColumnsBorder#333333
tree.tableOddRowsBackground#000000
walkThrough.embeddedEditorBackground#000000
welcomePage.background#000000
welcomePage.progress.background#1c1c1c
welcomePage.progress.foreground#8a9a7b
widget.shadow#000000
window.activeBorder#000000
window.inactiveBorder#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.line, comment.block, comment.block.documentation, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign	#505050	italic
variable, variable.other, variable.other.object, variable.other.property, variable.other.readwrite, variable.other.object.property, variable.other.constant, entity.name.variable	#c1c1c1	—
variable.parameter, variable.parameter.function, parameter, entity.name.variable.parameter, variable.other.parameter	#c1c1c1	—
keyword, keyword.control, keyword.control.flow, keyword.operator.word, keyword.other, keyword.other.unit, keyword.other.use, keyword.other.decorator, keyword.other.directive, keyword.other.important, storage, storage.modifier, storage.modifier.async, storage.modifier.readonly, storage.type.function, storage.type.class, storage.type.interface, storage.type.generic, storage.type.namespace, storage.type.import, storage.type.export, storage.type.module, storage.type.java, storage.type.default, storage.type.extends, storage.type.implements, storage.type.method, storage.type.parameter, storage.type.property, storage.type.primitive, storage.type.user-defined, storage.type.annotation	#999999	—
control.conditional, control.flow, control.loop, control.evaluate, control.import, control.repeat, control.return, control.throw, control.try, control.catch, control.finally, control.continue, control.break, control.switch, control.select, control.case, control.default, control.directive, control.import.include	#999999	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational, keyword.operator.ternary, keyword.operator.increment, keyword.operator.decrement, keyword.operator.new, keyword.operator.expression, keyword.operator.type, keyword.operator.spread, punctuation, punctuation.definition, punctuation.accessor, punctuation.definition.generic, punctuation.definition.tag, punctuation.definition.arguments, punctuation.definition.begin, punctuation.definition.end, punctuation.definition.template-expression, punctuation.definition.typeparameters, punctuation.section, punctuation.separator, punctuation.terminator, punctuation.bracket, punctuation.bracket.round, punctuation.bracket.square, punctuation.bracket.curly, punctuation.bracket.angle, punctuation.separator.continuation, punctuation.separator.key-value, punctuation.separator.parameter, punctuation.separator.tuple, punctuation.separator.comma, punctuation.separator.pointer-access, punctuation.terminator.statement	#9b99a3	—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.quoted.other.literal, string.quoted.other.template, string.interpolated, string.escape, string.template, string.template-expression, string.template.expression, string.other, string.unquoted, string.regexp, source.regexp, string.quoted.double.ruby, string.quoted.single.ruby, string.regexp.dart, string.regexp.ts, string.regexp.js, constant.other.character.escape, constant.character.escape, constant.character.entity, constant.other.placeholder	#aa9988	—
constant, constant.other, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.exponent, constant.other.color, constant.other.caps, constant.other.key, constant.other.symbol, constant.other.enum, constant.character, constant.other.class.name, constant.other.object.key, constant.other.namespace, constant.other.function, constant.other.enum-member, constant.other.type, constant.other.string, constant.other.character, constant.other.boolean, number, entity.name.constant, entity.other.attribute-name.enum, support.constant	#aaaaaa	—
support.variable, support.variable.magic, support.variable.type, support.variable.parameter, support.variable.object, support.variable.property, variable.language, variable.other.readwrite.global, variable.other.constant.builtin, variable.other.readwrite.builtin	#aaaaaa	—
support.function, support.function.builtin, support.function.console, support.function.construct, support.function.misc, support.function.name, support.function.procedure, support.function.property, support.function.variable, support.function.parameter, support.function.general, support.function.type, support.function.module, support.function.array, support.function.iterator, support.function.global, support.function.method, support.function.instance, support.function.variable.package, entity.name.function, entity.name.function.definition, entity.name.function.declaration, entity.name.function.method, entity.name.function.symbol, entity.name.function.variable, entity.name.function.procedure, entity.name.function.builtin, entity.name.function.parameter, entity.name.function.type, entity.name.function.method-definition, entity.name.function.arrow, entity.name.function.lambda, entity.name.function.generator, entity.name.function.anonymous, meta.function-call.generic, meta.function-call.name, meta.function-call.method, meta.function-call, function, meta.function, meta.method, meta.method-call, meta.method-call.name, meta.method-call.generic	#888888	—
support.class, support.type, support.type.primitive, support.type.property-name, support.type.type.name, support.type.module, support.type.namespace, support.type.interface, support.type.definition, support.type.class, support.type.enum, support.type.structure, support.type.object, support.type.exception, support.type.builtin, support.type.dictionary, support.type.other, entity.name.type, entity.name.type.class, entity.name.type.class.definition, entity.name.type.interface, entity.name.type.namespace, entity.name.type.module, entity.name.type.enum, entity.name.type.definition, entity.name.type.typedef, entity.name.type.structure, entity.name.type.typealias, entity.name.type.parameter, entity.name.type.generic, entity.name.type.abstract, entity.name.type.builtin, entity.name.type.instance, meta.type, meta.type.name, meta.type.definition, meta.type.annotation, meta.interface, meta.class, meta.structure, meta.definition.type	#777755	—
meta.annotation, meta.annotation.identifier, meta.annotation.type, meta.preprocessor, meta.preprocessor.numeric, meta.preprocessor.string, meta.preprocessor.macro, meta.preprocessor.define, meta.preprocessor.include, meta.directive, preprocessor, keyword.other.directive, keyword.control.directive, keyword.other.macro, entity.name.tag.decorator	#999999	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.inline, entity.name.tag.block, meta.tag, meta.tag.block, meta.tag.inline, meta.tag.any, tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.other.attribute-name.class, entity.other.attribute-name.id	#8a9a7b	—
entity.other.attribute-name, entity.other.attribute-name.selector, entity.other.attribute-name.tag, entity.other.attribute-name.attribute, meta.attribute-selector, meta.attribute, meta.attribute.name, meta.tag.attribute, attribute, punctuation.definition.attribute	#c1c1c1	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, support.constant.property-value, support.type.property-name, support.constant.property-name, meta.property-name, meta.property-value, meta.property, variable.object.property, variable.other.object.property	#c1c1c1	—
variable.other.member, variable.other.object.property.member, variable.other.property, variable.other.object.property, variable.other.member.property, support.variable.property, entity.name.property, meta.property.object, meta.property.property-name	#c1c1c1	—
meta.embedded, meta.embedded.block, meta.embedded.line, markup.raw, markup.raw.inline	#aa9988	—
markup.heading, markup.heading.setext, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6, markup.heading.name, meta.header, punctuation.definition.heading	#8a9a7b	bold
markup.bold, markup.bold.markdown, markup.bold.strong, markup.strong	#c1c1c1	bold
markup.italic, markup.italic.markdown, markup.emphasis	#c1c1c1	italic
markup.quote, markup.quote.markdown, markup.quote.block	#505050	—
markup.underline, markup.underline.link, markup.underline.link.markdown, string.other.link, string.other.link.title, string.other.link.description, meta.link, meta.link.inline, meta.link.reference, markup.inline.raw.string, hyperlink, constant.other.reference.link	#8a9a7b	underline
markup.list, markup.list.markdown, markup.list.unnumbered, markup.list.numbered, punctuation.definition.list	#9b99a3	—
markup.strikethrough, markup.deleted, markup.inserted, markup.changed	#c1c1c1	—
markup.deleted, meta.diff.header.from-file, markup.deleted.markdown	#8a9a7b	—
markup.inserted, meta.diff.header.to-file, markup.inserted.markdown	#6e4c4c	—
meta.diff, meta.diff.header, meta.diff.index, meta.diff.header.git, meta.separator	#c1c1c1	—
invalid, invalid.illegal, invalid.deprecated, invalid.unimplemented	#8a9a7b	—
markup.italic.markdown, markup.bold.markdown	#8a9a7b	—
punctuation.definition.constant	#aaaaaa	—
meta.function, meta.function.definition, meta.method, meta.method.declaration, meta.method.definition, meta.method.parameters, meta.function.parameters, meta.parameters, meta.parameter, meta.function.parameter	#c1c1c1	—
entity.name.namespace, entity.name.module, entity.name.scope, entity.name.package	#777755	—