Material Cosmos

Name: Material Cosmos
Author: Bo Lingen

Publisher: Bo LingenThemes in package: 2

Through the cosmos, darkly: a set of dark, flat, material-esque themes.

Open in VS Code GitHub

Color themes

VS Code preview

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

Material Cosmos — Material Cosmos: Supernova

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#263238
activityBar.foreground#a1b0b8
activityBarBadge.background#39b0e5
button.background#39b0e5
button.foreground#f5f5f5
dropdown.background#1e282c
editor.background#263238
editor.findMatchHighlightBackground#6db26644
editor.foreground#cdd3de
editor.lineHighlightBackground#263238
editor.selectionBackground#4f5b66
editorCursor.foreground#c0c5ce
editorGroupHeader.tabsBackground#1e282c
editorIndentGuide.background#3b4d56
editorLineNumber.foreground#4b5b64
editorSuggestWidget.background#1e282c
editorWhitespace.foreground#a1b0b8
editorWidget.background#1e282c
extensionButton.prominentBackground#6db26675
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#6db266
focusBorder#263238
foreground#bec8ce
input.background#1e282c
list.activeSelectionBackground#39b0e5
list.hoverBackground#2b3b44
list.inactiveSelectionBackground#3b4b54
notifications.background#33444a
notifications.foreground#f5f5f5
panel.background#263238
scrollbarSlider.activeBackground#4b5b64
scrollbarSlider.background#2b3b44
scrollbarSlider.hoverBackground#3b4b54
selection.background#7ac0e8
sideBar.background#263238
sideBarSectionHeader.background#1b2b34
statusBar.background#1b2b34
statusBar.foreground#f5f5f5
statusBar.noFolderBackground#1b2b34
statusBar.noFolderForeground#f5f5f5
tab.activeBackground#263238
tab.activeForeground#f5f5f5
tab.inactiveBackground#1e282c
tab.inactiveForeground#a1b0b8
terminal.ansiBlack#252525
terminal.ansiBlue#42a5f5
terminal.ansiBrightBlack#838383
terminal.ansiBrightBlue#40c4ff
terminal.ansiBrightCyan#7ac0e8
terminal.ansiBrightGreen#99c794
terminal.ansiBrightMagenta#c594c5
terminal.ansiBrightRed#ff443e
terminal.ansiBrightWhite#f5f5f5
terminal.ansiBrightYellow#fbc95a
terminal.ansiCyan#6699cc
terminal.ansiGreen#6db266
terminal.ansiMagenta#ff4081
terminal.ansiRed#ec5f67
terminal.ansiWhite#f5f5f5
terminal.ansiYellow#fac863
terminal.foreground#bec8ce
titleBar.activeBackground#263238
titleBar.inactiveBackground#1e282c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a1b0b8	—
variable	#cdd3de	—
keyword, storage.type, storage.modifier	#c594c5	—
keyword.operator, constant.other.color, punctuation, meta.tag, 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	#c594c5	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#eb606b	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level	#6699cc	—
support.other.variable, string.other.link	#f2777a	—
constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#cdd3de	—
constant.numeric	#cddc39	—
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	#99c794
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#fac863	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ec5f67	—
variable.language	#f78c6c
entity.name.method.js	#d8dee9	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#d8dee9	—
entity.other.attribute-name	#bb80b3	—
markup.inserted	#99c794	—
markup.deleted	#ec5f67	—
markup.changed	#bb80b3	—
string.regexp	#c594c5	—
constant.character.escape	#c594c5	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#ab7967	—
entity.name.filename.find-in-files	#99c794	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#6699cc
source.js constant.other.object.key.js string.unquoted.label.js	#ec5f67
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#fac863	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#c594c5	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#d8dee9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#6699cc	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#ab7967	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#ec5f67	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#f99157	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#fac863	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#c594c5	—

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