Cherry Blossom Theme

Name: Cherry Blossom Theme
Author: daitsuku

Publisher: daitsukuThemes in package: 15

A VSCode theme inspired by a color palette of a sakura / cherry blossom.

Open in VS Code

Color themes

VS Code preview

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

Cherry Blossom Theme — Cherry Blossom Dark Vivid

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#2A2B34
activityBar.border#373740
activityBar.foreground#FDA4BA
activityBar.inactiveForeground#89888C
activityBarBadge.background#FDA4BA
activityBarBadge.foreground#1D1E26
breadcrumb.activeSelectionForeground#F2F2F2
breadcrumb.focusForeground#D9D9D9
breadcrumb.foreground#89888C
breadcrumbPicker.background#24252E
button.background#BF9180
button.foreground#1D1E26
button.hoverBackground#CFA08F
charts.blue#7EB0E8
charts.foreground#D9D9D9
charts.green#9CDBA8
charts.lines#89888C
charts.orange#BF9180
charts.purple#D592BC
charts.red#FDA4BA
charts.yellow#F5D6A0
debugIcon.breakpointForeground#FDA4BA
debugIcon.startForeground#9CDBA8
debugIcon.stopForeground#FDA4BA
debugToolBar.background#24252E
diffEditor.border#373740
diffEditor.insertedTextBackground#9CDBA820
diffEditor.removedTextBackground#FDA4BA20
editor.background#1D1E26
editor.foreground#D9D9D9
editor.lineHighlightBackground#37374030
editor.lineHighlightBorder#37374000
editor.selectionBackground#BF918040
editor.selectionHighlightBackground#BF918030
editor.wordHighlightBackground#7EB0E830
editor.wordHighlightStrongBackground#7EB0E820
editorGroupHeader.tabsBackground#2A2B34
editorGroupHeader.tabsBorder#373740
editorGutter.background#1D1E26
editorLineNumber.activeForeground#BF9180
editorLineNumber.foreground#89888C
editorOverviewRuler.currentContentForeground#9CDBA8
editorOverviewRuler.incomingContentForeground#7EB0E8
editorSuggestWidget.background#24252E
editorSuggestWidget.border#373740
editorSuggestWidget.highlightForeground#FDA4BA
editorSuggestWidget.selectedBackground#373740
editorWidget.background#24252E
editorWidget.border#373740
extensionButton.prominentBackground#BF9180
extensionButton.prominentForeground#1D1E26
extensionButton.prominentHoverBackground#CFA08F
gitDecoration.conflictingResourceForeground#F5D6A0
gitDecoration.deletedResourceForeground#FDA4BA
gitDecoration.ignoredResourceForeground#89888C
gitDecoration.modifiedResourceForeground#7EB0E8
gitDecoration.untrackedResourceForeground#9CDBA8
input.background#2A2B34
input.border#373740
input.foreground#D9D9D9
input.placeholderForeground#89888C
keybindingLabel.background#2A2B34
keybindingLabel.border#373740
keybindingLabel.bottomBorder#373740
keybindingLabel.foreground#D9D9D9
list.activeSelectionBackground#373740
list.activeSelectionForeground#F2F2F2
list.focusBackground#373740
list.focusForeground#F2F2F2
list.highlightForeground#FDA4BA
list.hoverBackground#2A2B34
list.inactiveSelectionBackground#2A2B34
list.inactiveSelectionForeground#D9D9D9
merge.commonContentBackground#37374020
merge.commonHeaderBackground#37374030
merge.currentContentBackground#9CDBA820
merge.currentHeaderBackground#9CDBA840
merge.incomingContentBackground#7EB0E820
merge.incomingHeaderBackground#7EB0E840
notificationCenter.border#373740
notificationCenterHeader.background#2A2B34
notificationCenterHeader.foreground#D9D9D9
notificationLink.foreground#7EB0E8
notifications.background#24252E
notifications.border#373740
notifications.foreground#D9D9D9
notificationToast.border#373740
panel.background#24252E
panel.border#373740
panelTitle.activeForeground#FDA4BA
panelTitle.inactiveForeground#89888C
peekView.border#BF9180
peekViewEditor.background#1D1E26
peekViewEditor.matchHighlightBackground#BF918030
peekViewResult.background#24252E
peekViewResult.matchHighlightBackground#BF918030
peekViewTitle.background#2A2B34
scrollbarSlider.activeBackground#89888C80
scrollbarSlider.background#89888C40
scrollbarSlider.hoverBackground#89888C60
settings.checkboxBackground#24252E
settings.dropdownBackground#24252E
settings.headerForeground#FDA4BA
settings.modifiedItemIndicator#BF9180
settings.numberInputBackground#24252E
settings.textInputBackground#24252E
sideBar.background#24252E
sideBar.border#373740
sideBar.foreground#D9D9D9
statusBar.background#2A2B34
statusBar.border#373740
statusBar.debuggingBackground#FDA4BA
statusBar.foreground#D9D9D9
statusBar.noFolderBackground#2A2B34
tab.activeBackground#1D1E26
tab.activeBorder#BF9180
tab.activeForeground#FDA4BA
tab.inactiveBackground#24252E
tab.inactiveForeground#89888C
tab.unfocusedActiveBorder#89888C
terminal.ansiBlack#2A2B34
terminal.ansiBlue#7EB0E8
terminal.ansiBrightBlack#373740
terminal.ansiBrightBlue#A2C5EF
terminal.ansiBrightCyan#9CCADF
terminal.ansiBrightGreen#B7E7C0
terminal.ansiBrightMagenta#E3B1D0
terminal.ansiBrightRed#FDB9CA
terminal.ansiBrightWhite#F2F2F2
terminal.ansiBrightYellow#F9E3BD
terminal.ansiCyan#78B3CD
terminal.ansiGreen#9CDBA8
terminal.ansiMagenta#D592BC
terminal.ansiRed#FDA4BA
terminal.ansiWhite#D9D9D9
terminal.ansiYellow#F5D6A0
terminal.background#1D1E26
terminal.foreground#D9D9D9
titleBar.activeBackground#2A2B34
titleBar.activeForeground#D9D9D9
titleBar.border#373740
titleBar.inactiveBackground#2A2B34
titleBar.inactiveForeground#89888C
welcomePage.buttonBackground#24252E
welcomePage.buttonHoverBackground#373740

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#89888C	—
variable, string constant.other.placeholder	#D9D9D9	—
constant.other.color	#F5D6A0	—
invalid, invalid.illegal	#FDA4BA	—
keyword, storage.type, storage.modifier	#FDA4BA	—
keyword.operator	#BF9180	—
string, constant.other.symbol	#9CDBA8	—
constant.numeric	#F5D6A0	—
constant.language, support.constant, constant.character, constant.escape	#FDA4BA	—
entity.name.function, meta.function-call, support.function	#7EB0E8	—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#D592BC	—
meta.method.declaration, meta.method-call, meta.method	#7EB0E8	—
variable.other.property, support.variable.property	#78B3CD	—
meta.object-literal.key	#78B3CD	—
entity.name.tag, meta.tag.sgml	#FDA4BA	—
entity.other.attribute-name	#7EB0E8	—
markup.heading	#FDA4BA	—
markup.bold	#7EB0E8	bold
markup.italic	#9CDBA8	italic
punctuation.definition, punctuation.separator, punctuation.terminator	#89888C	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.section	#D9D9D9	—
entity.name.type.interface, entity.name.type.struct	#D592BC	—
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag	#7EB0E8	—
template.expression.begin, template.expression.end	#FDA4BA	—
support.type.property-name.css	#78B3CD	—
support.constant.property-value.css	#9CDBA8	—
entity.other.attribute-name.html	#F5D6A0	—
support.type.property-name.json	#78B3CD	—
string.quoted.double.json	#9CDBA8	—
meta.tag.jsx, meta.tag.tsx	#D9D9D9	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#F5D6A0	—
meta.object-literal.key, variable.object.property	#78B3CD	—
meta.function.decorator.python, meta.function.decorator.identifier.python	#FDA4BA	—
variable.parameter.function.python	#F5D6A0	—
meta.fstring.python, constant.character.format.placeholder.other.python	#F5D6A0	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#D592BC	—
constant.language.symbol.ruby	#F5D6A0	—
variable.other.readwrite.instance.ruby	#FDA4BA	—
variable.other.readwrite.class.ruby	#D592BC	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#7EB0E8	—
beginning.punctuation.definition.list.markdown	#FDA4BA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#9CDBA8	—
markup.quote.markdown	#89888C	italic
entity.name.function.go	#7EB0E8	—
entity.name.type.go	#D592BC	—
entity.name.package.go	#9CDBA8	—
meta.attribute.rust	#FDA4BA	—
entity.name.type.rust, storage.type.rust	#D592BC	—
entity.name.lifetime.rust, punctuation.definition.lifetime.rust	#F5D6A0	—
meta.macro.rust	#FDA4BA	—
entity.name.tag.yaml	#78B3CD	—
punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#FDA4BA	—
entity.other.document.begin.yaml, entity.other.document.end.yaml	#D592BC	—
keyword.other.sql	#FDA4BA	—
support.function.sql	#7EB0E8	—
meta.table.sql	#9CDBA8	—
meta.decorator.ts, meta.decorator.tsx	#FDA4BA	—
meta.type.annotation.ts, meta.type.annotation.tsx	#D592BC	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#D592BC	—
meta.preprocessor.c, meta.preprocessor.cpp	#FDA4BA	—
string.quoted.other.lt-gt.include.c, string.quoted.other.lt-gt.include.cpp, string.quoted.double.include.c, string.quoted.double.include.cpp	#9CDBA8	—
storage.type.annotation.java	#FDA4BA	—
storage.type.generic.java	#D592BC	—
storage.modifier.import.java, storage.modifier.package.java	#9CDBA8	—
variable.other.php	#FDA4BA	—
entity.name.type.class.php	#D592BC	—
support.other.namespace.php	#9CDBA8	—
variable.other.special.shell	#FDA4BA	—
support.function.builtin.shell	#7EB0E8	—
variable.parameter.option.shell	#F5D6A0	—

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