Cosmic Night Theme Collection

Name: Cosmic Night Theme Collection
Author: CosmicNight

Publisher: CosmicNightThemes in package: 12

🌌 A comprehensive collection of 11 cosmic-inspired VS Code themes with modern file icons for development

Open in VS Code GitHub

Color themes

VS Code preview

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

Cosmic Night Theme Collection — Cosmic Day

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#F0F4FF
activityBar.foreground#0090AA
button.background#0090AA
button.foreground#FFFFFF
button.hoverBackground#00A8C7
editor.background#F8FAFF
editor.foreground#2A3343
editor.lineHighlightBackground#F5F8FF
editor.selectionBackground#E0EAFF
editor.wordHighlightBackground#E0EAFF
editorGroupHeader.tabsBackground#F0F4FF
focusBorder#0090AA50
inputOption.activeBorder#0090AA
progressBar.background#0090AA
sideBar.background#F8FAFF
sideBar.foreground#4A5569
statusBar.background#F0F4FF
statusBar.foreground#0090AA
tab.activeBackground#F8FAFF
tab.inactiveBackground#F0F4FF
titleBar.activeBackground#F0F4FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.line.double-slash, comment.block, comment.block.documentation, comment.line.number-sign.python, comment.line.number-sign.ruby	#8792A8	italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.parameter, variable.other.object, variable.language, variable.other.property, variable.other.php, variable.other.ruby, variable.other.member	#2A3343	—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other.special-method, keyword.other.important, storage.type.class.js, storage.type.function.js, storage.type.class.ts, storage.type.function.ts, storage.type.rust, storage.type.go	#CC1D8D	—
keyword.operator, punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.definition.template-expression, punctuation.section, meta.bracket	#0090AA	—
entity.name.tag, support.class.component, entity.name.tag.css, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag	#0090AA	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.method-call, meta.function, support.function.builtin, support.function.kernel, support.function.magic.python	#1A70C7	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key	#C76A1D	—
string, string.quoted.single, string.quoted.double, string.template, string.interpolated, string.regexp, string.other.link, punctuation.definition.string	#1FA052	—
entity.name.type, support.type, support.class, storage.type.cs, storage.type.java, storage.type.kotlin, storage.type.swift, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.enum, entity.name.interface	#947100	—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#CC1D8D	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.type.annotation, punctuation.decorator, meta.decorator entity.name.function, meta.decorator variable.other.readwrite, meta.decorator punctuation.decorator	#CC1D8D	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name	#0090AA	—
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link	#0090AA	—
variable.language.self, variable.language.this, variable.language.super, variable.language.special.self.python, variable.language.this.php	#CC1D8D	italic

VS Code preview

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

Cosmic Night Theme Collection — Cosmic Night

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#090D12
activityBar.foreground#66CFDB
editor.background#0B1015
editor.foreground#D8E3F0
editor.lineHighlightBackground#0F1419
editor.selectionBackground#1C2C3B
editor.wordHighlightBackground#1C2C3B
editorGroupHeader.tabsBackground#090D12
sideBar.background#0B1015
sideBar.foreground#A7B8CC
statusBar.background#090D12
statusBar.foreground#66CFDB
tab.activeBackground#0B1015
tab.inactiveBackground#090D12
titleBar.activeBackground#090D12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation, comment.block.javadoc, comment.line.double-slash, comment.line.number-sign.python, comment.line.hash.ruby, comment.block.documentation.rust, comment.line.documentation.rust, comment.block.documentation.ts, comment.block.html, comment.block.documentation.php	#526175	italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.parameter, variable.other.object, variable.language, variable.other.property, variable.other.member, variable.scss, variable.other.php, variable.other.normal.shell, variable.other.special.rust, variable.other.readwrite.global	#C8D6E5	—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.control.flow, storage.type.class.python, storage.type.function.python, keyword.other.fn.rust, storage.type.cs, keyword.package.go, storage.type.kotlin, keyword.control.import, keyword.control.export, keyword.control.default, storage.type.class.ts	#C792EA	—
keyword.operator, punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.optional	#66CFDB	—
entity.name.tag, support.class.component, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml	#66CFDB	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.method-call, meta.function, support.function.builtin, support.function.core, meta.function.python, entity.name.function.go, entity.name.function.rust, entity.name.function.php, support.function.magic	#82AAFF	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key, support.constant.property-value, constant.numeric.decimal, constant.numeric.integer, constant.numeric.hex	#F78C6C	—
string, string.quoted.single, string.quoted.double, string.template, string.interpolated, string.regexp, string.other.link, string.quoted.backtick, string.unquoted.heredoc, string.quoted.triple, string.quoted.docstring.multi.python	#8DC891	—
entity.name.type, support.type, support.class, storage.type.generic, storage.type.primitive, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.enum, entity.name.interface, support.type.builtin, storage.type.builtin, entity.name.type.class, entity.name.type.module	#FFB86C	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name	#66CFDB	—
support.constant.property-value, support.constant.font-name, support.constant.color, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value	#8DC891	—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, meta.decorator, meta.decorator entity.name.function, meta.decorator variable.other.readwrite, meta.decorator punctuation.decorator	#FFA7C4	—
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link, markup.underline, markup.raw.block	#66CFDB	bold
markup.changed, markup.deleted, markup.inserted	#FFB86C	—
variable.language.self, variable.language.this, variable.language.super, variable.language.special.self.python, variable.language.this.php, variable.language.this.ts, variable.language.arguments	#C792EA	italic
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line, meta.template.expression	#66CFDB	—
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#66CFDB	—
variable.other.property.js, variable.other.object.property, variable.other.property.ts, variable.other.property.tsx	#82AAFF	—

VS Code preview

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

Cosmic Night Theme Collection — Cosmic Night Amber

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#16130F
activityBar.foreground#FFB84A
button.background#FFB84A
button.foreground#16130F
button.hoverBackground#FFCB7F
editor.background#1A1711
editor.foreground#F3EDE2
editor.lineHighlightBackground#2E2314
editor.selectionBackground#4F3D1F
editor.wordHighlightBackground#4F3D1F
editorGroupHeader.tabsBackground#16130F
focusBorder#FFB84A50
inputOption.activeBorder#FFB84A
progressBar.background#FFB84A
sideBar.background#1A1711
sideBar.foreground#E2D1B8
statusBar.background#16130F
statusBar.foreground#FFB84A
tab.activeBackground#1A1711
tab.inactiveBackground#16130F
titleBar.activeBackground#16130F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.line.double-slash, comment.block, comment.block.documentation, comment.line.number-sign.python, comment.line.hash.ruby, comment.line.percentage.ruby	#9F8661	italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.parameter, variable.language, variable.other.property, variable.other.ruby, variable.other.php, variable.other.normal.shell, variable.other.special.rust	#F3EDE2	—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.declaration, keyword.control.flow, storage.type.class.python, storage.type.function.python, storage.type.js, storage.type.ts, storage.type.java, storage.type.kotlin, storage.type.rust, storage.type.cs, storage.type.go	#FFB84A	—
keyword.operator, punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment	#FFD700	—
entity.name.tag, support.class.component, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.css, entity.name.tag.custom, punctuation.definition.tag	#FFC773	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.method-call, meta.function, support.function.builtin, support.function.core, support.function.dom, support.function.php, support.function.magic.python	#FFD68A	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key, support.constant.property-value, constant.numeric.decimal	#FFA94D	—
string, string.quoted.single, string.quoted.double, string.template, string.interpolated, string.regexp, string.other.link, string.quoted.backtick, string.unquoted.heredoc	#98FF98	—
entity.name.type, support.type, support.class, storage.type.generic, storage.type.primitive, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.enum, entity.name.interface, support.type.primitive	#FFE5B4	—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FFD68A	—
meta.decorator, meta.decorator entity.name.function, meta.decorator variable.other.readwrite, meta.decorator punctuation.decorator, storage.type.annotation, punctuation.definition.annotation	#FFB84A	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name, support.constant.property-value.css	#FFC773	—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.async, keyword.control.await, storage.type.class.python, storage.type.function.python, storage.modifier.rust, keyword.declaration.rust	#FFB84A	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line	#FFD700	—

VS Code preview

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

Cosmic Night Theme Collection — Cosmic Night Aurora

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#110F17
activityBar.foreground#B78AFF
editor.background#13111B
editor.foreground#E8E2F3
editor.lineHighlightBackground#171422
editor.selectionBackground#2D1F4F
editor.wordHighlightBackground#2D1F4F
editorGroupHeader.tabsBackground#110F17
sideBar.background#13111B
sideBar.foreground#C4B8E2
statusBar.background#110F17
statusBar.foreground#B78AFF
tab.activeBackground#13111B
tab.inactiveBackground#110F17
titleBar.activeBackground#110F17

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation, comment.block.javadoc, comment.line.double-slash, comment.line.number-sign.python, comment.line.hash.ruby, comment.block.documentation.rust, comment.block.documentation.ts	#6B617F	italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.parameter, variable.other.object, variable.language, variable.other.property, variable.other.member, variable.scss, variable.other.php	#E8E2F3	—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.control.flow, storage.type.class.python, storage.type.function.python, keyword.other.fn.rust, storage.type.cs, keyword.package.go, storage.type.kotlin	#FF8FD6	—
keyword.operator, punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator.arithmetic, keyword.operator.comparison	#B78AFF	—
entity.name.tag, support.class.component, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag, meta.tag.sgml, meta.tag.html	#C79BFF	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.method-call, meta.function, support.function.builtin, support.function.core, meta.function.python, entity.name.function.go	#FF9FB8	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key, support.constant.property-value	#FFB67F	—
string, string.quoted.single, string.quoted.double, string.template, string.interpolated, string.regexp, string.other.link, string.quoted.backtick, string.unquoted.heredoc, string.quoted.triple	#9DFFB3	—
entity.name.type, support.type, support.class, storage.type.generic, storage.type.primitive, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.enum, entity.name.interface, support.type.builtin	#FFE5A3	—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, meta.decorator, meta.decorator entity.name.function, meta.decorator variable.other.readwrite	#FF9FB8	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.constant.property-value.css, support.constant.font-name, meta.property-value.css	#C79BFF	—
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link, markup.underline	#B78AFF	—
variable.language.self, variable.language.this, variable.language.super, variable.language.special.self.python, variable.language.this.php, variable.language.this.ts	#FF8FD6	italic
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line, meta.template.expression	#B78AFF	—