theme-stayfresh

Name: theme-stayfresh
Author: Piotrek Fracek

Publisher: Piotrek FracekThemes in package: 5

Just nice fresh theme

Open in VS Code GitHub

Color themes

VS Code preview

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

theme-stayfresh — stayfresh-blue

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
string	#D8FF85	—
meta.brace.square, punctuation.definition.binding-pattern	#ACB8EB	—
meta.template.expression, support.variable.property.dom, support.class.builtin, support.constant.math	#ffffff	—
constant.numeric	#FDCF4E	—
constant.language	#FDFD45	—
constant.language.boolean.true, constant.language.boolean.false	#FDCF4E	—
constant.language.undefined, constant.language.null	#FDCF4E	—
constant.character, constant.other, constant.id.tag.jade	#C59FFB	—
keyword	#FF5DBF	—
storage	#FF5DBF	—
storage.type	#FF5DBF	—
entity.name.class	#2FF3DC	—
entity.other.inherited-class	#2FF3DC	underline
entity.name.function	#2FF3DC	—
variable.parameter	#FDFD45	—
entity.name.tag	#FF5DBF	—
entity.other.attribute-name	#2FF3DC	—
support.function	#FF5DBF	—
support.constant	#FF5DBF	—
support.type, support.class	#FF5DBF	—
invalid	#ffffff	—
invalid.deprecated	#ffffff	—
meta.diff, meta.diff.header	#ACB8EB	—
markup.deleted	#FF5DBF	—
markup.inserted	#2FF3DC	—
markup.changed	#FDFD45	—
constant.numeric.line-number.find-in-files - match	#FF5DBF	—
entity.name.filename.find-in-files	#FDFD45	—
meta.object-literal.key.js	#ffffff	italic
punctuation.definition.tag.html, constant.name.attribute.tag.jade, punctuation.definition.tag.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#ACB8EB	—
punctuation.accessor, punctuation.definition.block, punctuation.separator.key-value, punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.template-expression	#ACB8EB	—
entity.name.function, meta.require, support.function.any-method, meta.function-call, support.function, keyword.other.special-method, meta.block-level, meta.function-call.method.with-arguments variable.function	#2FF3DC	—
support.variable.object.node.js	#C59FFB	—
comment, comment.line.double-slash, punctuation.definition.comment	#246BC4	—
source.css, keyword.operator.combinator.css, keyword.operator.less	#ffffff	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#D8FF85	—
entity.other.attribute-name.class	#FDFD45	—
entity.other.attribute-name.id	#C59FFB	—
meta.property-name.css, keyword.other.unit, support.type.property-name	#ACB8EB	—
support.function.name.sass, meta.property-list.css.sass, meta.function.include.sass	#ffffff	—
constant.numeric.css, constant.numeric.scss, constant.numeric.sass, string.quoted.double.css.sass, support.constant.property-value.css, constant.other.rgb-value.css, support.constant.property-value.scss	#ffffff	bold
variable.scss, meta.variable-usage.sass, meta.variable-declaration.sass, variable.other.sass	#FDCF4E	—
entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading	#FF5DBF	—
beginning.punctuation.definition.list.markdown	#FDCF4E	—
punctuation.definition.markdown	#C59FFB	—
markup.bold.markdown	#ffffff	bold
meta.separator.markdown, markup.raw.block.markdown, markup.raw.inline.markdown	#ACB8EB	—
storage.type.class.jsdoc	#CD94D9	—
entity.name.type.instance.jsdoc	#B6AEF1	—
variable.other.jsdoc	#CCD4A9	—

VS Code preview

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

theme-stayfresh — stayfresh-highcontrast

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
string	#D7FF5F	—
meta.brace.square, punctuation.definition.binding-pattern	#B5BCDA	—
meta.template.expression, support.variable.property.dom, support.class.builtin, support.constant.math	#ffffff	—
constant.numeric	#FFD427	—
constant.language	#FFFF29	—
constant.language.boolean.true, constant.language.boolean.false	#FFD427	—
constant.language.undefined, constant.language.null	#FFD427	—
constant.character, constant.other, constant.id.tag.jade	#CF9EFF	—
keyword	#FF4FBA	—
storage	#FF4FBA	—
storage.type	#FF4FBA	—
entity.name.class	#22F4E5	—
entity.other.inherited-class	#22F4E5	underline
entity.name.function	#22F4E5	—
variable.parameter	#FFFF29	—
entity.name.tag	#FF4FBA	—
entity.other.attribute-name	#22F4E5	—
support.function	#FF4FBA	—
support.constant	#FF4FBA	—
support.type, support.class	#FF4FBA	—
invalid	#ffffff	—
invalid.deprecated	#ffffff	—
meta.diff, meta.diff.header	#B5BCDA	—
markup.deleted	#FF4FBA	—
markup.inserted	#22F4E5	—
markup.changed	#FFFF29	—
constant.numeric.line-number.find-in-files - match	#FF4FBA	—
entity.name.filename.find-in-files	#FFFF29	—
meta.object-literal.key.js	#ffffff	italic
punctuation.definition.tag.html, constant.name.attribute.tag.jade, punctuation.definition.tag.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#B5BCDA	—
punctuation.accessor, punctuation.definition.block, punctuation.separator.key-value, punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.template-expression	#B5BCDA	—
entity.name.function, meta.require, support.function.any-method, meta.function-call, support.function, keyword.other.special-method, meta.block-level, meta.function-call.method.with-arguments variable.function	#22F4E5	—
support.variable.object.node.js	#CF9EFF	—
comment, comment.line.double-slash, punctuation.definition.comment	#495C70	—
source.css, keyword.operator.combinator.css, keyword.operator.less	#ffffff	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#D7FF5F	—
entity.other.attribute-name.class	#FFFF29	—
entity.other.attribute-name.id	#CF9EFF	—
meta.property-name.css, keyword.other.unit, support.type.property-name	#B5BCDA	—
support.function.name.sass, meta.property-list.css.sass, meta.function.include.sass	#ffffff	—
constant.numeric.css, constant.numeric.scss, constant.numeric.sass, string.quoted.double.css.sass, support.constant.property-value.css, constant.other.rgb-value.css, support.constant.property-value.scss	#ffffff	bold
variable.scss, meta.variable-usage.sass, meta.variable-declaration.sass, variable.other.sass	#FFD427	—
entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading	#FF4FBA	—
beginning.punctuation.definition.list.markdown	#FFD427	—
punctuation.definition.markdown	#CF9EFF	—
markup.bold.markdown	#ffffff	bold
meta.separator.markdown, markup.raw.block.markdown, markup.raw.inline.markdown	#B5BCDA	—
storage.type.class.jsdoc	#D390CD	—
entity.name.type.instance.jsdoc	#BFB0E9	—
variable.other.jsdoc	#D3D793	—

VS Code preview

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

theme-stayfresh — stayfresh-lowcontrast

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
string	#D4FF8B	—
meta.brace.square, punctuation.definition.binding-pattern	#B1C5DC	—
meta.template.expression, support.variable.property.dom, support.class.builtin, support.constant.math	#ffffff	—
constant.numeric	#FFD85B	—
constant.language	#FDFD60	—
constant.language.boolean.true, constant.language.boolean.false	#FFD85B	—
constant.language.undefined, constant.language.null	#FFD85B	—
constant.character, constant.other, constant.id.tag.jade	#C5AEFF	—
keyword	#FF70C1	—
storage	#FF70C1	—
storage.type	#FF70C1	—
entity.name.class	#42ECE3	—
entity.other.inherited-class	#42ECE3	underline
entity.name.function	#42ECE3	—
variable.parameter	#FDFD60	—
entity.name.tag	#FF70C1	—
entity.other.attribute-name	#42ECE3	—
support.function	#FF70C1	—
support.constant	#FF70C1	—
support.type, support.class	#FF70C1	—
invalid	#ffffff	—
invalid.deprecated	#ffffff	—
meta.diff, meta.diff.header	#B1C5DC	—
markup.deleted	#FF70C1	—
markup.inserted	#42ECE3	—
markup.changed	#FDFD60	—
constant.numeric.line-number.find-in-files - match	#FF70C1	—
entity.name.filename.find-in-files	#FDFD60	—
meta.object-literal.key.js	#ffffff	italic
punctuation.definition.tag.html, constant.name.attribute.tag.jade, punctuation.definition.tag.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#B1C5DC	—
punctuation.accessor, punctuation.definition.block, punctuation.separator.key-value, punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.template-expression	#B1C5DC	—
entity.name.function, meta.require, support.function.any-method, meta.function-call, support.function, keyword.other.special-method, meta.block-level, meta.function-call.method.with-arguments variable.function	#42ECE3	—
support.variable.object.node.js	#C5AEFF	—
comment, comment.line.double-slash, punctuation.definition.comment	#547587	—
source.css, keyword.operator.combinator.css, keyword.operator.less	#ffffff	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#D4FF8B	—
entity.other.attribute-name.class	#FDFD60	—
entity.other.attribute-name.id	#C5AEFF	—
meta.property-name.css, keyword.other.unit, support.type.property-name	#B1C5DC	—
support.function.name.sass, meta.property-list.css.sass, meta.function.include.sass	#ffffff	—
constant.numeric.css, constant.numeric.scss, constant.numeric.sass, string.quoted.double.css.sass, support.constant.property-value.css, constant.other.rgb-value.css, support.constant.property-value.scss	#ffffff	bold
variable.scss, meta.variable-usage.sass, meta.variable-declaration.sass, variable.other.sass	#FFD85B	—
entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading	#FF70C1	—
beginning.punctuation.definition.list.markdown	#FFD85B	—
punctuation.definition.markdown	#C5AEFF	—
markup.bold.markdown	#ffffff	bold
meta.separator.markdown, markup.raw.block.markdown, markup.raw.inline.markdown	#B1C5DC	—
storage.type.class.jsdoc	#D0A3D1	—
entity.name.type.instance.jsdoc	#B9BCEA	—
variable.other.jsdoc	#CFDBAA	—

VS Code preview

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

theme-stayfresh — stayfresh-main

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
string	#d9ff85	—
meta.brace.square, punctuation.definition.binding-pattern	#b5bacf	—
meta.template.expression, support.variable.property.dom, support.class.builtin, support.constant.math	#ffffff	—
constant.numeric	#fad057	—
constant.language	#fbfa5f	—
constant.language.boolean.true, constant.language.boolean.false	#fad057	—
constant.language.undefined, constant.language.null	#fad057	—
constant.character, constant.other, constant.id.tag.jade	#c5a3f5	—
keyword	#ff62ad	—
storage	#ff62ad	—
storage.type	#ff62ad	—
entity.name.class	#50e3d9	—
entity.other.inherited-class	#50e3d9	underline
entity.name.function	#50e3d9	—
variable.parameter	#fbfa5f	—
entity.name.tag	#ff62ad	—
entity.other.attribute-name	#50e3d9	—
support.function	#ff62ad	—
support.constant	#ff62ad	—
support.type, support.class	#ff62ad	—
invalid	#ffffff	—
invalid.deprecated	#ffffff	—
meta.diff, meta.diff.header	#b5bacf	—
markup.deleted	#ff62ad	—
markup.inserted	#50e3d9	—
markup.changed	#fbfa5f	—
constant.numeric.line-number.find-in-files - match	#ff62ad	—
entity.name.filename.find-in-files	#fbfa5f	—
meta.object-literal.key.js	#ffffff	italic
punctuation.definition.tag.html, constant.name.attribute.tag.jade, punctuation.definition.tag.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#b5bacf	—
punctuation.accessor, punctuation.definition.block, punctuation.separator.key-value, punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.template-expression	#b5bacf	—
entity.name.function, meta.require, support.function.any-method, meta.function-call, support.function, keyword.other.special-method, meta.block-level, meta.function-call.method.with-arguments variable.function	#50e3d9	—
support.variable.object.node.js	#c5a3f5	—
comment, comment.line.double-slash, punctuation.definition.comment	#556270	—
source.css, keyword.operator.combinator.css, keyword.operator.less	#ffffff	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#d9ff85	—
entity.other.attribute-name.class	#fbfa5f	—
entity.other.attribute-name.id	#c5a3f5	—
meta.property-name.css, keyword.other.unit, support.type.property-name	#b5bacf	—
support.function.name.sass, meta.property-list.css.sass, meta.function.include.sass	#ffffff	—
constant.numeric.css, constant.numeric.scss, constant.numeric.sass, string.quoted.double.css.sass, support.constant.property-value.css, constant.other.rgb-value.css, support.constant.property-value.scss	#ffffff	bold
variable.scss, meta.variable-usage.sass, meta.variable-declaration.sass, variable.other.sass	#fad057	—
entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading	#ff62ad	—
beginning.punctuation.definition.list.markdown	#fad057	—
punctuation.definition.markdown	#c5a3f5	—
markup.bold.markdown	#ffffff	bold
meta.separator.markdown, markup.raw.block.markdown, markup.raw.inline.markdown	#b5bacf	—
storage.type.class.jsdoc	#D397C1	—
entity.name.type.instance.jsdoc	#BBB1DE	—
variable.other.jsdoc	#D1D4A2	—