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 Dimmed

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#151515
activityBar.border#1F1F1F
activityBar.foreground#D996A2
activityBar.inactiveForeground#8C5866
activityBarBadge.background#D96A7E
activityBarBadge.foreground#F2F0F2
breadcrumb.activeSelectionForeground#F2F0F2
breadcrumb.focusForeground#F2F0F2
breadcrumb.foreground#BF8E97
breadcrumbPicker.background#121212
button.background#D96A7E
button.foreground#F2F0F2
button.hoverBackground#F24B88
charts.blue#7DA6A6
charts.foreground#F2F0F2
charts.green#7DAD89
charts.lines#8C5866
charts.orange#BF8563
charts.purple#B07DA6
charts.red#D96A7E
charts.yellow#BF8563
debugIcon.breakpointForeground#D96A7E
debugIcon.startForeground#7DAD89
debugIcon.stopForeground#D96A7E
debugToolBar.background#121212
diffEditor.border#1F1F1F
diffEditor.insertedTextBackground#7DAD8920
diffEditor.removedTextBackground#D96A7E20
editor.background#0D0D0D
editor.foreground#F2F0F2
editor.lineHighlightBackground#1F1F1F
editor.lineHighlightBorder#1F1F1F00
editor.selectionBackground#D96A7E50
editor.selectionHighlightBackground#D96A7E30
editor.wordHighlightBackground#7DA6A630
editor.wordHighlightStrongBackground#7DA6A650
editorGroupHeader.tabsBackground#151515
editorGroupHeader.tabsBorder#1F1F1F
editorGutter.background#0D0D0D
editorLineNumber.activeForeground#D996A2
editorLineNumber.foreground#8C5866
editorOverviewRuler.currentContentForeground#7DAD89
editorOverviewRuler.incomingContentForeground#7DA6A6
editorSuggestWidget.background#121212
editorSuggestWidget.border#1F1F1F
editorSuggestWidget.highlightForeground#D996A2
editorSuggestWidget.selectedBackground#402737
editorWidget.background#121212
editorWidget.border#1F1F1F
extensionButton.prominentBackground#D96A7E
extensionButton.prominentForeground#F2F0F2
extensionButton.prominentHoverBackground#F24B88
gitDecoration.conflictingResourceForeground#BF8563
gitDecoration.deletedResourceForeground#D96A7E
gitDecoration.ignoredResourceForeground#8C5866
gitDecoration.modifiedResourceForeground#7DA6A6
gitDecoration.untrackedResourceForeground#7DAD89
input.background#151515
input.border#8C5866
input.foreground#F2F0F2
input.placeholderForeground#BF8E97
keybindingLabel.background#151515
keybindingLabel.border#8C5866
keybindingLabel.bottomBorder#8C5866
keybindingLabel.foreground#F2F0F2
list.activeSelectionBackground#402737
list.activeSelectionForeground#F2F0F2
list.focusBackground#402737
list.focusForeground#F2F0F2
list.highlightForeground#D996A2
list.hoverBackground#1F1F1F
list.inactiveSelectionBackground#1F1F1F
list.inactiveSelectionForeground#F2F0F2
merge.commonContentBackground#8C586620
merge.commonHeaderBackground#8C586630
merge.currentContentBackground#7DAD8920
merge.currentHeaderBackground#7DAD8940
merge.incomingContentBackground#7DA6A620
merge.incomingHeaderBackground#7DA6A640
notificationCenter.border#1F1F1F
notificationCenterHeader.background#121212
notificationCenterHeader.foreground#F2F0F2
notificationLink.foreground#7DA6A6
notifications.background#121212
notifications.border#1F1F1F
notifications.foreground#F2F0F2
notificationToast.border#1F1F1F
panel.background#0D0D0D
panel.border#1F1F1F
panelTitle.activeForeground#F2F0F2
panelTitle.inactiveForeground#BF8E97
peekView.border#D96A7E
peekViewEditor.background#0D0D0D
peekViewEditor.matchHighlightBackground#D96A7E40
peekViewResult.background#151515
peekViewResult.matchHighlightBackground#D96A7E40
peekViewTitle.background#1F1F1F
scrollbarSlider.activeBackground#D96A7E80
scrollbarSlider.background#8C586640
scrollbarSlider.hoverBackground#8C586680
settings.checkboxBackground#121212
settings.dropdownBackground#121212
settings.headerForeground#D996A2
settings.modifiedItemIndicator#7DA6A6
settings.numberInputBackground#121212
settings.textInputBackground#121212
sideBar.background#121212
sideBar.border#1F1F1F
sideBar.foreground#F2F0F2
statusBar.background#151515
statusBar.border#1F1F1F
statusBar.debuggingBackground#D96A7E
statusBar.foreground#F2F0F2
statusBar.noFolderBackground#151515
tab.activeBackground#0D0D0D
tab.activeBorder#D96A7E
tab.activeForeground#F2F0F2
tab.inactiveBackground#151515
tab.inactiveForeground#BF8E97
tab.unfocusedActiveBorder#D996A2
terminal.ansiBlack#1F1F1F
terminal.ansiBlue#7DA6A6
terminal.ansiBrightBlack#735448
terminal.ansiBrightBlue#8EBDC5
terminal.ansiBrightCyan#8EBDC5
terminal.ansiBrightGreen#8FD19E
terminal.ansiBrightMagenta#C88CBD
terminal.ansiBrightRed#F24B88
terminal.ansiBrightWhite#F2F0F2
terminal.ansiBrightYellow#F2A999
terminal.ansiCyan#7DA6A6
terminal.ansiGreen#7DAD89
terminal.ansiMagenta#B07DA6
terminal.ansiRed#D96A7E
terminal.ansiWhite#F2F0F2
terminal.ansiYellow#BF8563
terminal.background#0D0D0D
terminal.foreground#F2F0F2
titleBar.activeBackground#151515
titleBar.activeForeground#F2F0F2
titleBar.border#1F1F1F
titleBar.inactiveBackground#0D0D0D
titleBar.inactiveForeground#BF8E97
welcomePage.buttonBackground#151515
welcomePage.buttonHoverBackground#1F1F1F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8C5866	—
variable, string constant.other.placeholder	#F2F0F2	—
constant.other.color	#BF8563	—
invalid, invalid.illegal	#F24B88	—
keyword, storage.type, storage.modifier	#D996A2	—
keyword.operator	#7DA6A6	—
string, constant.other.symbol	#7DAD89	—
constant.numeric	#BF8563	—
constant.language, support.constant, constant.character, constant.escape	#B07DA6	—
entity.name.function, meta.function-call, support.function	#7DA6A6	—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#D996A2	—
meta.method.declaration, meta.method-call, meta.method	#7DA6A6	—
variable.other.property, support.variable.property	#F2A999	—
meta.object-literal.key	#F2A999	—
entity.name.tag, meta.tag.sgml	#D996A2	—
entity.other.attribute-name	#7DAD89	—
markup.heading	#D996A2	—
markup.bold	#7DA6A6	bold
markup.italic	#7DAD89	italic
punctuation.definition, punctuation.separator, punctuation.terminator	#BF8E97	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.section	#7DA6A6	—
entity.name.type.interface, entity.name.type.struct	#B07DA6	—
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag	#B07DA6	—
template.expression.begin, template.expression.end	#D96A7E	—
support.type.property-name.css	#F2A999	—
support.constant.property-value.css	#7DAD89	—
entity.other.attribute-name.html	#7DAD89	—
support.type.property-name.json	#F2A999	—
string.quoted.double.json	#7DAD89	—
meta.tag.jsx, meta.tag.tsx	#F2F0F2	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#7DAD89	—
meta.object-literal.key, variable.object.property	#F2A999	—
meta.field.graphql	#7DA6A6	—
meta.type.graphql	#B07DA6	—
entity.name.tag.xml	#D996A2	—
entity.other.attribute-name.xml	#7DAD89	—
markup.inserted	#7DAD89	—
markup.deleted	#D96A7E	—
markup.changed	#BF8563	—

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