Cosmic Theme

Name: Cosmic Theme
Author: Carmelo Pullara

Publisher: Carmelo PullaraThemes in package: 1

Cosmic Theme for Visual Studio Code

Open in VS Code GitHub

VS Code preview

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

Cosmic Theme — Cosmic Theme

fetchUser.ts

index.ts

README.md

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#21242b
activityBar.border#1f2228
activityBar.dropBackground#0b0c0e
activityBar.foreground#bebec5
activityBarBadge.background#1c83e9
activityBarBadge.foreground#f2f2f2
badge.background#1c83e9
badge.foreground#fff
button.background#ef3b7d
button.foreground#fff
button.hoverBackground#e41360
descriptionForeground#bebec5
diffEditor.insertedTextBackground#6bd67933
diffEditor.insertedTextBorder#6bd67955
diffEditor.removedTextBackground#ef3b7d33
diffEditor.removedTextBorder#ef3b7d55
dropdown.background#1b1e24
dropdown.border#181a1f
dropdown.foreground#f2f2f2
dropdown.listBackground#1f2228
editor.background#21242b
editor.findMatchBackground#79b6f280
editor.findMatchHighlightBackground#90c3f425
editor.findRangeHighlightBackground#4d546585
editor.foreground#f2f2f2
editor.hoverHighlightBackground#42485670
editor.inactiveSelectionBackground#42485680
editor.lineHighlightBackground#292c35
editor.lineHighlightBorder#2f343e
editor.rangeHighlightBackground#25293180
editor.selectionBackground#4d5465
editor.selectionHighlightBackground#4d546585
editor.wordHighlightBackground#4d546550
editor.wordHighlightStrongBackground#4d546550
editorCodeLens.foreground#bebec5
editorCursor.foreground#bebec5
editorGroupHeader.noTabsBackground#1f2228
editorGroupHeader.tabsBackground#1f2228
editorGroupHeader.tabsBorder#21242b
editorGutter.addedBackground#6bd679
editorGutter.deletedBackground#ef3b7d
editorGutter.modifiedBackground#79b6f2
editorIndentGuide.activeBackground#424856
editorIndentGuide.background#2c3039
editorLineNumber.activeForeground#f2f2f2
editorLineNumber.foreground#888895
editorLink.activeForeground#79b6f2
editorSuggestWidget.background#1a1d22
editorSuggestWidget.border#16181d
editorSuggestWidget.foreground#bebec5
editorSuggestWidget.highlightForeground#79b6f2
editorSuggestWidget.selectedBackground#2c3039
editorWidget.background#1d1f25
editorWidget.border#181a1f
foreground#f2f2f2
input.background#2f343e
input.border#373c48
input.foreground#f2f2f2
input.placeholderForeground#bebec5
inputOption.activeBorder#79b6f2
inputValidation.errorBackground#2f343e
inputValidation.errorBorder#ef3b7d
inputValidation.infoBackground#2f343e
inputValidation.infoBorder#79b6f2
inputValidation.warningBackground#2f343e
inputValidation.warningBorder#fac863
list.activeSelectionBackground#323641
list.activeSelectionForeground#f2f2f2
list.dropBackground#1a1d22
list.focusBackground#1a1d22
list.focusForeground#bebec5
list.highlightForeground#79b6f2
list.hoverBackground#424856
list.hoverForeground#f2f2f2
list.inactiveSelectionBackground#323641
list.inactiveSelectionForeground#f2f2f2
notification.background#1a1d22
notification.border#16181d
panel.background#21242b
panelTitle.activeBorder#66acf0
panelTitle.activeForeground#f2f2f2
panelTitle.inactiveForeground#bebec5
pickerGroup.border#16181d
pickerGroup.foreground#bebec5
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#16181d
scrollbarSlider.background#323641
scrollbarSlider.hoverBackground#3d424f
sideBar.background#24282f
sideBar.border#1f2228
sideBar.foreground#bebec5
sideBarTitle.foreground#bebec5
statusBar.background#21242b
statusBar.border#1f2228
statusBar.foreground#bebec5
statusBar.noFolderBackground#21242b
statusBar.noFolderForeground#bebec5
statusBarItem.activeBackground#282b34
statusBarItem.hoverBackground#2e323c
tab.activeBackground#181a1f
tab.activeBorder#66acf0
tab.activeForeground#f2f2f2
tab.border#181a1f
tab.inactiveBackground#24282f
tab.inactiveForeground#bebec5
tab.unfocusedActiveForeground#bebec5
tab.unfocusedInactiveForeground#bebec5
terminal.ansiBlack#000000
terminal.ansiBlue#79b6f2
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#79b6f2
terminal.ansiBrightCyan#55b5db
terminal.ansiBrightGreen#6bd679
terminal.ansiBrightMagenta#ff69c1
terminal.ansiBrightRed#ef3b7d
terminal.ansiBrightWhite#f2f2f2
terminal.ansiBrightYellow#fac863
terminal.ansiCyan#55b5db
terminal.ansiGreen#6bd679
terminal.ansiMagenta#ff69c1
terminal.ansiRed#ef3b7d
terminal.ansiWhite#f2f2f2
terminal.ansiYellow#fac863
terminal.background#21242b
terminal.foreground#f2f2f2
terminalCursor.background#bebec5
terminalCursor.foreground#bebec5
titleBar.activeBackground#1f2228
widget.shadow#14161a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#f2f2f2	—
comment, punctuation.definition.comment	#bebec5	italic
variable, string constant.other.placeholder	#f2f2f2	—
constant.other.php	#79b6f2	—
constant.other.color, meta.jsx.children.js.jsx	#f2f2f2	—
invalid, invalid.illegal	#ef3b7d	—
invalid.deprecated	#a77afe	—
keyword, storage.type, storage.modifier	#ef3b7d	italic
punctuation, meta.tag, meta.tag.attributes, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator.assignment.js.jsx	#bebec5	—
keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, storage.type.function.arrow	#a77afe	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#ef3b7d	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#79b6f2	—
variable.other.constant	#79b6f2	—
support.other.variable, string.other.link	#79b6f2	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#a77afe	—
variable.parameter, support.class.console.js	#f2f2f2	—
variable.parameter.function.language.special	#ef3b7d	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#fac863	normal
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#fac863	—
support.type	#79b6f2	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#79b6f2	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ef3b7d	—
variable.language	#ef3b7d	italic
entity.name.method.js	#79b6f2	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#79b6f2	—
entity.other.attribute-name	#fac863	—
string.quoted.double.html, string.quoted.jade, string.quoted.double.js.jsx	#6bd679	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#fac863	italic
entity.other.attribute-name.class	#fac863	—
entity.other.attribute-name.id	#79b6f2	—
markup.inserted	#6bd679	—
markup.deleted	#ef3b7d	—
markup.changed	#a77afe	—
string.regexp	#79b6f2	—
constant.character.escape	#79b6f2	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#79b6f2	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ef3b7d	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}!`;
}