Dark Unicorn Cream

Name: Dark Unicorn Cream
Author: Zack Adam

Publisher: Zack AdamThemes in package: 1

Dark Unicorn Cream

GitHub

VS Code preview

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

Dark Unicorn Cream — Dark Unicorn Cream

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#23262e
activityBar.foreground#baafc0
activityBarBadge.background#00b0ff
activityBarBadge.foreground#20232b
badge.background#00b0ff
badge.foreground#20232b
button.background#00e8c5cc
button.hoverBackground#07d4b6cc
debugExceptionWidget.background#ff9f2e60
debugExceptionWidget.border#ff9f2e60
debugToolBar.background#20232a
diffEditor.insertedTextBackground#29bf1220
diffEditor.removedTextBackground#f21b3f20
dropdown.background#2b303b
dropdown.border#363c49
editor.background#080a10
editor.findMatchBackground#f39d12d7
editor.findMatchHighlightBackground#59b8b377
editor.foreground#d5ced9
editor.hoverHighlightBackground#373941
editor.lineHighlightBackground#2e323d
editor.lineHighlightBorder#2e323d
editor.rangeHighlightBackground#372f3c
editor.selectionBackground#523d49
editor.selectionHighlightBackground#4f435580
editor.wordHighlightBackground#4f4355
editor.wordHighlightStrongBackground#db45a280
editorBracketMatch.background#746f77
editorBracketMatch.border#746f77
editorCodeLens.foreground#746f77
editorCursor.foreground#ffffff
editorError.foreground#fc644d
editorGroup.dropBackground#495061d7
editorGroupHeader.tabsBackground#23262e
editorGutter.addedBackground#9bc53dbb
editorGutter.deletedBackground#fc644dbb
editorGutter.modifiedBackground#5bc0ebbb
editorHoverWidget.background#373941
editorHoverWidget.border#00e8c5cc
editorIndentGuide.activeBackground#585c66
editorIndentGuide.background#333844
editorLineNumber.foreground#746f77
editorLink.activeForeground#3b79c7
editorOverviewRuler.border#1b1d23
editorRuler.foreground#4f4355
editorSuggestWidget.background#20232a
editorSuggestWidget.border#372f3c
editorSuggestWidget.selectedBackground#373941
editorWarning.foreground#ff9f2e
editorWhitespace.foreground#333844
editorWidget.background#20232a
errorForeground#fc644d
extensionButton.prominentBackground#07d4b6cc
extensionButton.prominentHoverBackground#07d4b5b0
focusBorder#746f77
foreground#d5ced9
input.background#004cf0
input.placeholderForeground#746f77
inputOption.activeBorder#c668ba
inputValidation.errorBackground#d65343
inputValidation.errorBorder#d65343
inputValidation.infoBackground#3a6395
inputValidation.infoBorder#3a6395
inputValidation.warningBackground#de9237
inputValidation.warningBorder#de9237
list.activeSelectionBackground#23262e
list.activeSelectionForeground#00e8c6
list.dropBackground#3a404e
list.focusBackground#282b35
list.focusForeground#eeeeee
list.hoverBackground#23262e
list.hoverForeground#eeeeee
list.inactiveSelectionBackground#23262e
list.inactiveSelectionForeground#00e8c6
merge.currentContentBackground#f9267240
merge.currentHeaderBackground#f92672
merge.incomingContentBackground#3b79c740
merge.incomingHeaderBackground#3b79c7bb
panel.background#23262e
panel.border#1b1d23
panelTitle.activeBorder#23262e
panelTitle.inactiveForeground#746f77
peekView.border#23262e
peekViewEditor.background#1a1c22
peekViewEditor.matchHighlightBackground#ff9f2e60
peekViewResult.background#1a1c22
peekViewResult.matchHighlightBackground#ff9f2e60
peekViewResult.selectionBackground#23262e
peekViewTitle.background#1a1c22
peekViewTitleDescription.foreground#746f77
pickerGroup.border#4f4355
pickerGroup.foreground#746f77
progressBar.background#c668ba
scrollbar.shadow#23262e
scrollbarSlider.activeBackground#3a3f4ccc
scrollbarSlider.background#3a3f4c77
scrollbarSlider.hoverBackground#3a3f4caa
selection.background#746f77
sideBar.background#101219
sideBar.foreground#746f77
sideBarSectionHeader.background#23262e
sideBarTitle.foreground#00e8c6
statusBar.background#23262e
statusBar.debuggingBackground#fc644d
statusBar.noFolderBackground#23262e
statusBarItem.activeBackground#00e8c5cc
statusBarItem.hoverBackground#07d4b5b0
statusBarItem.prominentBackground#07d4b5b0
statusBarItem.prominentHoverBackground#00e8c5cc
tab.activeBackground#23262e
tab.activeForeground#00e8c6
tab.inactiveBackground#23262e
tab.inactiveForeground#746f77
terminal.ansiBlue#7cb7ff
terminal.ansiBrightBlue#7cb7ff
terminal.ansiBrightCyan#00e8c6
terminal.ansiBrightGreen#96e072
terminal.ansiBrightMagenta#ff00aa
terminal.ansiBrightRed#ee5d43
terminal.ansiBrightYellow#ffe66d
terminal.ansiCyan#00e8c6
terminal.ansiGreen#96e072
terminal.ansiMagenta#ff00aa
terminal.ansiRed#ee5d43
terminal.ansiYellow#ffe66d
terminalCursor.background#23262e
terminalCursor.foreground#ffe66d
titleBar.activeBackground#002048
walkThrough.embeddedEditorBackground#23262e
widget.shadow#14151a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, markup.quote.markdown, meta.diff, meta.diff.header	#575d6e	—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown	#D5CED9	—
constant.numeric	#ffcf77	—
entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name	#00c58d	—
markup.bold, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js	#ff4c15	—
markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string	#eae02c	—
markup.heading, variable.language.this.js, variable.language.special.self.python	#fd2f96	—
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, keyword.trigger.sql, keyword.create.sql, entity.name.type.class.python, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag, entity.name.column	#bf0053	—
variable.other.readwrite	#fe7a4e	—
string.quoted	#00d087	—
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type	#6d1edb	—
string.regexp, markup.changed, entity.name.table.sql, meta.function-call.generic.python	#0042dc	—
meta.function-call.arguments, meta.function.parameters.python	#07bdf9	—
keyword.operator.sql, constant, support.constant	#FF8C00	—
support.class, keyword.operator, text.html.markdown string, source.css support.function, source.php support.function, source.rust support.class, support.function.magic.python, markup.deleted	#fe4929	—
text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string	#00d66b	—
entity.other.inherited-class	—	underline
comment, invalid, keyword, entity.other.attribute-name	—	italic
token.info-token, support.class.python	#41c9ff	—
token.warn-token	#ff8b10	—
token.error-token	#e71515	—
token.debug-token, keyword.control.flow.python	#8876ef	—
string, constant.other.symbol.hashkey.ruby, support.type.property-name.json, variable.other.object.property.ts, meta.object-literal.key.js, string.unquoted.label.yaml, string.quoted.double.toml, variable.other.readwrite.instance.swift, string.quoted.double.objc, string.quoted.single.objc	#50a14f	—

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