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 Breeze

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#172038
activityBar.border#243049
activityBar.foreground#E1B2C4
activityBar.inactiveForeground#7A8AAD
activityBarBadge.background#E296AF
activityBarBadge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#EFF1F5
breadcrumb.focusForeground#D9E0F0
breadcrumb.foreground#7A8AAD
breadcrumbPicker.background#1D2438
button.background#E296AF
button.foreground#FFFFFF
button.hoverBackground#EAA8BF
charts.blue#92B2E5
charts.foreground#D9E0F0
charts.green#A8D0E3
charts.lines#536180
charts.orange#E3B78E
charts.purple#C79FD0
charts.red#E296AF
charts.yellow#F0D1A3
debugIcon.breakpointForeground#E296AF
debugIcon.startForeground#A8D0E3
debugIcon.stopForeground#E296AF
debugToolBar.background#1D2438
diffEditor.border#243049
diffEditor.insertedTextBackground#A8D0E320
diffEditor.removedTextBackground#E296AF20
editor.background#1A2030
editor.foreground#EFF1F5
editor.lineHighlightBackground#2A3452
editor.lineHighlightBorder#2A345200
editor.selectionBackground#E296AF40
editor.selectionHighlightBackground#E296AF30
editor.wordHighlightBackground#7A8AAD40
editor.wordHighlightStrongBackground#7A8AAD60
editorGroupHeader.tabsBackground#152034
editorGroupHeader.tabsBorder#243049
editorGutter.background#1A2030
editorLineNumber.activeForeground#E1B2C4
editorLineNumber.foreground#536180
editorOverviewRuler.currentContentForeground#A8D0E3
editorOverviewRuler.incomingContentForeground#92B2E5
editorSuggestWidget.background#1D2438
editorSuggestWidget.border#243049
editorSuggestWidget.highlightForeground#E1B2C4
editorSuggestWidget.selectedBackground#3A4466
editorWidget.background#1D2438
editorWidget.border#243049
extensionButton.prominentBackground#E296AF
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#EAA8BF
gitDecoration.conflictingResourceForeground#F0D1A3
gitDecoration.deletedResourceForeground#E296AF
gitDecoration.ignoredResourceForeground#536180
gitDecoration.modifiedResourceForeground#92B2E5
gitDecoration.untrackedResourceForeground#A8D0E3
input.background#243049
input.border#2A3452
input.foreground#EFF1F5
input.placeholderForeground#7A8AAD
keybindingLabel.background#243049
keybindingLabel.border#2A3452
keybindingLabel.bottomBorder#2A3452
keybindingLabel.foreground#D9E0F0
list.activeSelectionBackground#3A4466
list.activeSelectionForeground#EFF1F5
list.focusBackground#3A4466
list.focusForeground#EFF1F5
list.highlightForeground#E1B2C4
list.hoverBackground#2A3452
list.inactiveSelectionBackground#2A3452
list.inactiveSelectionForeground#D9E0F0
merge.commonContentBackground#7A8AAD20
merge.commonHeaderBackground#7A8AAD30
merge.currentContentBackground#A8D0E320
merge.currentHeaderBackground#A8D0E340
merge.incomingContentBackground#92B2E520
merge.incomingHeaderBackground#92B2E540
notificationCenter.border#243049
notificationCenterHeader.background#1D2438
notificationCenterHeader.foreground#D9E0F0
notificationLink.foreground#92B2E5
notifications.background#1D2438
notifications.border#243049
notifications.foreground#D9E0F0
notificationToast.border#243049
panel.background#1D2438
panel.border#243049
panelTitle.activeForeground#E1B2C4
panelTitle.inactiveForeground#7A8AAD
peekView.border#E296AF
peekViewEditor.background#1A2030
peekViewEditor.matchHighlightBackground#E296AF30
peekViewResult.background#1D2438
peekViewResult.matchHighlightBackground#E296AF30
peekViewTitle.background#152034
scrollbarSlider.activeBackground#7A8AAD80
scrollbarSlider.background#7A8AAD40
scrollbarSlider.hoverBackground#7A8AAD60
settings.checkboxBackground#1D2438
settings.dropdownBackground#1D2438
settings.headerForeground#E1B2C4
settings.modifiedItemIndicator#92B2E5
settings.numberInputBackground#1D2438
settings.textInputBackground#1D2438
sideBar.background#1D2438
sideBar.border#243049
sideBar.foreground#D9E0F0
statusBar.background#152034
statusBar.border#243049
statusBar.debuggingBackground#E296AF
statusBar.foreground#D9E0F0
statusBar.noFolderBackground#152034
tab.activeBackground#1A2030
tab.activeBorder#E296AF
tab.activeForeground#EFF1F5
tab.inactiveBackground#1D2438
tab.inactiveForeground#7A8AAD
tab.unfocusedActiveBorder#7A8AAD
terminal.ansiBlack#1D2438
terminal.ansiBlue#92B2E5
terminal.ansiBrightBlack#536180
terminal.ansiBrightBlue#A4BFED
terminal.ansiBrightCyan#A2D5E0
terminal.ansiBrightGreen#BADCED
terminal.ansiBrightMagenta#D5B2DA
terminal.ansiBrightRed#EAA8BF
terminal.ansiBrightWhite#EFF1F5
terminal.ansiBrightYellow#F6DEBC
terminal.ansiCyan#86C4D2
terminal.ansiGreen#A8D0E3
terminal.ansiMagenta#C79FD0
terminal.ansiRed#E296AF
terminal.ansiWhite#D9E0F0
terminal.ansiYellow#F0D1A3
terminal.background#1A2030
terminal.foreground#EFF1F5
titleBar.activeBackground#152034
titleBar.activeForeground#D9E0F0
titleBar.border#243049
titleBar.inactiveBackground#152034
titleBar.inactiveForeground#7A8AAD
welcomePage.buttonBackground#1D2438
welcomePage.buttonHoverBackground#2A3452

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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