Liver Theme

Name: Liver Theme
Author: renoirtan

Publisher: renoirtanThemes in package: 4

A theme which uses colours almost exclusively between lilac and vermillion.

Open in VS Code GitHub

Color themes

VS Code preview

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

Liver Theme — Liver Purple Full

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#49325b
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#915bb8
activityBarBadge.background#ff1a1a
activityBarBadge.foreground#1a1a1a
breadcrumb.activeSelectionForeground#9554e8
breadcrumb.focusForeground#c390e8
button.background#49325b79
button.foreground#d7d7d7
button.hoverBackground#3a2648
checkbox.background#49325b
checkbox.foreground#d7d7d7
descriptionForeground#d7d7d7
dropdown.background#49325b
dropdown.foreground#d7d7d7
dropdown.listBackground#49325b
editor.background#3a2648
editor.findMatchBackground#9f9f9f19
editor.findMatchBorder#9f9f9fb9
editor.findMatchHighlightBackground#9f9f9f29
editor.foreground#d7d7d7
editor.hoverHighlightBackground#49325b
editor.lineHighlightBackground#2f1b3d
editor.lineHighlightBorder#d7d7d739
editor.selectionBackground#9f9f9f39
editor.selectionHighlightBackground#9f9f9f39
editor.wordHighlightBackground#9f9f9f29
editor.wordHighlightStrongBackground#9f9f9f29
editorBracketMatch.background#d7d7d729
editorBracketMatch.border#d7d7d7
editorCursor.background#d7d7d7
editorCursor.foreground#d7d7d7
editorError.foreground#ff1a1a
editorGroup.border#d7d7d709
editorGroup.dropBackground#d7d7d739
editorGroup.emptyBackground#3a2648
editorGroupHeader.noTabsBackground#49325b
editorGroupHeader.tabsBackground#3a2648
editorGutter.addedBackground#4fe399
editorGutter.background#6b468629
editorGutter.deletedBackground#ff1a1a
editorGutter.modifiedBackground#ffb370
editorHint.foreground#4fe399
editorIndentGuide.activeBackground#d7d7d7b9
editorIndentGuide.background#d7d7d739
editorInfo.foreground#4e4e4e
editorLineNumber.activeForeground#d7d7d7
editorLineNumber.foreground#915bb8
editorOverviewRuler.addedForeground#4fe399
editorOverviewRuler.deletedForeground#ff1a1a
editorOverviewRuler.modifiedForeground#ffb370
editorRuler.foreground#d7d7d739
editorWarning.foreground#ff7f00
editorWidget.background#49325b
focusBorder#d7d7d7b9
foreground#d7d7d7
gitDecoration.addedResourceForeground#53e2edb9
gitDecoration.conflictingResourceForeground#ff1a1ae9
gitDecoration.ignoredResourceForeground#d7d7d759
gitDecoration.modifiedResourceForeground#ffb370b9
gitDecoration.renamedResourceForeground#fd3f92b9
gitDecoration.stageDeletedResourceForeground#ff1a1a99
gitDecoration.stageModifiedResourceForeground#ffb37099
gitDecoration.untrackedResourceForeground#4fe399b9
icon.foreground#d7d7d7
input.background#49325b59
input.border#d7d7d779
inputOption.activeBorder#d7d7d779
inputValidation.errorBackground#49325bb9
inputValidation.errorBorder#d7d7d7b9
list.activeSelectionBackground#9f9f9f39
list.deemphasizedForeground#915bb8
list.dropBackground#c390e819
list.errorForeground#ff1a1a
list.focusBackground#c390e839
list.focusOutline#d7d7d739
list.hoverBackground#c390e809
list.inactiveSelectionBackground#c390e819
list.invalidItemForeground#ff1a1a
list.warningForeground#ff7f00
listFilterWidget.background#49325b79
listFilterWidget.noMatchesOutline#ff1a1a
listFilterWidget.outline#d7d7d7
merge.currentContentBackground#4fe39919
merge.currentHeaderBackground#4fe39959
merge.incomingContentBackground#fd3f9219
merge.incomingHeaderBackground#ff1a1a59
minimap.errorHighlight#ff1a1ab9
minimap.findMatchHighlight#4fe399b9
minimap.selectionHighlight#4e4e4eb9
minimap.warningHighlight#ff7f00b9
minimapGutter.addedBackground#4fe399
minimapGutter.deletedBackground#ff1a1a
minimapGutter.modifiedBackground#ffb370
minimapSlider.activeBackground#d7d7d759
minimapSlider.background#4e4e4e59
minimapSlider.hoverBackground#d7d7d739
panelTitle.activeBorder#d7d7d7
peekView.border#d7d7d7d9
peekViewEditor.background#3a2648
peekViewEditor.matchHighlightBackground#9f9f9f39
peekViewResult.matchHighlightBackground#9f9f9f39
progressBar.background#d7d7d7
sash.hoverBorder#d7d7d7b9
scrollbarSlider.activeBackground#d7d7d7e9
scrollbarSlider.hoverBackground#d7d7d799
selection.background#9f9f9f59
sideBar.background#3a2648
sideBar.foreground#d7d7d799
sideBarSectionHeader.background#49325b
sideBarSectionHeader.foreground#d7d7d7b9
sideBarTitle.foreground#d7d7d7
statusBar.background#9554e899
statusBar.debuggingBackground#4fe39999
statusBar.noFolderBackground#9554e899
statusBarItem.remoteBackground#c390e899
statusBarItem.remoteForeground#d7d7d7
tab.activeBackground#3a2648
tab.activeBorderTop#d7d7d7
tab.hoverBackground#3a2648
tab.inactiveBackground#2f1b3d
tab.unfocusedActiveBackground#3a2648
textLink.activeForeground#9554e8
textLink.foreground#c390e8
titleBar.activeBackground#3a2648
titleBar.inactiveBackground#3a2648
toolbar.hoverBackground#d7d7d759
tree.indentGuidesStroke#d7d7d7b9
walkThrough.embeddedEditorBackground#3a2648
welcomePage.progress.background#6b4686
welcomePage.progress.foreground#d7d7d7
welcomePage.tileBackground#3a2648
widget.shadow#d7d7d71f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.brace, meta.parens, punctuation.bracket, punctuation.brackets, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.section.parens	#d7d7d7	—
variable, support.variable, meta.function-call.arguments	#d7d7d7	—
variable.language, support.variable.magic, variable.legacy.builtin, variable.parameter.function.language.special	#ff6448	—
invalid	#ff1a1a	—
keyword, keyword.other, keyword.other.unit, keyword.operator.word, keyword.operator.wordlike, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.noexcept, storage	#9554e8	—
keyword.operator.logical, punctuation.separator.statement.and.shell	#9554e8	—
keyword.operator	#ff1a1a	—
punctuation	#d7d7d7	—
entity.name.function, meta.function, meta.function-call, support.function	#c390e8	—
constant.character, punctuation.definition.string, string.quoted.single, punctuation.definition.char, string, string.regexp	#4fe399	—
constant.character.escape, constant.other.placeholder	#e4de41	—
constant.character.format.placeholder.other, punctuation.definition.template-expression, punctuation.definition.interpolation	#e4de41	—
constant.numeric, constant.other.datetime, constant.other.date, constant.other.color.rgb-value.hex, punctuation.definition.constant.css	#eba2e8	—
entity.name, entity.other.inherited-class, storage.modifier.import, storage.type.generic, entity.name.namespace, entity.name.import, meta.package.java, meta.class, meta.use, storage.modifier.lifetime, punctuation.definition.lifetime, variable.other.enummember, support.type, support.class, meta.package, storage.modifier.package, storage.type.java	#eba2e8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag, punctuation.section.embedded, tag	#ff6448	—
support.type.property-name.json, punctuation.support.type.property-name, support.type.property-name, source.toml entity.name.tag, source.ini keyword.other, text.html.markdown support.type.property-name.json, entity.name.tag.yaml	#fd3f92	—
support.type.property-name.css	#d7d7d7	—
entity.other.attribute-name	#ff6448	—
source.ini entity.name, source.ini punctuation.definition, source.toml punctuation.definition.table, source.toml entity.other.attribute-name, source.toml meta.tag	#9554e8	—
markup.inserted	#4fe399	—
markup.deleted	#ff1a1a	—
markup.changed	#ffb370	—
text.html.markdown, punctuation.definition.list_item.markdown	#d7d7d7	—
markup.inline.raw	#ff6448	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#eba2e8	—
!variable markup.underline	#d7d7d7	underline
markup.italic	#d7d7d7	italic
punctuation.definition.italic	#eba2e8	italic
markup.bold, markup.bold string	#d7d7d7	bold
punctuation.definition.bold	#eba2e8	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	#d7d7d7	italic bold
markup.quote	#d7d7d7	—
string.other.link, markup.underline.link	#c390e8	—
string.other.link.description.title.markdown	#d7d7d7	—
string.other.link.title.markdown, string.other.link.description.markdown	#d7d7d7	—
constant.other.reference.link.markdown	#c390e8	—
markup.raw.block	#c390e8	—
markup.raw.block.fenced.markdown	#4e4e4e49	—
punctuation.definition.fenced.markdown	#4e4e4e49	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#d7d7d7	—
variable.language.fenced.markdown	#d7d7d7	—
meta.separator	#d7d7d7	—
markup.table	#d7d7d7	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata	#d7d7d7	—
punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown	#ff6448	—
comment, punctuation.definition.comment	#915bb8	italic
constant, variable.other.constant, support.constant	#ff6448	bold
url, link, uri	#c390e8	underline

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