Verdandi Theme

Name: Verdandi Theme
Author: be5invis

Publisher: be5invisThemes in package: 2

Verdandi themes for VS Code.

Color themes

VS Code preview

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

Verdandi Theme — Verdandi

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.background#bfc6cd
activityBar.foreground#353a3f
badge.background#329af0
badge.foreground#dce0e4
breadcrumb.activeSelectionForeground#727981
breadcrumb.focusForeground#727981
breadcrumb.foreground#939ba4
breadcrumbPicker.background#e9ecee
button.background#2a8de7
button.foreground#e8f7ff
button.hoverBackground#2481da
debugToolBar.background#dce0e4ff
diffEditor.insertedTextBackground#41a9521a
diffEditor.removedTextBackground#f5676726
dropdown.background#f8f9fa
dropdown.border#cfd4d9
dropdown.foreground#51575e
editor.background#f8f9fa
editor.foreground#51575e
editor.inactiveSelectionBackground#adb5bd60
editor.lineHighlightBackground#e9ecee
editor.selectionBackground#329af060
editor.selectionHighlightBackground#b4e2fcff
editorActiveLineNumber.foreground#212529
editorCursor.foreground#329af0
editorError.foreground#d43b3b
editorGroup.border#cfd4d9
editorGroupHeader.noTabsBackground#f8f9fa
editorGroupHeader.tabsBackground#dce0e4
editorGutter.addedBackground#6cc77c
editorGutter.deletedBackground#fa9595
editorGutter.modifiedBackground#5cbbf7
editorHint.foreground#2076c9
editorInfo.foreground#2076c9
editorLineNumber.foreground#adb5bd
editorOverviewRuler.addedForeground#6cc77c
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#fa9595
editorOverviewRuler.errorForeground#f56767
editorOverviewRuler.infoForeground#329af0
editorOverviewRuler.modifiedForeground#5cbbf7
editorOverviewRuler.warningForeground#df7b39
editorSuggestWidget.background#f8f9faff
editorWarning.foreground#ba5908
editorWidget.background#dce0e4ff
errorForeground#ee5656
focusBorder#329af0
foreground#51575e
gitDecoration.addedResourceForeground#2b843b
gitDecoration.conflictingResourceForeground#d43b3b
gitDecoration.deletedResourceForeground#d43b3b
gitDecoration.modifiedResourceForeground#2076c9
gitDecoration.untrackedResourceForeground#2b843b
input.background#f8f9fa
input.border#cfd4d9
input.foreground#51575e
input.placeholderForeground#adb5bd
list.activeSelectionBackground#329af040
list.activeSelectionForeground#212529
list.errorForeground#d43b3b
list.focusBackground#329af040
list.focusForeground#212529
list.highlightForeground#2a8de7
list.hoverBackground#cfd4d9
list.inactiveSelectionBackground#adb5bd4d
list.inactiveSelectionForeground#212529
list.warningForeground#ba5908
notification.errorBackground#f87c7c
notification.errorForeground#d43b3b
notification.infoBackground#41a9f4
notification.infoForeground#2076c9
notification.warningBackground#e78d54
notification.warningForeground#ba5908
panel.border#cfd4d9
panelTitle.activeBorder#329af0
peekView.border#cfd4d9
peekViewEditor.background#cfd4d955
peekViewTitle.background#f8f9faff
scrollbar.shadow#2125291a
scrollbarSlider.activeBackground#21252926
scrollbarSlider.background#21252913
scrollbarSlider.hoverBackground#21252926
sideBar.background#e9ecee
sideBarSectionHeader.background#cfd4d9
sideBarTitle.foreground#212529
statusBar.background#cfd4d9
statusBar.debuggingBackground#cfd4d9
statusBar.debuggingForeground#51575e
statusBar.foreground#51575e
statusBar.noFolderBackground#cfd4d9
statusBar.noFolderForeground#51575e
tab.activeBackground#f8f9fa
tab.activeForeground#212529
tab.border#cfd4d9
tab.inactiveBackground#dce0e4
tab.inactiveForeground#727981
titleBar.activeBackground#51575e
titleBar.activeForeground#e9ecee
titleBar.inactiveBackground#939ba4
titleBar.inactiveForeground#e9ecee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, meta.definition.variable.name, support.variable	#51575e
meta.object-literal.key, meta.object-literal.key entity.name.function	#51575e
comment, punctuation.comment, punctuation.definition.comment	#939ba4
keyword.operator	#212529	bold
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace	#727981
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php	#212529
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string	#727981	italic
constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language	#212529
constant.character, constant.other, entity.name.function, entity.name.class, entity.other.inherited-class, entity.other.attribute-name, entity.name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json	#212529
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as	#212529	bold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag	#212529	bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx	—	—
meta.preprocessor	#212529
support.type, support.class, support.function, support.constant	#212529
invalid	#e24747	—
invalid.deprecated	#e24747	—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation	#212529
markup.heading, entity.name.section	#212529	bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code	#727981	italic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline	#212529
variable.language.makefile, variable.other.makefile	#212529
markup.italic	—	italic
markup.bold	—	bold
entity.other.attribute-name.class.css	#212529
entity.name.tag.css	#212529	bold
meta.property-name.css	#212529

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