Null Syntax

Name: Null Syntax
Author: nfour

Publisher: nfourThemes in package: 1

A theme which fades punctuation & highlights control flow

Open in VS Code GitHub

VS Code preview

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

Null Syntax — Null Syntax

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.

activityBar.background#1C1A19
activityBar.foreground#7B7A7A
activityBarBadge.background#1C1817
activityBarBadge.foreground#FF8365
dropdown.background#1F1D1Cf0
dropdown.foreground#8F8E8E
editor.background#171616
editor.findMatchHighlightBackground#bfa38340
editor.foreground#cacaca
editor.lineHighlightBackground#1B191888
editor.lineHighlightBorder#211E1E88
editor.selectionBackground#6fb05030
editor.selectionHighlightBackground#bfa38340
editor.selectionHighlightBorder#6fb05070
editorBracketMatch.border#a4a1c0
editorCursor.foreground#ffffff
editorGroup.border#ffffff0a
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#00000000
editorGroupHeader.tabsBorder#00000022
editorLineNumber.activeForeground#8F8E8E
editorLineNumber.foreground#35302F
editorSuggestWidget.background#1C1A19e0
editorSuggestWidget.border#1C1A1900
editorSuggestWidget.foreground#8F8E8E
editorWhitespace.foreground#cacaca14
focusBorder#913B2988
foreground#ffffffcc
gitDecoration.ignoredResourceForeground#8F8E8E70
gitDecoration.modifiedResourceForeground#FED7B1cc
list.activeSelectionBackground#913B2924
list.focusBackground#913B2933
list.hoverBackground#913B2933
list.hoverForeground#ffffffbb
list.inactiveSelectionBackground#913B2914
list.inactiveSelectionForeground#ffffffbb
panel.background#201E1D
panel.border#272423
panelTitle.activeBorder#913B29
peekView.border#1D1C1B
peekViewEditor.background#171515
peekViewEditor.matchHighlightBackground#151414
peekViewEditorGutter.background#15131360
peekViewResult.background#171616
peekViewResult.lineForeground#6C6B6A
peekViewTitle.background#171515
peekViewTitleDescription.foreground#756B69
peekViewTitleLabel.foreground#B0A8A7
selection.background#6fb05030
sideBar.background#1E1C1B
sideBar.border#272423
sideBar.foreground#B3B2B2aa
sideBarSectionHeader.background#221F1F
tab.activeBackground#1E1C1B
tab.inactiveBackground#ffffff00
terminal.background#1E1C1B
terminal.border#272423
titleBar.activeBackground#1C1A19
titleBar.inactiveBackground#1C1A19

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.class meta.field.declaration meta.definition.property variable.object.property, meta.object-literal.key, support.type.property-name.json, entity.name.tag.yaml, entity.name.section.markdown, entity.other.attribute-name, variable.other.normal.shell, source.rust entity.name.type.mod, meta.property-name.css, meta.property-name.scss	#e2d294	bold
meta.property-name.css, meta.property-name.scss	#abc78a	bold
meta.object-binding-pattern-variable variable.object.property, meta.parameter.object-binding-pattern variable.object.property, meta.array-binding-pattern-variable variable.object.property, meta.parameters variable.object.property	#9f9f9f	—
string, markup.inline.raw.markdown	#a1dbe3	—
meta.template.expression	#cacaca	—
support.function, entity.name.function, meta.selector.css, entity.name.tag, source.rust support.other.macro	#fdbd7d	—
keyword.operator, json.punctuation.separator, punctuation.separator.key, punctuation.separator.key-value, punctuation.definition.scalar.folded, yaml.chomping-indicator, punctuation.definition.sequence.item, beginning.punctuation.definition.list.markdown, punctuation.decorator	#e79d8d	—
keyword.reserved, keyword.control, keyword.other.debugger, constant.language.import-export-all, css.keyword.other.unit, keyword.language.gherkin, source.rust keyword.operator.assignment, source.rust keyword.operator.arithmetic, punctuation.assignment.graphql	#e79d8d	italic
storage, keyword.other.binding.rust, source.rust keyword.other, source.rust entity.name.lifetime, meta.attribute.rust, keyword.scalar.graphql, keyword.type.graphql, keyword.union.graphql, keyword.input.graphql, keyword.enum.graphql	#9f9f9f	italic
meta.var storage.type.js, keyword.other.unit	#949494	—
support.constant, constant.other, constant.numeric, regexp, variable.language.this, variable.language.super, support.class.builtin, support.class.console.js, support.variable.object.process, support.variable.object.node, support.variable.property.js, constant.language, markup.heading.section, source.rust variable.language.self, source.rust storage.class.std, source.rust storage.type.core, source.toml constant.other	#83bcf2	italic
variable.language, constant.language	—	italic
meta.definition.variable, variable.parameter, meta.import variable.other.readwrite.alias, meta.class.js entity.name.type.class.js, meta.class.js meta.method.declaration.js meta.definition.method.js, meta.class.js meta.field.declaration.js meta.definition.property.js, source.rust variable.other	#dadada	bold
meta.import variable.other.readwrite.alias, variable.parameter.graphql	—	bold underline
punctuation.definition.binding-pattern, meta.object-literal.key meta.brace.square, punctuation.definition.template-expression	#727272	—
meta.brace, punctuation.definition.parameters.begin, punctuation.definition.parameters.end	#727272	—
punctuation.definition.parameters.begin, punctuation.definition.parameters.end	—	bold
meta.indexer.declaration.ts variable.parameter.ts, meta.interface.ts, meta.interface entity.name.type, cast.expr.ts entity.name.type.ts, meta.type.parameters.ts entity.name.type.ts, meta.indexer.declaration.tsx variable.parameter.tsx, meta.interface.tsx, cast.expr.tsx entity.name.type.tsx, meta.type.parameters.tsx entity.name.type.tsx, meta.type.declaration, meta.type.annotation, meta.type.annotation variable.object.property, meta.class meta.type.annotation meta.object.type meta.definition.property variable.object.property, meta.class meta.object.type meta.field.declaration meta.definition.property variable.object.property, meta.return.type, entity.name.type.rust, support.type.graphql	#9D98C9	—
meta.type.annotation variable.parameter, meta.type.declaration variable.object.property, meta.type.annotation meta.object.type variable.object.property, meta.type.annotation string, variable.graphql	#C6C4D2	—
keyword.operator.type, keyword.operator.optional, source.rust keyword.operator	#949494	—
meta.interface.ts meta.definition.property.ts, meta.object.type.ts meta.definition.property.ts, meta.type.declaration.ts entity.name.type.alias.ts, meta.interface.ts entity.name.type.interface.ts meta.interface.tsx meta.definition.property.tsx, meta.object.type.tsx meta.definition.property.tsx, meta.type.declaration.tsx entity.name.type.alias.tsx, meta.interface.tsx entity.name.type.interface.tsx	—	bold
support.type.primitive, support.type.builtin, source.rust storage.type.primitive	#8FA6A2	italic
comment	#938FA8	—
punctuation, markup.heading, keyword.control.from	#949494	—
punctuation.terminator	#4a4a4a	—
string.language.gherkin.scenario.title, entity.scalar.graphql, support.type.enum.graphql, constant.character.enum.graphql	#a0dab0	—

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