Noir

Name: Noir
Author: andrewberty

Publisher: andrewbertyThemes in package: 18

Collection of refined popular themes, just darker or cleaner.

GitHub

Color themes

VS Code preview

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

Noir — Noir Panda

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.background#090909
activityBar.border#090909
activityBar.foreground#E6E6E6
activityBarBadge.background#19f9d8
activityBarBadge.foreground#242526
badge.background#6FC1FF
badge.foreground#242526
button.background#45A9F9
button.foreground#FFFFFF
button.hoverBackground#676B79
diffEditor.insertedTextBackground#19f9d866
diffEditor.removedTextBackground#FF4B8266
dropdown.background#111111
dropdown.border#111111
dropdown.foreground#ffffffcc
editor.background#090909
editor.findMatchBackground#B084EB90
editor.findMatchHighlightBackground#FFB86C40
editor.foreground#E6E6E6
editor.inactiveSelectionBackground#111111
editor.lineHighlightBackground#31353a
editor.selectionBackground#222222
editor.selectionHighlightBackground#111111
editor.wordHighlightBackground#FFCC9560
editor.wordHighlightStrongBackground#FF9AC170
editorBracketMatch.border#19f9d8
editorCodeLens.foreground#FFB86C40
editorCursor.foreground#FF4B82
editorError.border#292A2B
editorError.foreground#FF4B82
editorGroup.border#090909
editorGroup.emptyBackground#090909
editorGroupHeader.noTabsBackground#090909
editorGroupHeader.tabsBackground#090909
editorGutter.addedBackground#19f9d8
editorGutter.deletedBackground#FF4B82
editorGutter.modifiedBackground#FFCC95
editorHoverWidget.background#111111
editorOverviewRuler.addedForeground#19f9d8
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#FF4B82
editorOverviewRuler.errorForeground#FF4B82
editorOverviewRuler.infoForeground#6FC1FF
editorOverviewRuler.modifiedForeground#FFCC95
editorOverviewRuler.warningForeground#FFCC95
editorRuler.foreground#B084EB60
editorStickyScrollHover.background#111111
editorSuggestWidget.selectedBackground#19f9d899
editorWarning.border#292A2B
editorWarning.foreground#FFCC95
editorWhitespace.foreground#3E4250
editorWidget.background#111111
editorWidget.border#090909
errorForeground#FF4B82
extensionButton.prominentBackground#45A9F9
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#676B79
focusBorder#00000000
foreground#E6E6E6
gitDecoration.ignoredResourceForeground#757575
input.background#111111
input.border#111111
input.foreground#ffffffcc
input.placeholderForeground#ffffff55
inputOption.activeBorder#ffffffcc
list.activeSelectionBackground#111111
list.activeSelectionForeground#19f9d8
list.focusBackground#111111
list.focusForeground#19f9d8
list.focusOutline#111111
list.highlightForeground#6FC1FF
list.hoverBackground#111111
list.hoverForeground#CDCDCD
list.inactiveSelectionBackground#111111
list.inactiveSelectionForeground#19f9d8
merge.currentContentBackground#B084EB40
merge.currentHeaderBackground#B084EB90
merge.incomingContentBackground#FFB86C40
merge.incomingHeaderBackground#45A9F990
panel.border#0000
progressBar.background#B084EB
quickInput.background#090909
scrollbar.shadow#222223
scrollbarSlider.activeBackground#111111
scrollbarSlider.background#090909
scrollbarSlider.hoverBackground#111111
sideBar.background#090909
sideBar.border#090909
sideBar.foreground#BBBBBB
statusBar.background#090909
statusBar.debuggingBackground#B084EB
statusBar.debuggingForeground#E6E6E6
statusBar.foreground#E6E6E6
statusBar.noFolderBackground#242526
statusBar.noFolderForeground#E6E6E6
tab.activeBackground#090909
tab.activeBorder#090909
tab.activeForeground#19f9d8
tab.border#090909
tab.inactiveBackground#090909
tab.inactiveForeground#E6E6E6
terminal.ansiBlue#45A9F9
terminal.ansiBrightBlack#757575
terminal.ansiBrightBlue#6FC1FF
terminal.ansiBrightCyan#BCAAFE
terminal.ansiBrightGreen#19f9d8
terminal.ansiBrightMagenta#FF9AC1
terminal.ansiBrightRed#FF2C6D
terminal.ansiBrightWhite#E6E6E6
terminal.ansiBrightYellow#FFCC95
terminal.ansiCyan#B084EB
terminal.ansiGreen#19f9d8
terminal.ansiMagenta#FF75B5
terminal.ansiRed#FF2C6D
terminal.ansiWhite#CDCDCD
terminal.ansiYellow#FFB86C
terminalCursor.background#E6E6E6
terminalCursor.foreground#FF4B82
titleBar.activeBackground#090909
titleBar.activeForeground#E6E6E6
titleBar.inactiveBackground#090909
titleBar.inactiveForeground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#676B79	—
keyword	#FF75B5	—
keyword.control, keyword.operator.new	#FF75B5	—
keyword.operator	#E6E6E6	—
keyword.operator.logical, keyword.operator.comparison	#FFCC95	—
keyword.operator.misc, keyword.operator.sigil	#FF75B5	—
storage	#FFB86C	—
constant	#FFB86C	—
constant.character.escape	#45A9F9	—
variable	#E6E6E6	—
variable.parameter	#BBBBBB	—
meta.object-binding-pattern-variable.js variable	#FFCC95	—
variable.other.constant, variable.language.this, variable.interpolation	#FF9AC1	—
variable.other.object	#FF9AC1	—
variable.other.property	#E6E6E6	—
invalid.illegal	—	—
invalid.deprecated	—	—
string	#19f9d8	—
punctuation.definition.template-expression	#FFCC95	—
support	#FFCC95	—
support.class	#FFCC95	—
support.type.object.module.js	#B084EB	—
support.function	#6FC1FF	—
entity.name.function	#6FC1FF	—
entity.other.inherited-class	#FF9AC1	—
entity.name.tag.yaml	#FFCC95	—
meta.decorator punctuation.decorator	#FFB86C	—
meta.decorator variable	#6FC1FF	—
keyword.other.special-method	#45A9F9	—
keyword.control.at-rule	#B084EB	—
keyword.other.important	#FF4B82	—
variable.interpolation	#FF75B5	—
entity.name.type	#19f9d8	—
meta.source.handlebars entity.name.tag	#6FC1FF	—
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag	#FFCC95	—
entity.name.function.expression	#FF75B5	—
entity.unescaped.expression	#B084EB	—
constant.other.symbol	#19f9d8	—
entity.expression variable.parameter.name	#FFB86C	—
entity.expression variable.parameter.value	#6FC1FF	—
entity.expression support.function.builtin	#FF9AC1	—
entity.name.tag.html	#FFCC95	—
entity.other.attribute-name.handlebars	#FFCC95	—
support.class.component	#FF75B5	—
meta.tag.js entity.name.tag	#FFCC95	—
entity.other.attribute-name	#FFB86C	—
markup.bold	#FFB86C	—
punctuation.definition.bold.markdown	#FFCC95	—
markup.changed	#FF75B5	—
markup.deleted	#FF2C6D	—
markup.italic	#FF9AC1	italic
punctuation.definition.italic.markdown	#FF75B5	italic
markup.inserted	#19f9d8	—
punctuation.definition.heading	#19f9d8	—
entity.name.section.markdown	#BBBBBB	—
markup.quote	#FFB86C	—
markup.inline.raw	#19f9d8	—
beginning.punctuation.definition.list	#FF75B5	—
markup.fenced_code.block.markdown punctuation.definition.markdown	#757575	—
fenced_code.block.language	#BBBBBB	—
string.other.link	#BBBBBB	underline
meta.link.inline.markdown	#45A9F9	—
text.html.markdown punctuation.definition.string	#FFCC95	—
entity.name.type.class.js	#6FC1FF	—
keyword.control.as.js	#FF9AC1	—
keyword.control.from.js	#FF9AC1	—
keyword.control.export.js	#B084EB	—
entity.name.tag.js, support.class.component.js	#FF2C6D	—
variable.language.super.js	#45A9F9	—
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade	#FF2C6D	—
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml	#FF2C6D	—
entity.name.tag.xml, meta.tag.xml	#FF2C6D	—
source.vue, entity.name.tag.pug, meta.tag.other	#FF2C6D	—
text.pug	#FFFFFF	—
entity.name.tag.css	#FF2C6D	—
support.type.property-name.css	#E6E6E6	—
variable.scss	#FF9AC1	—
entity.name.tag.reference.scss	#FF2C6D	—
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css	#FFB86C	—
string.regexp	#6FC1FF	—
string.regexp keyword, string.regexp keyword.control	#FF75B5	normal
string.regexp keyword.operator	#FF9AC1	—
comment.block.documentation	—	normal
entity.name.type.instance.jsdoc punctuation.definition	#FFCC95	—
entity.name.type.instance.jsdoc	#CDCDCD	—
comment.block storage	#FFCC95	—
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string	#FF9AC1	—

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