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 Night Harmony

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#1E1F3A
activityBar.border#282A45
activityBar.foreground#E06796
activityBar.inactiveForeground#BF99A7
activityBarBadge.background#E06796
activityBarBadge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#F8FAFF
breadcrumb.focusForeground#DBE6F7
breadcrumb.foreground#8CA2BC
breadcrumbPicker.background#1A1B34
button.background#E06796
button.foreground#FFFFFF
button.hoverBackground#E87CA6
charts.blue#4A88C7
charts.foreground#DBE6F7
charts.green#5DA68C
charts.lines#5D6A85
charts.orange#E09C5D
charts.purple#C0579D
charts.red#E06796
charts.yellow#D4964C
debugIcon.breakpointForeground#E06796
debugIcon.startForeground#5DA68C
debugIcon.stopForeground#E06796
debugToolBar.background#1A1B34
diffEditor.border#282A45
diffEditor.insertedTextBackground#5DA68C20
diffEditor.removedTextBackground#E0679620
editor.background#16172E
editor.foreground#F8FAFF
editor.lineHighlightBackground#282A45
editor.lineHighlightBorder#282A4500
editor.selectionBackground#E0679640
editor.selectionHighlightBackground#E0679630
editor.wordHighlightBackground#4A88C730
editor.wordHighlightStrongBackground#4BA7BE30
editorGroupHeader.tabsBackground#141529
editorGroupHeader.tabsBorder#282A45
editorGutter.background#16172E
editorLineNumber.activeForeground#E06796
editorLineNumber.foreground#5D6A85
editorOverviewRuler.currentContentForeground#5DA68C
editorOverviewRuler.incomingContentForeground#4A88C7
editorSuggestWidget.background#1A1B34
editorSuggestWidget.border#282A45
editorSuggestWidget.highlightForeground#E06796
editorSuggestWidget.selectedBackground#3A354D
editorWidget.background#1A1B34
editorWidget.border#282A45
extensionButton.prominentBackground#E06796
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#E87CA6
gitDecoration.conflictingResourceForeground#E6B575
gitDecoration.deletedResourceForeground#E06796
gitDecoration.ignoredResourceForeground#5D6A85
gitDecoration.modifiedResourceForeground#78A8DB
gitDecoration.untrackedResourceForeground#7FCEA8
input.background#1A1B34
input.border#282A45
input.foreground#F8FAFF
input.placeholderForeground#8CA2BC
keybindingLabel.background#1A1B34
keybindingLabel.border#282A45
keybindingLabel.bottomBorder#282A45
keybindingLabel.foreground#DBE6F7
list.activeSelectionBackground#3A354D
list.activeSelectionForeground#F8FAFF
list.focusBackground#3A354D
list.focusForeground#F8FAFF
list.highlightForeground#E06796
list.hoverBackground#282A45
list.inactiveSelectionBackground#282A45
list.inactiveSelectionForeground#DBE6F7
merge.commonContentBackground#8CA2BC20
merge.commonHeaderBackground#8CA2BC30
merge.currentContentBackground#5DA68C20
merge.currentHeaderBackground#5DA68C40
merge.incomingContentBackground#4A88C720
merge.incomingHeaderBackground#4A88C740
notificationCenter.border#282A45
notificationCenterHeader.background#1A1B34
notificationCenterHeader.foreground#DBE6F7
notificationLink.foreground#78A8DB
notifications.background#1A1B34
notifications.border#282A45
notifications.foreground#DBE6F7
notificationToast.border#282A45
panel.background#1A1B34
panel.border#282A45
panelTitle.activeForeground#F8FAFF
panelTitle.inactiveForeground#8CA2BC
peekView.border#E06796
peekViewEditor.background#16172E
peekViewEditor.matchHighlightBackground#E0679630
peekViewResult.background#1A1B34
peekViewResult.matchHighlightBackground#E0679630
peekViewTitle.background#141529
scrollbarSlider.activeBackground#8CA2BC50
scrollbarSlider.background#8CA2BC30
scrollbarSlider.hoverBackground#8CA2BC40
settings.checkboxBackground#1A1B34
settings.dropdownBackground#1A1B34
settings.headerForeground#E06796
settings.modifiedItemIndicator#4A88C7
settings.numberInputBackground#1A1B34
settings.textInputBackground#1A1B34
sideBar.background#1A1B34
sideBar.border#282A45
sideBar.foreground#DBE6F7
statusBar.background#141529
statusBar.border#282A45
statusBar.debuggingBackground#E06796
statusBar.foreground#DBE6F7
statusBar.noFolderBackground#141529
tab.activeBackground#16172E
tab.activeBorder#E06796
tab.activeForeground#F8FAFF
tab.inactiveBackground#1A1B34
tab.inactiveForeground#8CA2BC
tab.unfocusedActiveBorder#BF99A7
terminal.ansiBlack#1A1B34
terminal.ansiBlue#4A88C7
terminal.ansiBrightBlack#5D6A85
terminal.ansiBrightBlue#78A8DB
terminal.ansiBrightCyan#6CBFD2
terminal.ansiBrightGreen#7FCEA8
terminal.ansiBrightMagenta#D07EB3
terminal.ansiBrightRed#E87CA6
terminal.ansiBrightWhite#F8FAFF
terminal.ansiBrightYellow#E6B575
terminal.ansiCyan#4BA7BE
terminal.ansiGreen#5DA68C
terminal.ansiMagenta#C0579D
terminal.ansiRed#E06796
terminal.ansiWhite#DBE6F7
terminal.ansiYellow#D4964C
terminal.background#16172E
terminal.foreground#F8FAFF
titleBar.activeBackground#141529
titleBar.activeForeground#DBE6F7
titleBar.border#282A45
titleBar.inactiveBackground#141529
titleBar.inactiveForeground#8CA2BC
welcomePage.buttonBackground#1A1B34
welcomePage.buttonHoverBackground#282A45

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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