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 Night Bright

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#0B1015
activityBar.foreground#76DFEB
editor.background#0D1218
editor.foreground#E8F3FF
editor.lineHighlightBackground#111720
editor.selectionBackground#223445
editor.wordHighlightBackground#223445
editorGroupHeader.tabsBackground#0B1015
sideBar.background#0D1218
sideBar.foreground#B7C8DC
statusBar.background#0B1015
statusBar.foreground#76DFEB
tab.activeBackground#0D1218
tab.inactiveBackground#0B1015
titleBar.activeBackground#0B1015

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	#627185	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	#D8E3F0	—
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	#D7A2FA	—
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	#76DFEB	—
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	#76DFEB	—
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	#92BAFF	—
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	#FF9C7C	—
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	#9DD8A1	—
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	#FFC87C	—
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	#FFB7D4	—
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, meta.property-list.css	#76DFEB	—
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link, markup.underline, markup.raw.block	#92BAFF	—
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	#D7A2FA	italic
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line, meta.template.expression, meta.embedded.expression	#76DFEB	—

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