Yume Theme

Name: Yume Theme
Author: feelthatvib3

Publisher: feelthatvib3Themes in package: 2

An exquisitely crafted VS Code theme inspired by the Xcode IDE (combined with a hint of personal charm).

GitHub

Color themes

VS Code preview

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

Yume Theme — Yume Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ECECEC
activityBar.background#E4E4E2
activityBar.border#D1D1CF
activityBar.foreground#3C93FD
activityBar.inactiveForeground#6F6E6E
activityBarBadge.background#3C93FD
activityBarBadge.foreground#ECECEC
breadcrumb.activeSelectionForeground#3C93FD
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#3C93FD
breadcrumb.foreground#000000
breadcrumbPicker.background#E4E4E2
button.background#3C93FD
commandCenter.activeBackground#F2F2F2
commandCenter.activeBorder#D1D1CF
commandCenter.activeForeground#000000
commandCenter.background#F8F8F8
commandCenter.border#D1D1CF
commandCenter.foreground#000000
commandCenter.inactiveBorder#D1D1CF
commandCenter.inactiveForeground#000000
dropdown.background#EFEAEB
dropdown.border#D1D1CF
editor.findMatchBackground#3C93FD75
editor.findMatchHighlightBackground#3C93FD25
editor.lineHighlightBackground#EEF5FE
editor.selectionBackground#3C93FD25
editor.wordHighlightBackground#3C93FD50
editorGroup.emptyBackground#D1D1CF50
editorGroupHeader.border#D1D1CF50
editorGroupHeader.noTabsBackground#FFFFFF
editorGroupHeader.tabsBackground#FFFFFF
editorGroupHeader.tabsBorder#D1D1CF50
editorHoverWidget.background#ECECEC
editorIndentGuide.activeBackground#D1D1CF
editorIndentGuide.background#FFFFFF
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#B0B0B0
editorSuggestWidget.background#ECECEC
editorWidget.background#ECECEC
editorWidget.border#D1D1CF
focusBorder#00000000
foreground#000000
icon.foreground#6F6E6E
input.background#F5F5F5
input.border#CCCDCD
input.placeholderForeground#919191
inputOption.activeBackground#919191
inputValidation.infoBackground#919191
list.activeSelectionBackground#3C93FD
list.focusBackground#3C93FD
list.focusForeground#FFFFFF
list.hoverBackground#3C93FD25
list.inactiveFocusBackground#3C93FD25
list.inactiveSelectionBackground#3C93FD25
menu.border#D1D1CF
menubar.selectionBackground#3C93FD
menubar.selectionForeground#FFFFFF
notificationCenter.border#D1D1CF
notificationCenterHeader.background#E4E4E2
notificationCenterHeader.foreground#000000
notifications.background#E4E4E2
notifications.foreground#000000
notificationsInfoIcon.foreground#3C93FD
notificationToast.border#D1D1CF
panel.background#FFFFFF
panel.border#D1D1CF
panelInput.border#D1D1CF
panelTitle.inactiveForeground#000000
progressBar.background#3C93FD
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#CCCDCD
scrollbarSlider.background#ECECEC
scrollbarSlider.hoverBackground#CCCDCD
selection.background#B3D7FF
settings.checkboxBackground#E4E4E2
settings.checkboxBorder#D1D1CF
settings.checkboxForeground#000000
settings.dropdownBackground#E4E4E2
settings.dropdownBorder#D1D1CF
settings.dropdownForeground#000000
settings.headerBorder#D1D1CF50
settings.headerForeground#3C93FD
settings.modifiedItemIndicator#3C93FD
settings.numberInputBorder#D1D1CF
settings.textInputBorder#D1D1CF
sideBar.background#E4E4E2
sideBar.border#D1D1CF
sideBarSectionHeader.background#E4E4E2
sideBarSectionHeader.foreground#282828
statusBar.background#E4E4E2
statusBar.border#D1D1CF
statusBar.debuggingBackground#E4E4E2
statusBar.foreground#000000
statusBar.noFolderBackground#E4E4E2
statusBarItem.activeBackground#E4E4E2
statusBarItem.hoverBackground#3C93FD25
statusBarItem.prominentBackground#3C93FDAA
statusBarItem.prominentForeground#3C93FDAA
statusBarItem.remoteBackground#3C93FD
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#3C93FD20
tab.activeBorder#CCCDCD50
tab.activeForeground#3C93FD
tab.border#D1D1CF50
tab.hoverBackground#3C93FD20
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#000000
titleBar.activeBackground#E4E4E2
titleBar.activeForeground#000000
titleBar.border#D1D1CF
titleBar.inactiveBackground#E4E4E2
titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.brace.round, meta.brace.square, meta.property-value.css, punctuation.accessor, punctuation.definition.block, punctuation.separator.comma, punctuation.separator.list.comma.css, punctuation.separator.key-value, punctuation.definition.parameters, punctuation.terminator.statement, punctuation.definition.section.case-statement, punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, punctuation.definition.typeparameters, punctuation.definition.dictionary, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.combinator.css, storage.type.function.arrow, variable.other.readwrite	#000000	—
keyword, variable.language.this, variable.language.super, constant.language.boolean.true, constant.language.boolean.false, constant.language.null, constant.language.undefined, storage.type, storage.modifier, storage.modifier.async, entity.name.tag, entity.other.attribute-name	#AD3DA4	—
entity.other.attribute-name	#A4AD3D	—
entity.name.type, entity.name.type.class, entity.other.inherited-class, support.type.object.module, support.type.primitive	#9281E8	—
meta.property-name.css, variable.other.property, variable.other.object, variable.other.object.property, variable.other.constant, variable.other.constant.property, support.variable.property, support.type.property-name.media.css	#33796A	—
string.quoted.single, string.quoted.double, string.template	#CA4D3E	—
punctuation.definition.comment, comment.line.double-slash, comment.block	#979CA2	—
entity.name.tag.css, entity.name.tag.wildcard.css, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.unit.cm.css, keyword.other.unit.mm.css, keyword.other.unit.in.css, keyword.other.unit.pt.css, keyword.other.unit.pc.css, keyword.other.unit.em.css, keyword.other.unit.ex.css, keyword.other.unit.ch.css, keyword.other.unit.rem.css, keyword.other.unit.lh.css, keyword.other.unit.rlh.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css, keyword.other.unit.vb.css, keyword.other.unit.vi.css, keyword.other.unit.svw.css, keyword.other.unit.svh.css, keyword.other.unit.lvw.css, keyword.other.unit.lvh.css, keyword.other.unit.dvw.css, keyword.other.unit.dvh.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.fr.css, constant.numeric.css, support.function.misc.css	#9167CD	—
variable.parameter.keyframe-list.css, support.constant.property-value.css, meta.property-value.css	#CA4D3E	—
support.type.property-name.css, variable.css, variable.argument.css	#429784	—
constant.numeric.decimal	#6D7AF7	—
punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, entity.name.section.markdown	#AD3DA4	—
markup.bold.markdown, markup.quote.markdown, markup.italic.markdown, markup.strikethrough.markdown, markup.inline.raw.string.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.raw.markdown, punctuation.definition.quote.begin.markdown, string.other.link.title.markdown	#CA4D3E	—

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