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

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#151519
activityBar.border#26262D
activityBar.foreground#F8B2CC
activityBar.inactiveForeground#777780
activityBarBadge.background#F8B2CC
activityBarBadge.foreground#151519
breadcrumb.activeSelectionForeground#F2F2F7
breadcrumb.focusForeground#E8E8EF
breadcrumb.foreground#777780
breadcrumbPicker.background#1D1D22
button.background#F8B2CC
button.foreground#151519
button.hoverBackground#FAC2D8
charts.blue#7EB5E7
charts.foreground#E8E8EF
charts.green#8ED9A9
charts.lines#5C5C66
charts.orange#E9B587
charts.purple#D297D6
charts.red#F8B2CC
charts.yellow#FFD87D
debugIcon.breakpointForeground#F8B2CC
debugIcon.startForeground#8ED9A9
debugIcon.stopForeground#F8B2CC
debugToolBar.background#1D1D22
diffEditor.border#26262D
diffEditor.insertedTextBackground#8ED9A920
diffEditor.removedTextBackground#F8B2CC20
editor.background#1A1A1E
editor.foreground#F2F2F7
editor.lineHighlightBackground#28282F
editor.lineHighlightBorder#28282F00
editor.selectionBackground#F8B2CC60
editor.selectionHighlightBackground#F8B2CC30
editor.wordHighlightBackground#7EB5E730
editor.wordHighlightStrongBackground#7EB5E750
editorGroupHeader.tabsBackground#141418
editorGroupHeader.tabsBorder#26262D
editorGutter.background#1A1A1E
editorLineNumber.activeForeground#F8B2CC
editorLineNumber.foreground#5C5C66
editorOverviewRuler.currentContentForeground#8ED9A9
editorOverviewRuler.incomingContentForeground#7EB5E7
editorSuggestWidget.background#1D1D22
editorSuggestWidget.border#26262D
editorSuggestWidget.highlightForeground#F8B2CC
editorSuggestWidget.selectedBackground#35353D
editorWidget.background#1D1D22
editorWidget.border#26262D
extensionButton.prominentBackground#F8B2CC
extensionButton.prominentForeground#151519
extensionButton.prominentHoverBackground#FAC2D8
gitDecoration.conflictingResourceForeground#FFD87D
gitDecoration.deletedResourceForeground#F8B2CC
gitDecoration.ignoredResourceForeground#5C5C66
gitDecoration.modifiedResourceForeground#7EB5E7
gitDecoration.untrackedResourceForeground#8ED9A9
input.background#202026
input.border#35353D
input.foreground#F2F2F7
input.placeholderForeground#777780
keybindingLabel.background#202026
keybindingLabel.border#35353D
keybindingLabel.bottomBorder#35353D
keybindingLabel.foreground#E8E8EF
list.activeSelectionBackground#35353D
list.activeSelectionForeground#F2F2F7
list.focusBackground#35353D
list.focusForeground#F2F2F7
list.highlightForeground#F8B2CC
list.hoverBackground#28282F
list.inactiveSelectionBackground#28282F
list.inactiveSelectionForeground#E8E8EF
merge.commonContentBackground#5C5C6620
merge.commonHeaderBackground#5C5C6630
merge.currentContentBackground#8ED9A920
merge.currentHeaderBackground#8ED9A940
merge.incomingContentBackground#7EB5E720
merge.incomingHeaderBackground#7EB5E740
notificationCenter.border#26262D
notificationCenterHeader.background#1D1D22
notificationCenterHeader.foreground#E8E8EF
notificationLink.foreground#7EB5E7
notifications.background#1D1D22
notifications.border#26262D
notifications.foreground#E8E8EF
notificationToast.border#26262D
panel.background#1D1D22
panel.border#26262D
panelTitle.activeForeground#F2F2F7
panelTitle.inactiveForeground#777780
peekView.border#F8B2CC
peekViewEditor.background#1A1A1E
peekViewEditor.matchHighlightBackground#F8B2CC40
peekViewResult.background#1D1D22
peekViewResult.matchHighlightBackground#F8B2CC40
peekViewTitle.background#141418
scrollbarSlider.activeBackground#3D3D4AC0
scrollbarSlider.background#3D3D4A80
scrollbarSlider.hoverBackground#3D3D4AA0
settings.checkboxBackground#1D1D22
settings.dropdownBackground#1D1D22
settings.headerForeground#F8B2CC
settings.modifiedItemIndicator#7EB5E7
settings.numberInputBackground#1D1D22
settings.textInputBackground#1D1D22
sideBar.background#1D1D22
sideBar.border#26262D
sideBar.foreground#E8E8EF
statusBar.background#141418
statusBar.border#26262D
statusBar.debuggingBackground#F8B2CC
statusBar.foreground#E8E8EF
statusBar.noFolderBackground#141418
tab.activeBackground#1A1A1E
tab.activeBorder#F8B2CC
tab.activeForeground#F2F2F7
tab.inactiveBackground#1D1D22
tab.inactiveForeground#777780
tab.unfocusedActiveBorder#F8B2CC60
terminal.ansiBlack#1D1D22
terminal.ansiBlue#7EB5E7
terminal.ansiBrightBlack#5C5C66
terminal.ansiBrightBlue#9DC6ED
terminal.ansiBrightCyan#9FEDED
terminal.ansiBrightGreen#A5E6BD
terminal.ansiBrightMagenta#E0B1E0
terminal.ansiBrightRed#FAC2D8
terminal.ansiBrightWhite#F2F2F7
terminal.ansiBrightYellow#FFE49F
terminal.ansiCyan#7CE2E1
terminal.ansiGreen#8ED9A9
terminal.ansiMagenta#D297D6
terminal.ansiRed#F8B2CC
terminal.ansiWhite#E8E8EF
terminal.ansiYellow#FFD87D
terminal.background#1A1A1E
terminal.foreground#F2F2F7
titleBar.activeBackground#141418
titleBar.activeForeground#E8E8EF
titleBar.border#26262D
titleBar.inactiveBackground#141418
titleBar.inactiveForeground#777780
welcomePage.buttonBackground#1D1D22
welcomePage.buttonHoverBackground#28282F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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