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.ts

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...

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

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