React-Beauty Remake!!!

Name: React-Beauty Remake!!!
Author: ImpendingDoom28

Publisher: ImpendingDoom28Themes in package: 1

The beautiful remake of the React-Beauty Theme from the creator!

Open in VS Code GitHub

VS Code preview

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

React-Beauty Remake!!! — React-Beauty Remake!!!

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.activeBackground#23272e
activityBar.activeBorder#0d6a7a9a
activityBar.background#1b1e24
activityBar.border#1b1e24
activityBar.dropBorder#0d6a7a9a
activityBar.foreground#ffffffb2
activityBar.inactiveForeground#6c707abe
activityBarBadge.background#0d6a7a
activityBarBadge.foreground#ffffffb2
breadcrumb.activeSelectionForeground#eeffff
breadcrumb.background#23272e
breadcrumb.focusForeground#cdcfd3
breadcrumb.foreground#ffffffb2
breadcrumbPicker.background#1b1e24
button.background#0d6a7a9a
button.foreground#ffffffb2
button.hoverBackground#1b1e24
button.secondaryBackground#62c0ff59
button.secondaryForeground#c0c1c5
button.secondaryHoverBackground#1b1e24a8
contrastBorder#232831b2
debugToolBar.background#23272e
editor.background#232831b2
editor.findMatchBackground#00000000
editor.findMatchBorder#fd781f9a
editor.findMatchHighlightBackground#858a975e
editor.findMatchHighlightBorder#a8a8a85d
editor.findRangeHighlightBackground#6c707a3b
editor.foldBackground#084550c0
editor.foreground#eeffff
editor.lineHighlightBorder#0d6a7a9a
editor.selectionBackground#62c0ff59
editorGroup.border#62c0ff59
editorGroupHeader.tabsBackground#1b1e24
editorGroupHeader.tabsBorder#23272e
editorGutter.addedBackground#36aa12c2
editorGutter.deletedBackground#aa1212c2
editorGutter.modifiedBackground#aaa812c2
editorHoverWidget.background#2e2e2e
editorLineNumber.foreground#808080
editorLink.activeForeground#2dcbfb9d
editorPane.background#232831b2
editorSuggestWidget.border#2dcbfb9d
editorSuggestWidget.foreground#cdcfd3
editorSuggestWidget.highlightForeground#2dcbfb9d
editorSuggestWidget.selectedBackground#62c0ff59
editorUnnecessaryCode.opacity#7e74748a
extensionBadge.remoteBackground#ff0000
extensionBadge.remoteForeground#ffffffb2
extensionButton.prominentBackground#36aa12c2
extensionButton.prominentForeground#ffffffb2
focusBorder#0d6a7a9a
foreground#ffffffb2
icon.foreground#c0c1c5
input.background#1b1e24
input.border#1b1e24
input.foreground#ffffffb2
input.placeholderForeground#6c707abe
inputOption.activeBackground#0d6a7a9a
inputOption.activeBorder#0d6a7a9a
inputOption.activeForeground#ffffffb2
list.activeSelectionBackground#0d6a7a9a
list.activeSelectionForeground#eeffff
list.dropBackground#1b1e24
list.errorForeground#aa1212
list.filterMatchBackground#fd781faf
list.filterMatchBorder#23272e
list.focusBackground#0d6a7a9a
list.focusForeground#eeffff
list.hoverBackground#0d6a7a9a
list.hoverForeground#eeffff
list.inactiveFocusBackground#084550c0
list.inactiveSelectionBackground#084550c0
list.inactiveSelectionForeground#6c707abe
list.warningForeground#aaa812c2
listFilterWidget.background#fd781f86
listFilterWidget.noMatchesOutline#ff0000
listFilterWidget.outline#36aa12
menu.background#1b1e24
menu.border#1b1e24
menu.foreground#ffffffb2
menu.selectionBackground#0d6a7a9a
menu.selectionBorder#084550c0
menu.selectionForeground#eeffff
menubar.selectionBackground#0d6a7a9a
menubar.selectionBorder#084550c0
menubar.selectionForeground#eeffff
notificationCenter.border#1b1e24
notificationCenterHeader.background#23272e
notificationCenterHeader.foreground#ffffffb2
notificationLink.foreground#2dcbfb9d
notifications.background#23272e
notifications.border#0d6a7a9a
notifications.foreground#ffffffb2
notificationsErrorIcon.foreground#aa1212c2
notificationsInfoIcon.foreground#2dcbfb9d
notificationsWarningIcon.foreground#aaa812c2
notificationToast.border#1b1e24
panel.background#23272e
panel.border#1b1e24
panel.dropBorder#0d6a7a9a
panelInput.border#0d6a7a9a
panelSection.border#1b1e24
panelTitle.activeBorder#0d6a7a9a
panelTitle.activeForeground#ffffffb2
panelTitle.inactiveForeground#6c707abe
quickInput.background#1b1e24
sideBar.background#23272e
sideBar.border#1b1e24
sideBar.dropBackground#0d6a7a9a
sideBar.foreground#ffffffb2
sideBarSectionHeader.background#23272e
sideBarSectionHeader.border#0d6a7a9a
sideBarSectionHeader.foreground#ffffffb2
sideBarTitle.foreground#ffffffb2
statusBar.background#1b1e24
statusBar.border#1b1e24
statusBar.debuggingBackground#fd781faf
statusBar.debuggingForeground#eeffff
statusBar.foreground#ffffffb2
statusBarItem.activeBackground#084550c0
statusBarItem.hoverBackground#0d6a7a9a
statusBarItem.prominentBackground#ff0000
tab.activeBackground#23272e
tab.activeBorder#23272e
tab.activeBorderTop#1b1e24
tab.activeForeground#eeffff
tab.activeModifiedBorder#673dfde3
tab.border#1b1e24
tab.hoverBackground#0d6a7a9a
tab.hoverBorder#084550c0
tab.hoverForeground#eeffff
tab.inactiveBackground#1b1e24
tab.inactiveForeground#ffffff62
tab.inactiveModifiedBorder#673dfd77
tab.lastPinnedBorder#23272e
terminal.background#23272e
terminal.border#1b1e24
titleBar.activeBackground#1b1e24
titleBar.activeForeground#ffffffb2
titleBar.inactiveBackground#1b1e24
titleBar.inactiveForeground#ffffff62
widget.shadow#00000067

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.tsx meta.export.default.tsx variable.other.readwrite.tsx, source.ts meta.export.default.ts variable.other.readwrite.ts, meta.type.annotation.tsx support.type.primitive.tsx, meta.type.annotation.ts support.type.primitive.ts	—	italic
meta.object-literal.key, variable.object.property, variable.other.object.property, constant.other.object.key.js string.unquoted.js, source.js variable.other.property.js, meta.var.expr.tsx variable.other.property.tsx, meta.class meta.block variable.other.property	#21a4ccd0	—
constant.language.null, constant.language.undefined, constant.language.nan, support.class.builtin, support.constant.json, entity.name.type.module, source meta.var.expr meta.objectliteral meta.object.member entity.name.type.module	#ff6600	bold italic
entity.other.inherited-class, meta.class variable.language.this, support.class.promise, entity.name.type, entity.name.class, entity.name.type.class, new.expr entity.name.type, cast.expr entity.name.type	#1ffd74a8	italic
constant.language.boolean.true	#47e1fcd2	—
constant.language.boolean.false	#f03434	—
meta.function.js variable.other.readwrite.js, meta.arrow.js variable.other.readwrite.js	#f78c6cec	—
entity.name.type.module.ts, support.class.component	#4b7afd	italic
comment, punctuation.definition.comment	#FFA987	italic
variable, string constant.other.placeholder, meta.function.js meta.var-single-variable.expr.js variable.other.readwrite.js, variable.parameter.js, meta.parameter.object-binding-pattern.ts variable.parameter.ts, meta.parameter.object-binding-pattern.tsx variable.parameter.tsx, meta.class.tsx meta.field.declaration.tsx meta.definition.property.tsx variable.object.property.tsx, meta.class.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts, support.type.object.module.js, meta.class.ts meta.block.ts variable.other.object.property.ts, meta.var.expr.ts variable.parameter.ts, meta.arrow.ts variable.parameter.ts, meta.function.js variable.other.readwrite.js, new.expr.tsx entity.name.type.module.tsx, meta.block variable.other, meta.parameters.ts variable.parameter.ts, variable.parameter.tsx, meta.function.arrow entity.name.function, variable.other.constant entity.name.function	#D7DEEA	—
constant.other.color, meta.jsx.chilren.js, meta.tag.js, meta.tag.without-attributes.js	#FFFFFF	—
invalid, invalid.illegal	#FF5370	—
storage.type, storage.modifier, variable.scss	#B38CCE	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.key-value.js, punctuation.separator.inheritance.php, keyword.operator.type.annotation.ts, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#89DEFFD8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.other.variable, string.other.link	#F07178	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.type.paren.cover.ts variable.parameter.ts	#82AAFF	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#e28a6f	—
meta.tag meta.tag.without-attributes, source keyword.control.at-rule.use constant.character.css, string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.tag.attributes.js string.quoted.double.js	#ffcb6b	—
punctuation.definition.entity.css	#FAA23DE8	—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#B2CCD6	—
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	#D7DEEA	—
entity.name.module.js, entity.name.function, variable.import.parameter.js, variable.other.class.js	#82AAFF	—
variable.language	#82AAFF	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
source meta.property-list.css.sass.prop support.type.property-name.css.sass.prop.name, entity.other.attribute-name, variable.other.property.js, variable.other.object.property.js	#98CE00	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#92c570	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#F07178	italic
markup.bold, markup.bold string	#F07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#F07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block, source variable.other.name, source variable.other.value, source meta.property-list variable, source keyword.control.at-rule.use, source keyword.operator	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
meta.definition.variable.js	#DA3232	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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