TezuNextia

Name: TezuNextia
Author: TezuNextia

Publisher: TezuNextiaThemes in package: 24

Complete 24-theme collection with purple, pink, orange, yellow-green, green, and blue color families. Each color includes dark, dark high contrast, light, and light high contrast variants.

Open in VS Code

Color themes

VS Code preview

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

TezuNextia — Tezu Green Dark

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.background#010801
activityBar.foreground#77ddaa
editor.background#061a0c
editor.findMatchBackground#33aa55
editor.findMatchHighlightBackground#227744
editor.foreground#99ffbb
editor.lineHighlightBorder#ffffff08
editor.selectionBackground#154030
editor.selectionHighlightBackground#0d2f1d
editorCursor.foreground#77ffaa
editorGroupHeader.tabsBackground#030f06
editorIndentGuide.activeBackground#33aa55
editorIndentGuide.background#154030
editorLineNumber.activeForeground#88ddaa
editorLineNumber.foreground#66cc88
editorWhitespace.foreground#227744
focusBorder#00ff5560
panel.background#030f06
sideBar.background#030f06
sideBar.foreground#99eebb
statusBar.background#195533
statusBar.foreground#99ffbb
tab.activeBackground#061a0c
tab.activeForeground#99ffbb
tab.inactiveBackground#030f06
tab.inactiveForeground#88ddaa
terminal.background#061a0c
titleBar.activeBackground#061a0c
titleBar.activeForeground#99ffbb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#00ff55	—
comment	#88aa99	italic
constant.language	#77ffaa	—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#99ddff	—
constant.regexp	#ffaacc	—
entity.name.tag	#77ffaa	—
entity.name.tag.css	#88ffcc	—
entity.other.attribute-name	#77ffaa	—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name	#88ffcc	—
invalid	#ff6666	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#77ffaa	—
markup.italic	—	italic
markup.inserted	#99ddff	—
markup.deleted	#ffaacc	—
markup.changed	#00ff55	—
meta.selector	#88ffcc	—
punctuation.definition.tag	#88ddaa	—
meta.preprocessor	#00ff55	—
meta.preprocessor.string	#ffaacc	—
meta.preprocessor.numeric	#99ddff	—
meta.structure.dictionary.key.python	#77ffaa	—
storage	#77ffaa	—
storage.type	#77ffaa	—
storage.modifier	#77ffaa	—
string	#99ddff	—
string.tag	#99ddff	—
string.value	#99ddff	—
string.regexp	#ffaacc	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#00ff55	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less	#99ffbb	—
keyword	#77ffaa	—
keyword.control	#77ffaa	—
keyword.operator	#99ffbb	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#77ffaa	—
keyword.other.unit	#99ddff	—
support.function.git-rebase	#99ffbb	—
constant.sha.git-rebase	#99ddff	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#99ffbb	—
variable.language.this	#77ffaa	—
entity.name.function, support.function, support.constant.handlebars	#88ffcc	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type	#00ff55	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#00ff55	—
keyword.control	#77ffaa	—
variable, meta.definition.variable.name, support.variable	#77ffaa	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#77ffaa	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#99ddff	—

VS Code preview

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

TezuNextia — Tezu Green Dark HC

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.background#020a04
activityBar.border#11cc44
activityBar.foreground#bbffcc
contrastBorder#22dd55
dropdown.border#33ff77
editor.background#061a0c
editor.findMatchBackground#55cc77
editor.findMatchHighlightBackground#44aa66
editor.foreground#ffffff
editor.lineHighlightBorder#33ff7780
editor.selectionBackground#307050
editor.selectionHighlightBackground#185038
editorCursor.foreground#aaffcc
editorGroup.border#33ff77
editorGroupHeader.tabsBackground#031006
editorIndentGuide.activeBackground#55cc77
editorIndentGuide.background#307050
editorLineNumber.activeForeground#bbffdd
editorLineNumber.foreground#99ddbb
editorWhitespace.foreground#44aa66
editorWidget.border#33ff77
focusBorder#33ff77
input.border#33ff77
list.focusOutline#33ff77
panel.background#031006
panel.border#33ff77
sideBar.background#031006
sideBar.border#33ff77
sideBar.foreground#ccffee
statusBar.background#337755
statusBar.border#33ff77
statusBar.foreground#ffffff
tab.activeBackground#061a0c
tab.activeBorder#33ff77
tab.activeForeground#ffffff
tab.border#11cc44
tab.inactiveBackground#031006
tab.inactiveForeground#bbffdd
terminal.background#061a0c
titleBar.activeBackground#061a0c
titleBar.activeForeground#ffffff
titleBar.border#33ff77

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#33ff77	—
comment	#aaccbb	italic
constant.language	#aaffcc	—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#bbddff	—
constant.regexp	#ffccee	—
entity.name.tag	#aaffcc	—
entity.name.tag.css	#ccffdd	—
entity.other.attribute-name	#aaffcc	—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name	#ccffdd	—
invalid	#ff7777	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#aaffcc	—
markup.italic	—	italic
markup.inserted	#bbddff	—
markup.deleted	#ffccee	—
markup.changed	#33ff77	—
meta.selector	#ccffdd	—
punctuation.definition.tag	#bbffdd	—
meta.preprocessor	#33ff77	—
meta.preprocessor.string	#ffccee	—
meta.preprocessor.numeric	#bbddff	—
meta.structure.dictionary.key.python	#aaffcc	—
storage	#aaffcc	—
storage.type	#aaffcc	—
storage.modifier	#aaffcc	—
string	#bbddff	—
string.tag	#bbddff	—
string.value	#bbddff	—
string.regexp	#ffccee	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#33ff77	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less	#ffffff	—
keyword	#aaffcc	—
keyword.control	#aaffcc	—
keyword.operator	#ffffff	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#aaffcc	—
keyword.other.unit	#bbddff	—
support.function.git-rebase	#ffffff	—
constant.sha.git-rebase	#bbddff	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#ffffff	—
variable.language.this	#aaffcc	—
entity.name.function, support.function, support.constant.handlebars	#ccffdd	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type	#33ff77	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#33ff77	—
keyword.control	#aaffcc	—
variable, meta.definition.variable.name, support.variable	#aaffcc	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#aaffcc	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#bbddff	—

VS Code preview

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

TezuNextia — Tezu Green Light

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f7fffa
activityBar.foreground#475847
editor.background#e6ffee
editor.findMatchBackground#a0d0ba
editor.findMatchHighlightBackground#b0e0ca
editor.foreground#123526
editor.lineHighlightBorder#00000008
editor.selectionBackground#c7e8d7
editor.selectionHighlightBackground#d5f5e5
editorCursor.foreground#006633
editorGroupHeader.tabsBackground#f2fff6
editorIndentGuide.activeBackground#a0d0ba
editorIndentGuide.background#c7e8d7
editorLineNumber.activeForeground#225544
editorLineNumber.foreground#446644
editorWhitespace.foreground#b0e0ca
focusBorder#00ff5560
panel.background#f2fff6
sideBar.background#f2fff6
sideBar.foreground#374837
statusBar.background#c7e8d5
statusBar.foreground#102610
tab.activeBackground#e6ffee
tab.activeForeground#123526
tab.inactiveBackground#f2fff6
tab.inactiveForeground#548264
terminal.background#e6ffee
titleBar.activeBackground#e6ffee
titleBar.activeForeground#123526

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#00ff55	—
comment	#667775	italic
constant.language	#426d48	—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#007799	—
constant.regexp	#954569	—
entity.name.tag	#426d48	—
entity.name.tag.css	#007766	—
entity.other.attribute-name	#556644	—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name	#007766	—
invalid	#dd0000	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#556644	—
markup.italic	—	italic
markup.inserted	#007799	—
markup.deleted	#954569	—
markup.changed	#00ff55	—
meta.selector	#007766	—
punctuation.definition.tag	#548264	—
meta.preprocessor	#00ff55	—
meta.preprocessor.string	#954569	—
meta.preprocessor.numeric	#007799	—
meta.structure.dictionary.key.python	#556644	—
storage	#426d48	—
storage.type	#426d48	—
storage.modifier	#426d48	—
string	#007799	—
string.tag	#007799	—
string.value	#007799	—
string.regexp	#954569	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#00ff55	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less	#123526	—
keyword	#426d48	—
keyword.control	#426d48	—
keyword.operator	#123526	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#426d48	—
keyword.other.unit	#007799	—
support.function.git-rebase	#123526	—
constant.sha.git-rebase	#007799	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#123526	—
variable.language.this	#426d48	—
entity.name.function, support.function, support.constant.handlebars	#007766	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type	#00ff55	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#00ff55	—
keyword.control	#426d48	—
variable, meta.definition.variable.name, support.variable	#556644	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#556644	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#007799	—

VS Code preview

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

TezuNextia — Tezu Green Light HC

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f7fffa
activityBar.border#000000
activityBar.foreground#000000
contrastBorder#000000
dropdown.border#000000
editor.background#e6ffee
editor.findMatchBackground#a0d0ba
editor.findMatchHighlightBackground#b0e0ca
editor.foreground#000000
editor.lineHighlightBorder#00000040
editor.selectionBackground#c7e8d7
editor.selectionHighlightBackground#d5f5e5
editorCursor.foreground#000000
editorGroup.border#000000
editorGroupHeader.tabsBackground#f2fff6
editorIndentGuide.activeBackground#000000
editorIndentGuide.background#cccccc
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#444444
editorWhitespace.foreground#888888
editorWidget.border#000000
focusBorder#00ff55
input.border#000000
list.focusOutline#000000
panel.background#f2fff6
panel.border#000000
sideBar.background#f2fff6
sideBar.border#000000
sideBar.foreground#000000
statusBar.background#c7e8d5
statusBar.border#000000
statusBar.foreground#000000
tab.activeBackground#e6ffee
tab.activeBorder#000000
tab.activeForeground#000000
tab.border#000000
tab.inactiveBackground#f2fff6
tab.inactiveForeground#444444
terminal.background#e6ffee
titleBar.activeBackground#e6ffee
titleBar.activeForeground#000000
titleBar.border#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#000000	—
comment	#666666	italic
constant.language	#000000	—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#000000	—
constant.regexp	#000000	—
entity.name.tag	#000000	—
entity.name.tag.css	#000000	—
entity.other.attribute-name	#000000	—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name	#000000	—
invalid	#ff0000	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#000000	—
markup.italic	—	italic
markup.inserted	#000000	—
markup.deleted	#000000	—
markup.changed	#000000	—
meta.selector	#000000	—
punctuation.definition.tag	#000000	—
meta.preprocessor	#000000	—
meta.preprocessor.string	#000000	—
meta.preprocessor.numeric	#000000	—
meta.structure.dictionary.key.python	#000000	—
meta.diff.range	#000000	—
storage	#000000	—
storage.type	#000000	—
storage.modifier	#000000	—
string	#000000	—
string.tag	#000000	—
string.other.link	#000000	—
string.regexp	#000000	—
string.interpolated	#000000	—
string.template	#000000	—
source.regexp, string.regexp.character-class, string.regexp.group, string.regexp.quantifier	#000000	—
support.function	#000000	—
support.constant	#000000	—
support.type	#000000	—
support.class	#000000	—
support.variable	#000000	—
support.other.variable	#000000	—
variable	#000000	—
variable.parameter	#000000	—
variable.language	#000000	—
variable.other	#000000	—
keyword	#000000	—
keyword.control	#000000	—
keyword.operator	#000000	—
keyword.other.special-method	#000000	—
keyword.other.unit	#000000	—
entity.name.function	#000000	—
entity.name.class	#000000	—
entity.name.type	#000000	—
entity.other.inherited-class	#000000	—
punctuation.definition.comment	#666666	—
punctuation.definition.string	#000000	—
punctuation.definition.variable	#000000	—
punctuation.definition.string.begin.html	#000000	—
punctuation.definition.string.end.html	#000000	—
punctuation.section.embedded	#000000	—
punctuation.separator.key-value	#000000	—