Moe Panda Theme

Name: Moe Panda Theme
Author: moetype

Publisher: moetypeThemes in package: 1

基于 Panda Theme 修改的自用 VSCode 主题配色

Open in VS Code GitHub

VS Code preview

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

Moe Panda Theme — Panda Moe

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.

activityBarBadge.background#19f1d0
activityBarBadge.foreground#000000
badge.background#19c4a9
badge.foreground#000000
diffEditor.insertedTextBackground#19f9d730
diffEditor.removedTextBackground#ff4b8266
editor.background#1e1e1e
editor.findMatchBackground#b084eb90
editor.findMatchHighlightBackground#ff992c7c
editor.foreground#e6e6e6
editor.hoverHighlightBackground#505050ab
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#3535359f
editor.lineHighlightBorder#00000000
editor.selectionHighlightBackground#ffffff30
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#19f1d0
editor.wordHighlightStrongBackground#00000000
editorBracketMatch.border#19f1d0
editorCodeLens.foreground#a0a0a0
editorCursor.foreground#ff4b82
editorError.border#ff4b82
editorError.foreground#ff4b82
editorGutter.addedBackground#19f1d0ca
editorGutter.deletedBackground#ff4b82
editorGutter.modifiedBackground#ffcc95ca
editorHoverWidget.background#292929
editorHoverWidget.border#6e6e6e
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorLink.activeForeground#19f1d0
editorMarkerNavigation.background#292929
editorOverviewRuler.addedForeground#19f1d0ca
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#ff4b82
editorOverviewRuler.errorForeground#ff4b82
editorOverviewRuler.infoForeground#6fc1ff
editorOverviewRuler.modifiedForeground#ffcc95ca
editorOverviewRuler.warningForeground#ffcc95
editorRuler.foreground#b084eb60
editorSuggestWidget.background#292929
editorSuggestWidget.foreground#e6e6e6
editorSuggestWidget.selectedBackground#19f1d099
editorWarning.border#ffcc95
editorWarning.foreground#ffcc95
editorWhitespace.foreground#404040
editorWidget.background#292929
errorForeground#ff4b82
extensionButton.prominentBackground#19c4a9
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#19a489
focusBorder#19c4a9
foreground#e6e6e6
gitDecoration.addedResourceForeground#19f1d0
gitDecoration.conflictingResourceForeground#b084eb
gitDecoration.deletedResourceForeground#ff4b82
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#ffcc95
gitDecoration.submoduleResourceForeground#6fc1ff
gitDecoration.untrackedResourceForeground#19c4a9
input.placeholderForeground#a6a6a6
list.activeSelectionBackground#1a1a1a
list.activeSelectionForeground#19f1d0
list.dropBackground#3a3a3a
list.errorForeground#ff4b82
list.filterMatchBackground#ff992c7c
list.focusBackground#1a1a1a
list.focusForeground#19f1d0
list.highlightForeground#6fc1ff
list.hoverBackground#3a3a3a
list.inactiveSelectionBackground#1a1a1a
list.inactiveSelectionForeground#19f1d0
list.warningForeground#ffcc95
listFilterWidget.background#ff992c7c
listFilterWidget.noMatchesOutline#ff4b82
menu.background#292929
menu.foreground#e6e6e6
merge.currentContentBackground#b084eb40
merge.currentHeaderBackground#b084eb90
merge.incomingContentBackground#45a9f940
merge.incomingHeaderBackground#45a9f990
minimap.errorHighlight#ff4b82
minimap.findMatchHighlight#ff992c7c
minimap.warningHighlight#ffcc95
minimapGutter.addedBackground#19f1d0ca
minimapGutter.deletedBackground#ff4b82
minimapGutter.modifiedBackground#ffcc95ca
peekView.border#19f1d0
peekViewEditor.background#252525
peekViewResult.background#292929
peekViewResult.matchHighlightBackground#ff992c7c
peekViewResult.selectionBackground#1a1a1a
peekViewResult.selectionForeground#19f1d0
progressBar.background#b084eb
settings.numberInputBackground#292929
settings.textInputBackground#292929
sideBar.background#252525
sideBar.border#121212
sideBar.foreground#bbbbbb
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#cccccc33
sideBarTitle.foreground#e6e6e6
statusBar.foreground#ffffff
statusBar.noFolderForeground#e6e6e6
statusBarItem.remoteBackground#16825d
statusBarItem.remoteForeground#ffffff
tab.activeBorder#19f1d0
tab.activeForeground#19f1d0
tab.inactiveForeground#e6e6e6
terminal.ansiBlue#0e639c
terminal.ansiBrightBlack#757575
terminal.ansiBrightBlue#6fc1ff
terminal.ansiBrightCyan#bcaafe
terminal.ansiBrightGreen#19f1d0
terminal.ansiBrightMagenta#ff9ac1
terminal.ansiBrightRed#ff2c6d
terminal.ansiBrightWhite#e6e6e6
terminal.ansiBrightYellow#ffcc95
terminal.ansiCyan#b084eb
terminal.ansiGreen#19f1d0
terminal.ansiMagenta#ff75b5
terminal.ansiRed#ff2c6d
terminal.ansiWhite#cdcdcd
terminal.ansiYellow#ffb86c
terminalCursor.background#e6e6e6
terminalCursor.foreground#ff4b82
titleBar.activeForeground#e6e6e6
titleBar.inactiveForeground#e6e6e6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#A0A0A0
keyword	#FF75B5	—
keyword.control, keyword.operator.new	#B094FB	—
keyword.operator	#E6E6E6	—
keyword.operator.comparison	#E6E6E6	—
keyword.operator.logical	#FFCC95	—
keyword.operator.misc, keyword.operator.sigil	#FF75B5	—
storage	#FFB86C	—
constant	#FFB86C	—
constant.character.escape	#45A9F9	—
variable	#E6E6E6	—
variable.parameter	#BBBBBB	—
meta.object-binding-pattern-variable.js variable	#FFCC95	—
variable.other.constant, variable.language.this, variable.interpolation	#FF9AC1	—
variable.other.object	#E6E6B8	—
variable.other.object.property	#FF9AC1	—
variable.other.property	#FF9AC1	—
invalid.illegal	—	—
invalid.deprecated	—	—
string	#19F1D0	—
punctuation.definition.template-expression	#FFCC95	—
support	#FFCC95	—
support.class	#FFCC95	—
support.type.object.module.js	#B094FB	—
support.function	#6FC1FF	—
entity.name.function	#6FC1FF	—
entity.other.inherited-class	#FF9AC1	—
entity.name.tag.yaml	#FFCC95	—
meta.decorator punctuation.decorator	#FFB86C	—
meta.decorator variable	#6FC1FF	—
keyword.other.special-method	#45A9F9	—
keyword.control.at-rule	#B094FB	—
keyword.other.important	#FF4B82	—
variable.interpolation	#FF75B5	—
entity.name.type	#19F1D0	italic
meta.source.handlebars entity.name.tag	#6FC1FF	—
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag	#FFCC95	italic
entity.name.function.expression	#FF75B5	—
entity.unescaped.expression	#B094FB	—
constant.other.symbol	#19F1D0	—
entity.expression variable.parameter.name	#FFB86C	—
entity.expression variable.parameter.value	#6FC1FF	—
entity.expression support.function.builtin	#FF9AC1	—
entity.name.tag.html	#FFCC95	—
entity.other.attribute-name.handlebars	#FFCC95	—
support.class.component	#FF75B5	italic
meta.tag.js entity.name.tag	#FFCC95	—
entity.other.attribute-name	#FFB86C	—
markup.bold	#FFB86C	—
punctuation.definition.bold.markdown	#FFCC95	—
markup.changed	#FF75B5	—
markup.deleted	#FF2C6D	—
markup.italic	#FF9AC1	italic
punctuation.definition.italic.markdown	#FF75B5	italic
markup.inserted	#19F1D0	—
punctuation.definition.heading	#19F1D0	—
entity.name.section.markdown	#BBBBBB	—
markup.quote	#FFB86C	—
markup.inline.raw	#19F1D0	italic
beginning.punctuation.definition.list	#FF75B5	—
markup.fenced_code.block.markdown punctuation.definition.markdown	#757575	—
fenced_code.block.language	#BBBBBB	italic
string.other.link	#BBBBBB
meta.link.inline.markdown	#45A9F9	italic
text.html.markdown punctuation.definition.string	#FFCC95	—
entity.name.type.class.js	#6FC1FF	—
keyword.control.as.js	#FF9AC1	—
keyword.control.from.js	#FF9AC1	—
keyword.control.export.js	#B094FB	—
variable.language.this.js	—	italic
support.class.console.js	—	italic
entity.name.tag.js, support.class.component.js	#FF2C6D	—
variable.language.super.js	#45A9F9	—
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade	#FF2C6D	—
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml	#FF2C6D	—
entity.name.tag.xml, meta.tag.xml	#FF2C6D	—
source.vue, entity.name.tag.pug, meta.tag.other	#FF2C6D	—
text.pug	#FFFFFF	—
entity.name.tag.css	#FF2C6D	—
support.type.property-name.css	#E6E6E6	—
variable.scss	#FF9AC1	—
entity.name.tag.reference.scss	#FF2C6D	—
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css	#FFB86C	—
string.regexp	#6FC1FF	—
string.regexp keyword, string.regexp keyword.control	#FF75B5
string.regexp keyword.operator	#FF9AC1	—
comment.block.documentation	—
entity.name.type.instance.jsdoc punctuation.definition	#FFCC95	italic
entity.name.type.instance.jsdoc	#CDCDCD	italic
comment.block storage	#FFCC95	—
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string	#FF9AC1	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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