Yonce

Name: Yonce
Author: minamarkham

Publisher: minamarkhamThemes in package: 1

Vibrant syntax theme on a dark, flat UI. Queen Bey-inspired. For Visual Studio Code.

GitHub

VS Code preview

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

Yonce — Yoncé

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#1C1C1C
activityBar.border#272727
activityBar.dropBackground#1C1C1C
activityBar.foreground#AAAAAA
activityBarBadge.background#FC4384
badge.background#272727
badge.foreground#F8F8F2
breadcrumb.activeSelectionForeground#AAAAAA
breadcrumb.focusForeground#AAAAAA
breadcrumb.foreground#444444
breadcrumbPicker.background#1C1C1C
button.background#FC4384
button.hoverBackground#F661B1
debugExceptionWidget.border#FC4384
debugToolBar.background#272727
debugToolBar.border#FC4384
descriptionForeground#AAAAAA
dropdown.background#1C1C1C
dropdown.border#272727
dropdown.foreground#D4D4D4
dropdown.listBackground#1C1C1C
editor.background#1C1C1C
editor.findMatchBackground#FC438490
editor.findMatchBorder#FC438400
editor.findMatchHighlightBackground#FC438430
editor.findMatchHighlightBorder#FC438450
editor.findRangeHighlightBackground#FC438480
editor.foreground#D4D4D4
editor.lineHighlightBackground#272727
editor.rangeHighlightBackground#FC438420
editor.selectionBackground#FC43847A
editor.selectionForeground#25313E
editor.selectionHighlightBackground#27272750
editor.selectionHighlightBorder#FC43847A
editor.wordHighlightBackground#42557B30
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#42557B30
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#1C1C1C
editorBracketMatch.border#777777
editorCursor.foreground#FC4384
editorError.foreground#C42412
editorGroup.border#272727
editorGroup.dropBackground#1C1C1C
editorGroup.emptyBackground#1C1C1C
editorGroupHeader.tabsBackground#1C1C1C
editorGroupHeader.tabsBorder#272727
editorHint.foreground#E6DB74
editorHoverWidget.background#1C1C1C
editorHoverWidget.border#FC4384
editorIndentGuide.activeBackground#B2CFFB2A
editorIndentGuide.background#3A3A3A
editorLineNumber.activeForeground#FC4384
editorLineNumber.foreground#777777
editorMarkerNavigation.background#1F2330
editorOverviewRuler.border#B2CFFB2A
editorOverviewRuler.selectionHighlightForeground#F39B35
editorPane.background#1F2330
editorRuler.foreground#C7ADFB2F
editorSuggestWidget.background#272727
editorSuggestWidget.border#FC4384
editorSuggestWidget.foreground#FC4384
editorSuggestWidget.highlightForeground#777777
editorSuggestWidget.selectedBackground#272727
editorWarning.foreground#F39B35
editorWhitespace.foreground#272727
editorWidget.background#272727
editorWidget.border#FC4384
errorForeground#C42412
focusBorder#FC438455
foreground#D4D4D4
input.background#1C1C1C
input.border#272727
input.foreground#AAAAAA
input.placeholderForeground#444444
inputOption.activeBorder#363C4C
inputValidation.errorBackground#1C1C1C
inputValidation.errorBorder#C42412
inputValidation.infoBackground#1C1C1C
inputValidation.infoBorder#919CB9
inputValidation.warningBackground#1C1C1C
inputValidation.warningBorder#F39B35
list.activeSelectionBackground#899BBF3A
list.dropBackground#F6F0FF15
list.errorForeground#C42412
list.focusBackground#899BBF30
list.focusForeground#F6F0FF
list.highlightForeground#F8F8F2
list.hoverBackground#919CB915
list.hoverForeground#F6F0FFEA
list.inactiveSelectionBackground#899BBF2C
list.inactiveSelectionForeground#AAAAAA
list.warningForeground#F39B35
menu.background#1C1C1C
menu.foreground#777777
menu.selectionBackground#899BBF3A
menu.selectionBorder#0F13207A
menu.selectionForeground#AAAAAA
menubar.selectionBackground#899BBF3A
menubar.selectionBorder#0F13200A
menubar.selectionForeground#AAAAAA
notificationCenter.border#FC4384
notificationCenterHeader.background#1F2330
notifications.border#FC4384
notificationToast.border#FC4384
panel.background#1C1C1C
panel.border#272727
panelTitle.activeBorder#FC4384
panelTitle.activeForeground#FC4384
panelTitle.inactiveForeground#AAAAAA
peekView.border#FC4384
peekViewEditor.background#1C1C1C
peekViewEditor.matchHighlightBackground#363C4C
peekViewResult.background#1C1C1C
peekViewResult.matchHighlightBackground#363C4C
peekViewResult.selectionBackground#35355190
peekViewTitle.background#1F2330
pickerGroup.border#B2CFFB1A
pickerGroup.foreground#FC4384
progressBar.background#FC4384
scrollbar.shadow#1C1C1C
scrollbarSlider.activeBackground#272727
scrollbarSlider.background#06080E4A
scrollbarSlider.hoverBackground#272727
selection.background#FC43847A
settings.checkboxBackground#272727
settings.checkboxBorder#1C1C1C
settings.checkboxForeground#D4D4D4
settings.dropdownBackground#1C1C1C
settings.dropdownBorder#272727
settings.dropdownForeground#D4D4D4
settings.headerForeground#D4D4D4
settings.numberInputBackground#1C1C1C
settings.numberInputBorder#272727
settings.numberInputForeground#D4D4D4
settings.textInputBackground#1C1C1C
settings.textInputBorder#272727
settings.textInputForeground#D4D4D4
sideBar.background#1C1C1C
sideBar.border#272727
sideBar.dropBackground#363C4C5F
sideBar.foreground#AAAAAA
sideBarSectionHeader.background#1C1C1C
sideBarSectionHeader.foreground#AAAAAA
sideBarTitle.foreground#AAAAAA
statusBar.background#1C1C1C
statusBar.border#272727
statusBar.debuggingBackground#F39B35
statusBar.debuggingForeground#1C1C1C
statusBar.foreground#AAAAAA
statusBar.noFolderBackground#1C1C1C
statusBar.noFolderForeground#AAAAAA
tab.activeBackground#1C1C1C
tab.activeBorder#FC4384
tab.activeForeground#D4D4D4
tab.border#1C1C1C
tab.hoverBorder#FC4384
tab.inactiveBackground#1C1C1C
tab.inactiveForeground#777777
tab.unfocusedActiveBorder#272727
tab.unfocusedActiveForeground#777777
tab.unfocusedHoverBorder#777777
tab.unfocusedInactiveForeground#79839C
terminal.ansiBlack#1C1C1C
terminal.ansiBlue#00A7AA
terminal.ansiBrightBlack#555555
terminal.ansiBrightBlue#00A7AA
terminal.ansiBrightCyan#37E5E7
terminal.ansiBrightGreen#98E342
terminal.ansiBrightMagenta#FFB1F2
terminal.ansiBrightRed#FC4384
terminal.ansiBrightWhite#F1F1EF
terminal.ansiBrightYellow#E6DB74
terminal.ansiCyan#37E5E7
terminal.ansiGreen#98E342
terminal.ansiMagenta#FFB1F2
terminal.ansiRed#FC4384
terminal.ansiWhite#D4D4D4
terminal.ansiYellow#E6DB74
terminal.background#1C1C1C
terminal.foreground#CCCCCC
terminal.selectionBackground#42557B5A
terminalCursor.background#1C1C1C
terminalCursor.foreground#D4D4D4
textBlockQuote.background#919CB91C
textBlockQuote.border#FC4384
textLink.activeForeground#FFB1F2
textLink.foreground#FC4384
textPreformat.foreground#A06FCA
textSeparator.foreground#919CB9
titleBar.activeBackground#272727
titleBar.activeForeground#D4D4D4
titleBar.border#272727
titleBar.inactiveBackground#444444
titleBar.inactiveForeground#777777
welcomePage.buttonBackground#272727
welcomePage.buttonHoverBackground#919CB91C
widget.shadow#1C1C1C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, entity.other.inherited-class, entity.other.attribute-name.pseudo-element.css, markup.italic.markdown, markup.quote, meta.function.variable.css, punctuation.definition.italic.markdown, punctuation.definition.string.css, string.quoted.double.css, storage.type.function, support.variable, variable, variable.other.object.property, variable.language, variable.parameter, variable.argument.css	—	italic
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
entity.name.type, entity.name.class, entity.other.inherited-class	—	underline
constant.other.table-name.sql, meta.brace, meta.structure.dictionary.json, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.curlybrace, punctuation.fullstop, punctuation.section, punctuation.support, punctuation.definition.array, punctuation.terminator, punctuation.definition.binding-pattern, string.quoted.double.json, support.constant.property-value.css, support.variable, text.html.markdown, variable, variable.other.object.property, variable.language, variable.parameter, variable.argument.css	#D4D4D4	—
meta.object-literal.key.js, markup.italic, support.function.builtin, support.type.property-name, storage.type.function, storage.type	#00A7AA	—
constant.numeric, constant, entity.other.attribute-name.id.css, entity.other.inherited-class, entity.name.class, entity.name.type, keyword.var, keyword.struct, keyword.interface, keyword.const, keyword.function, markup.inserted, markup.inline.raw, punctuation.parenthesis.non-capturing.end.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.non-capturing.begin.regexp, support.constant, support.type	#A06FCA	—
comment, meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link	#696d70	—
entity.name.type.js, entity.name.filename.find-in-files, markup.quote, markup.italic, markup.changed, markup.quote, string, support.class, string.quoted.single.js, string.quoted.double.js	#E6DB74	—
keyword.type, meta.brace.square.js, meta.brace.square.ts, punctuation.accessor, punctuation.separator, string.quoted.docstring, storage	#98E342	—
constant.character.escape.markdown, entity.name.class, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, entity.name.tag, entity.name.section.markdown, entity.name.function, entity.name.section, entity.other.attribute-name.class.css, keyword.other.unit.fr.css, keyword, keyword.other.DML.sql, keyword.other.unit.percentage.css, keyword.other.unit.s.css, keyword.other.unit.px.css, meta.function-call.generic, markup.heading.setext, markup.deleted, markup.heading, punctuation.definition.heading, punctuation.definition.template-expression, punctuation.definition.keyword, punctuation.section.embedded, string.other.link.description.markdown, support.other.escape.special.regexp, support.function, token.error-token	#FC4384	—
constant.other.database-name.sql, meta.brace, variable.other.object	#da7dae	—
constant.numeric.line-number.find-in-files - match, keyword.other.alias.sql, keyword.type, markup.fenced_code.block.markdown, meta.functiona.variable.css	#8059a2	—
beginning.punctuation.definition.list.markdown, constant.language.null, constant.language.boolean.true, constant.language.boolean.false, entity.other.attribute-name.pseudo-element.css, punctuation.definition.string.css, string.quoted.double.css	#F39B35	—

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