Vuesion Theme

Name: Vuesion Theme
Author: vuesion

Publisher: vuesionThemes in package: 1

Theme for VS Code based on the @vuesion color scheme

Open in VS Code GitHub

VS Code preview

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

Vuesion Theme — vuesion

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#303a45
activityBar.activeBorder#303a45
activityBar.activeFocusBorder#303a45
activityBar.background#202831
activityBar.border#303a45
activityBar.dropBorder#3d8beb
activityBar.foreground#fff
activityBar.inactiveForeground#c9cbcf
activityBarBadge.background#216fe0
activityBarBadge.foreground#fff
badge.background#3d8beb
badge.foreground#fff
breadcrumb.activeSelectionForeground#fff
breadcrumb.background#202831
breadcrumb.focusForeground#fff
breadcrumb.foreground#fff
breadcrumbPicker.background#202831
button.background#f43b6c
checkbox.background#f43b6c
debugToolBar.background#202831
dropdown.background#202831
editor.background#202831
editor.foreground#fff
editor.selectionBackground#434e5b
editor.selectionForeground#202831
editor.selectionHighlightBackground#434e5b
editor.selectionHighlightBorder#202831
editorBracketMatch.background#303a45
editorBracketMatch.border#c9cbcf
editorCursor.background#303a45
editorError.background#c82600
editorGutter.addedBackground#0d9660
editorGutter.background#202831
editorGutter.deletedBackground#303a45
editorGutter.foldingControlForeground#c9cbcf
editorGutter.modifiedBackground#3d8beb
editorHoverWidget.background#202831
editorIndentGuide.background#303a45
editorInfo.background#303a45
editorPane.background#202831
editorWarning.background#a56a01
editorWidget.background#202831
editorWidget.border#303a45
editorWidget.foreground#c9cbcf
editorWidget.resizeBorder#303a45
input.background#303a45
input.border#303a45
input.foreground#fff
input.placeholderForeground#c9cbcf
list.activeSelectionBackground#303a45
list.hoverBackground#303a45
list.inactiveSelectionBackground#303a45
listFilterWidget.background#303a45
menu.background#202831
minimap.background#202831
minimap.errorHighlight#c82600
minimap.findMatchHighlight#303a45
minimap.selectionHighlight#303a45
minimap.warningHighlight#f3c811
minimapGutter.addedBackground#0d9660
minimapGutter.deletedBackground#303a45
minimapGutter.modifiedBackground#3d8beb
minimapSlider.background#000
notifications.background#202831
panel.background#202831
panelSectionHeader.background#202831
peekViewEditor.background#303a45
peekViewResult.background#303a45
peekViewTitle.background#303a45
progressBar.background#216fe0
quickInput.background#202831
quickInputTitle.background#303a45
scrollbarSlider.activeBackground#9ca2aa
scrollbarSlider.background#303a45
scrollbarSlider.hoverBackground#434e5b
selection.background#303a45
sideBar.background#202831
sideBar.border#303a45
sideBar.dropBackground#216fe0
sideBar.foreground#c9cbcf
sideBarSectionHeader.background#303a45
sideBarSectionHeader.border#303a45
sideBarSectionHeader.foreground#c9cbcf
sideBarTitle.foreground#c9cbcf
statusBar.background#202831
statusBar.border#303a45
statusBar.debuggingBackground#216fe0
statusBar.debuggingBorder#216fe0
statusBar.debuggingForeground#fff
statusBar.foreground#c9cbcf
statusBar.noFolderBackground#202831
statusBar.noFolderBorder#303a45
statusBar.noFolderForeground#c9cbcf
statusBarItem.activeBackground#202831
statusBarItem.errorBackground#c82600
statusBarItem.errorForeground#fff
statusBarItem.hoverBackground#303a45
tab.activeBackground#303a45
tab.activeBorder#3d8beb
tab.activeBorderTop#303a45
tab.activeForeground#c9cbcf
tab.activeModifiedBorder#3d8beb
tab.border#303a45
tab.hoverBackground#303a45
tab.hoverBorder#303a45
tab.hoverForeground#c9cbcf
tab.inactiveBackground#202831
tab.inactiveForeground#c9cbcf
tab.inactiveModifiedBorder#202831
tab.lastPinnedBorder#3d8beb
terminal.background#202831
terminalCursor.background#303a45
textBlockQuote.background#303a45
textCodeBlock.background#303a45
titleBar.activeBackground#202831
titleBar.activeForeground#fff
titleBar.border#303a45
titleBar.inactiveBackground#202831
titleBar.inactiveForeground#c9cbcf
welcomePage.background#202831

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.other.readwrite.alias, variable.other.object, constant.language.boolean.yaml, meta.definition.variable, storage.type.function.arrow, punctuation.accessor, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.template.expression	#fff
comment	#55616C	italic
keyword, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.from, keyword.control.flow, constant.language.boolean, storage.type, storage.modifier, storage.modifier.async, keyword.control.at-rule.import, entity.name.tag.yaml, variable.language.this, keyword.operator.new	#ff92bb	bold
entity.name.tag.css	#F43B6C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, string.quoted.double	#3D8BEB
constant.language.json	#3D8BEB	bold
variable.parameter, constant.numeric.css, constant.other.color, keyword.other.unit, meta.property-value	#8DC3F9
string.quoted.single, punctuation.definition.string.begin, punctuation.definition.string.end, entity.name.tag.template, entity.name.tag.block.any, entity.name.tag.script, entity.name.tag.style, punctuation.terminator.statement, entity.name.section.markdown, punctuation.definition.heading.markdown, entity.name.tag.html, string.template, keyword.operator	#40BF77
support.type.property-name.json	#40BF77	italic
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.other.link.title.markdown, support.function.misc, entity.name.tag.reference.scss, entity.other.attribute-name.class, punctuation.section.function	#F3C811
entity.name.type, entity.other.attribute-name, support.type.primitive, punctuation.separator.key-value.html	#F3C811	italic
entity.name.function	#ffc66d
	#9876AA	italic bold
keyword.other.important.css	#E84606	italic
constant.numeric.decimal, entity.other.attribute-name.id.css	#F9846C
markup.underline.link.markdown	#F9846C	italic

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