Verdandi Alter Customized

Name: Verdandi Alter Customized
Author: Shirayuki

Publisher: ShirayukiThemes in package: 1

Customized colors for Verdandi Alter.

Open in VS Code

VS Code preview

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

Verdandi Alter Customized — Verdandi Alter Customized

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#292e39
activityBar.foreground#c0c5ca
activityBarBadge.background#88c0d0
activityBarBadge.foreground#292e39
badge.background#0f77cd
badge.foreground#1b1f23
breadcrumb.activeSelectionForeground#2979ff
breadcrumb.focusForeground#7e868d
breadcrumb.foreground#5b646c
breadcrumbPicker.background#111316
button.background#187ad5
button.foreground#000f17
button.hoverBackground#2582db
debugToolBar.background#1b1f23
diffEditor.insertedTextBackground#30ae451a
diffEditor.removedTextBackground#94000026
dropdown.background#050607
dropdown.border#262b30
dropdown.foreground#a1a8ae
editor.background#0d0f13
editor.foreground#ffffff
editor.inactiveSelectionBackground#262b30
editor.lineHighlightBackground#111316
editor.selectionBackground#334b5ecc
editor.selectionHighlightBackground#0a5593
editorCursor.foreground#0f77cd
editorGroup.border#262b30
editorGroupHeader.noTabsBackground#050607
editorGroupHeader.tabsBackground#1b1f23
editorGutter.addedBackground#30ae45
editorGutter.deletedBackground#940000
editorGutter.modifiedBackground#0f77cd
editorLineNumber.activeForeground#d6dade
editorLineNumber.foreground#424a52
editorOverviewRuler.border#0a0c0f
editorSuggestWidget.background#050607
editorSuggestWidget.highlightForeground#2979ff
editorWidget.background#1b1f23
editorWidget.border#2979ff
editorWidget.resizeBorder#2979ff
errorForeground#a50404
focusBorder#0f77cd
foreground#a1a8ae
gitDecoration.conflictingResourceForeground#c01c1c
gitDecoration.deletedResourceForeground#c01c1c
gitDecoration.modifiedResourceForeground#368cdf
gitDecoration.untrackedResourceForeground#59c86d
input.background#050607
input.border#262b30
input.foreground#a1a8ae
input.placeholderForeground#424a52
list.activeSelectionBackground#0f77cd40
list.activeSelectionForeground#2979ff
list.focusBackground#0f77cd40
list.focusForeground#d6dade
list.highlightForeground#2979ff
list.hoverBackground#262b30
list.inactiveSelectionBackground#424a524d
list.inactiveSelectionForeground#2979ff
menu.selectionForeground#2979ff
menubar.selectionForeground#2979ff
notificationLink.foreground#2979ff
panel.background#0a0c0f
panel.border#262b30
panelTitle.activeBorder#2979ff
peekView.border#262b30
peekViewEditor.background#262b3055
peekViewTitle.background#050607
pickerGroup.foreground#2979ff
progressBar.background#2979ff
scrollbar.shadow#0000001a
scrollbarSlider.activeBackground#2a77fc50
scrollbarSlider.background#2978ff18
scrollbarSlider.hoverBackground#2a77fc50
settings.headerForeground#2979ff
settings.modifiedItemIndicator#2979ff
sideBar.background#0d0f13
sideBar.border#0a0c0f
sideBar.foreground#d8dee9
sideBarSectionHeader.background#292e39
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#000618
statusBar.debuggingBackground#262b30
statusBar.debuggingForeground#a1a8ae
statusBar.foreground#ffffff
statusBar.noFolderBackground#262b30
statusBar.noFolderForeground#a1a8ae
tab.activeBackground#424853
tab.activeBorder#88c0d000
tab.activeBorderTop#88c0d000
tab.activeForeground#d8dee9
tab.border#24293300
tab.hoverBackground#242933cc
tab.hoverBorder#88c0d000
tab.inactiveBackground#242933
tab.inactiveForeground#d8dee966
tab.unfocusedActiveBorder#88c0d000
tab.unfocusedActiveBorderTop#88c0d000
tab.unfocusedActiveForeground#d8dee999
tab.unfocusedHoverBackground#242933b3
tab.unfocusedHoverBorder#88c0d000
tab.unfocusedInactiveForeground#d8dee966
terminal.ansiBlack#292e39
terminal.ansiBlue#81a1c1
terminal.ansiBrightBlack#4c566a
terminal.ansiBrightBlue#81a1c1
terminal.ansiBrightCyan#8fbcbb
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#b48ead
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#eceff4
terminal.ansiBrightYellow#ebcb8b
terminal.ansiCyan#88c0d0
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ebcb8b
terminal.background#0d0f13
terminal.foreground#d8dee9
textLink.foreground#2979ff
titleBar.activeBackground#292e39
titleBar.activeForeground#d8dee9
titleBar.border#292e3900
titleBar.inactiveBackground#292e39
titleBar.inactiveForeground#d8dee966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.template.expression, meta.interpolation.cs	#FFFFFF	—
keyword.operator.bitwise, keyword.operator.comparison, meta.attribute.python, meta.object-literal.key, support.variable, variable.other.object.property, variable.other.property	#A1A8AE	—
comment, punctuation.comment, punctuation.definition.comment, string.quoted.docstring.multi.python	#34495E	italic
brace, bracket, delimiter, delimiter.tag, meta.brace, meta.property-value punctuation.separator.key-value, paren, punctuation, punctuation.definition.metadata.md, punctuation.tag, string.link.md, tag.html, tag.xml, keyword.operator.assignment	#7E868D	—
beginning.punctuation, entity.name.type.md, entity.other.attribute-name.class.css, markup.link, meta.image.inline, meta.link.inline, meta.preprocessor, meta.property-name.css, punctuation.definition.heading.md, string.other.link.description, string.other.link.title, variable.language.makefile, variable.other.makefile	#D6DADE	—
constant.language, constant.numeric, keyword.operator.unpacking.parameter.python, meta.property-value.color, meta.property-value.numeric, support.constant.property-value.color, support.constant.property-value.numeric	#B5CEA8	—
constant.character, entity.name.tag.table, entity.other.attribute-name.html, entity.other.attribute-name, entity.other.inherited-class, keyword.control, keyword.operator.expression.delete, keyword.operator.logical, keyword.other.await.cs, keyword.other.class.cs, keyword.other.namespace.cs, keyword.other.using.cs, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.separator.annotation.result.python, storage.type, storage	#1A5276	—
entity.name, entity.name.class, entity.other.inherited-class, constant.other, keyword.type.cs, support.class, support.constant, support.type, storage.type.cs, keyword.other.var.cs, entity.name.function.decorator.python	#008080	—
invalid, invalid.deprecated	#B30E0E	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
string, meta.structure.dictionary.json string.quoted.double.json	#E9967A	—
entity.name.variable, keyword.other.important.css, support.function.lua, variable.language.special.self.python, variable.language.this, variable.parameter.function-call.python, variable.parameter.function.language.python, variable.parameter	#E74C3C	—
entity.name.function, keyword.other.get, keyword.other.set, keyword.other.special-method.dockerfile, meta.function-call.generic, punctuation.definition.dict.begin, punctuation.definition.dict.end, punctuation.definition.list.begin, punctuation.definition.list.end, support.function.any-method.lua, support.function.builtin, support.function.magic, support.type.property-name	#3498DB	—
constant.regexp	#646695	—
string.regexp	#D16969	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#D16969	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAA	—
keyword.operator.quantifier.regexp	#D7BA7D	—

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