New Moon Syntax Theme

Name: New Moon Syntax Theme
Author: Tania Rascia

Publisher: Tania RasciaThemes in package: 1

The optimized dark theme for web development. Your new favorite theme.

GitHub

VS Code preview

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

New Moon Syntax Theme — New Moon

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

badge.background#4a7baa
badge.foreground#D7DAE0
button.background#4a7baa
button.foreground#FFFFFF
button.hoverBackground#6AB0F3
diffEditor.border#444444
diffEditor.insertedTextBackground#92D19244
diffEditor.removedTextBackground#f2777a44
editor.background#2d2d2d
editor.findMatchBackground#101010
editor.findMatchBorder#FFD479
editor.findMatchHighlightBackground#cda86955
editor.foreground#b3b9c5
editor.lineHighlightBackground#202020
editor.selection#414141
editor.selectionBackground#444444
editor.whitespaces#555555
editorBracketMatch.background#101010
editorBracketMatch.border#ffffff
editorCursor.foreground#ffeea6
editorError.foreground#f2777a
editorIndentGuide.activeBackground#666
editorLineNumber.activeForeground#909090
editorLineNumber.foreground#606060
editorSuggestWidget.background#2d2d2d
editorSuggestWidget.border#202020
editorSuggestWidget.highlightForeground#FFD479
editorSuggestWidget.Hoverbackground#444444
editorSuggestWidget.selectedBackground#202020
extensionButton.prominentBackground#FFD479
extensionButton.prominentForeground#222222
extensionButton.prominentHoverBackground#ffeea6
findRangeHighlightBackground#66666699
input.background#333333
inputOption.activeBorder#FFD479
inputValidation.warningBorder#f2777a
list.activeSelectionBackground#4a7baa66
list.focusBackground#101010
list.hoverBackground#383838
list.inactiveSelectionBackground#444444
panel.background#202020
peekView.border#333333
peekViewEditor.background#242424
peekViewEditor.matchHighlightBackground#2d2d2d
peekViewResult.background#242424
peekViewResult.matchHighlightBackground#2d2d2d
peekViewResult.selectionBackground#444444
scrollbarSlider.activeBackground#88888880
scrollbarSlider.background#44444480
scrollbarSlider.hoverBackground#66666680
sideBar.background#272727
sideBarBackground#282828
sideBarSectionHeader.background#202020
sideBarSectionHeader.border#282828
statusBar.background#202020
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#909090
statusBar.noFolderBackground#21252B
statusBarItem.hoverBackground#111
tab.activeBackground#2d2d2d
tab.background#202020
tab.inactiveBackground#202020
terminal.ansiBlack#666666
terminal.ansiBlue#6AB0F3
terminal.ansiBrightBlack#777777
terminal.ansiBrightBlue#6AB0F3
terminal.ansiBrightCyan#62CFCF
terminal.ansiBrightGreen#92D192
terminal.ansiBrightMagenta#E1A6F2
terminal.ansiBrightRed#f2777a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd479
terminal.ansiCyan#62CFCF
terminal.ansiGreen#92D192
terminal.ansiMagenta#E1A6F2
terminal.ansiRed#f2777a
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffd479
terminal.background#242424
terminal.foreground#b3b9c5
terminal.selectionBackground#bbbbbb22
textLink.activeForeground#6AB0F3
textLink.foreground#6AB0F3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#b3b9c5	—
string, constant.other.symbol, entity.other.inherited-class, punctuation.definition.string, markup.underline.link.image.markdown, string.other.link, markup.raw.inline, markup.inserted, markup.inserted.git_gutter, string.other.link.title.markdown, variable.parameter.url.scss	#92D192	—
keyword, keyword.operator.expression.typeof, variable.language.this, storage, support.function.construct.output.php, keyword.operator.new, markup.inline.raw.string.markdown, keyword.operator.expression.import.js	#ffeea6	—
entity.other.attribute-name, entity.other.attribute-name.class.css, markup.heading punctuation.definition.heading, entity.name.section, entity.other.attribute-name.class.css, string.unquoted.alias.graphql	#ffd479	—
variable.other.property.php, variable.other.member.php, entity.name.function.php, meta.function-call, meta.property-value, meta.selector, entity.name.function.ts, entity.name.function.js, entity.name.function.tsx	#ffffff	—
support.class, entity.name.type.class, meta.entity.new.name.expr, entity.name.tag.structure.any.html, meta.tag.structure.any.html, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, keyword.other.special-method, entity.name.type, entity.name.tag, support.variable.dom.js, meta.tag.structure.any.html, markup.bold, punctuation.definition.bold, entity.name.type.ts, support.variable.dom.ts, entity.name.function.graphql	#6AB0F3	—
meta.type.annotation.ts, support.type.primitive.ts, entity.name.type.ts, meta.type.annotation.ts, variable.other.jsdoc	#4a7baa	—
variable.parameter.ts, variable.parameter.ts, variable.parameter.tsx, entity.tag.tagbraces.nunjucks, string.unquoted.filter-pipe.nunjucks, punctuation.colon.graphql, string.unquoted.graphql	#848991	—
comment, punctuation.definition.comment, punctuation.separator.key-value, punctuation.separator, meta.template.expression.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts, markup.underline.link.markdown, punctuation.definition.metadata.markdown	#777c85	—
punctuation.definition.variable, variable, variable.language.this.php, markup.deleted, markup.deleted.git_gutter, invalid.illegal, string.unquoted.tag-string.nunjucks	#f2777a	—
constant.numeric, keyword.other.unit, markup.quote	#fca369	—
support.function, constant, entity.other.attribute-name.id, markup.italic, punctuation.definition.italic, markup.changed, markup.changed.git_gutter, support.constant.property-value	#E1A6F2	—
keyword.operator, constant.character.escape, constant.character.escape.json, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, keyword.operator, punctuation.accessor.js, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc	#AC8D58	—
punctuation.definition.block, meta.parameters, punctuation.definition.parameters, meta.brace.round, punctuation.definition.dictionary, constant.character.escape.backslash.regexp, punctuation.section, punctuation.terminator.statement, variable.other.property.js, support.variable.property.dom.js, punctuation.definition.parameters, punctuation.definition.array, support.type.property-name.json, entity.name.function, meta.require, support.function.any-method, meta.tag.sgml.html, punctuation.section.embedded, variable.interpolation, variable.object.property.ts, variable.object.property.tsx, meta.brace.square, punctuation.definition.array, punctuation.definition.binding-pattern.object.js, entity.name.tag.yaml, meta.selectionset.graphql	#d5d8df	—
entity.other.attribute-name.pseudo-class.css, constant.other.php, markup.italic.markdown, punctuation.definition.italic.markdown, string.regexp, entity.other.attribute-name.pseudo-element.css, meta.image.inline.markdown, string.other.link.description.markdown	#62CFCF	—
entity.name.tag.reference, meta.embedded.block.php, meta.embedded.line.php, keyword.other.phpdoc.php, meta.separator, variable.object.property.ts, variable.object.property.tsx, variable.other.property.js, support.variable.property.dom.js, support.type.property-name.json, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.instance.jsdoc, variable.graphql, meta.template.expression.ts	#abb2bf	—

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