Mermaid Theme

Name: Mermaid Theme
Author: Steph Keys

Publisher: Steph KeysThemes in package: 1

For those who loves mermaids tail colors

Open in VS Code GitHub

VS Code preview

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

Mermaid Theme — Mermaid Theme

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#0E0F13
activityBar.foreground#AA93DD
activityBarBadge.background#df65ac
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#BBBBBB
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#0b0c0f
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#1b1c25
dropdown.listBackground#2E303E
editor.background#0b0c0f
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#2E303E4D
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#2E303EB3
editor.selectionHighlightBackground#6C6F934D
editor.wordHighlightBackground#6C6F9380
editor.wordHighlightStrongBackground#6C6F9380
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#0b0c0f
editorCursor.foreground#d985e4
editorError.foreground#AFCBFF
editorGroup.border#22252e
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#0b0c0f
editorGutter.addedBackground#df8599b2
editorGutter.deletedBackground#afcbffe7
editorGutter.modifiedBackground#df8599b2
editorIndentGuide.activeBackground#2E303E
editorIndentGuide.background#2E303E80
editorLineNumber.activeForeground#afcbffe7
editorLineNumber.foreground#aa93dd9c
editorOverviewRuler.addedForeground#AFCBFF
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#BBBBBB80
editorOverviewRuler.deletedForeground#DF8598
editorOverviewRuler.errorForeground#DF8598
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#AFCBFF
editorOverviewRuler.warningForeground#AFCBFF
editorRuler.foreground#6C6F934D
editorSuggestWidget.highlightForeground#DF8598
editorWarning.foreground#AFCBFF
editorWidget.background#1b1c25
editorWidget.border#1b1c25
errorForeground#DF8598
extensionButton.prominentBackground#df65ac
extensionButton.prominentHoverBackground#df65ac
focusBorder#22252e
foreground#DDDFE9
gitDecoration.addedResourceForeground#afcbffc9
gitDecoration.deletedResourceForeground#AA93DD
gitDecoration.ignoredResourceForeground#aa93dd6b
gitDecoration.modifiedResourceForeground#DF8598
gitDecoration.untrackedResourceForeground#ffffffa1
input.background#2E303E
inputOption.activeBorder#df65ac
inputValidation.errorBackground#DF8598
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#2E303E80
list.activeSelectionForeground#BBBBBB
list.dropBackground#6C6F9380
list.errorForeground#DF8598
list.focusBackground#2E303E80
list.focusForeground#BBBBBB
list.highlightForeground#df65ac
list.hoverBackground#2E303E80
list.hoverForeground#BBBBBB
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#BBBBBB
list.warningForeground#df8599e0
notifications.background#14151B
panelTitle.activeBorder#df65ac
peekView.border#1A1C23
peekViewEditor.background#1b1c25
peekViewEditor.matchHighlightBackground#6C6F9380
peekViewResult.background#1b1c25
peekViewResult.matchHighlightBackground#6C6F9380
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#1b1c25
pickerGroup.foreground#DF8598E6
progressBar.background#df65ac
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#6C6F9380
scrollbarSlider.background#6C6F931A
scrollbarSlider.hoverBackground#6C6F934D
selection.background#6C6F9380
sideBar.background#0E0F13
sideBar.dropBackground#6C6F934D
sideBar.foreground#aa93ddc7
sideBarSectionHeader.background#0E0F13
sideBarSectionHeader.foreground#BBBBBB
statusBar.background#AA93DD
statusBar.debuggingBackground#df65ac
statusBar.debuggingForeground#06060C
statusBar.foreground#06060C
statusBar.noFolderBackground#0b0c0f
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#df65ac
tab.border#1C1E2600
tab.inactiveBackground#0b0c0f
terminal.ansiBlue#AA93DD
terminal.ansiBrightBlue#AFCBFF
terminal.ansiBrightCyan#AFCBFF
terminal.ansiBrightGreen#AFCBFF
terminal.ansiBrightMagenta#DF8598
terminal.ansiBrightRed#DF8598
terminal.ansiBrightYellow#AA93DD
terminal.ansiCyan#AFCBFF
terminal.ansiGreen#AFCBFF
terminal.ansiMagenta#DF8598
terminal.ansiRed#DF8598
terminal.ansiYellow#AA93DD
terminal.foreground#BBBBBB
terminal.selectionBackground#6C6F934D
terminalCursor.background#BBBBBB
terminalCursor.foreground#AA93DD
textLink.activeForeground#df65ac
textLink.foreground#AA93DD
titleBar.activeBackground#0b0c0f
titleBar.inactiveBackground#0b0c0f
walkThrough.embeddedEditorBackground#1b1c25
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.quoted.docstring, comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#6d6f7c	italic
constant	#df65ac	—
constant.character.escape	#AFCBFF	—
entity.name	#AFCBFF	—
entity.name.function	#AFCBFF	—
entity.name.tag	#AA93DD	—
entity.name.type, storage.type.cs	#df65ac	—
entity.other.attribute-name	#afcbff	italic
entity.other.inherited-class	#df65ac	—
entity.other.attribute-name.id	#df65ac	—
entity.name.function.operator.member.cpp	#BBBBBB	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#df65ac	—
entity.name.variable, variable	#df65ac	—
string, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.block.any.html, source.sass keyword.control	#8c97ea	—
string.quoted.single.js, string.template	#BBBBBB	—
text.html.derivative	#d0d3df	—
keyword	#df65ac	—
keyword.operator, storage.type.function.arrow.js	#BBBBBB	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#AFCBFF	—
keyword.other.unit	#df65ac	—
markup.quote	#AFCBFF	italic
markup.heading, entity.name.section	#df65ac	—
markup.bold	#df65ac	bold
markup.italic	#AFCBFF	italic
markup.inline.raw, markup.fenced_code.block, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown	#AFCBFF	—
markup.underline.link	#AFCBFF	italic
storage	#AA93DD	—
string.quoted, variable.parameter.function.language.special.self.python	#e07dbaf6	—
string.regexp	#df65ac	—
string.other.link	#58cfd8	—
support	#df65ac	—
support.function	#AFCBFF	—
support.variable	#AFCBFF	—
support.type.property-name, meta.object-literal.key, variable.parameter.js	#AA93DD	—
support.type.property-name.css	#AA93DD	—
variable.language	#AA93DD	italic
variable.parameter	#AFCBFF	—
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag	#df65ac	—
punctuation.separator	#BBBBBB	bold
punctuation.definition.template-expression	#AFCBFF	—
punctuation	#df65ac	—
punctuation.definition.list	#BBBBBB	—
meta.function-call.generic, support.type.python, keyword.control.flow.python, constant.other.caps.python	#AFCBFF	—
source.python	#AA93DD	—
keyword.operator.logical	#AA93DD	—
support.variable.magic.python	#AA93DD	—
entity.name.type.cpp	#AA93DD	—
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp, variable.other.global.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.directive.cpp	#AFCBFF	—
support.type.python	#AA93DD	—

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