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 Twilight

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#1E1B21
activityBar.border#2E2833
activityBar.foreground#E7BED0
activityBar.inactiveForeground#94828A
activityBarBadge.background#DF88A7
activityBarBadge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#F0E6EF
breadcrumb.focusForeground#E0D6E0
breadcrumb.foreground#94828A
breadcrumbPicker.background#201D23
button.background#DF88A7
button.foreground#FFFFFF
button.hoverBackground#E7A4BA
charts.blue#8992D4
charts.foreground#E0D6E0
charts.green#84BD8B
charts.lines#6E636E
charts.orange#E5A877
charts.purple#C87D9D
charts.red#DF88A7
charts.yellow#EDBE80
debugIcon.breakpointForeground#DF88A7
debugIcon.startForeground#84BD8B
debugIcon.stopForeground#DF88A7
debugToolBar.background#201D23
diffEditor.border#2E2833
diffEditor.insertedTextBackground#84BD8B20
diffEditor.removedTextBackground#DF88A720
editor.background#232026
editor.foreground#F0E6EF
editor.lineHighlightBackground#765D6E20
editor.lineHighlightBorder#765D6E00
editor.selectionBackground#DF88A750
editor.selectionHighlightBackground#DF88A730
editor.wordHighlightBackground#765D6E40
editor.wordHighlightStrongBackground#765D6E60
editorGroupHeader.tabsBackground#1A171D
editorGroupHeader.tabsBorder#2E2833
editorGutter.background#232026
editorLineNumber.activeForeground#E7BED0
editorLineNumber.foreground#765D6E
editorOverviewRuler.currentContentForeground#84BD8B
editorOverviewRuler.incomingContentForeground#8992D4
editorSuggestWidget.background#201D23
editorSuggestWidget.border#2E2833
editorSuggestWidget.highlightForeground#E7BED0
editorSuggestWidget.selectedBackground#564351
editorWidget.background#201D23
editorWidget.border#2E2833
extensionButton.prominentBackground#DF88A7
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#E7A4BA
gitDecoration.conflictingResourceForeground#EDBE80
gitDecoration.deletedResourceForeground#DF88A7
gitDecoration.ignoredResourceForeground#6E636E
gitDecoration.modifiedResourceForeground#8992D4
gitDecoration.untrackedResourceForeground#84BD8B
input.background#2E2833
input.border#36313A
input.foreground#F0E6EF
input.placeholderForeground#94828A
keybindingLabel.background#2E2833
keybindingLabel.border#36313A
keybindingLabel.bottomBorder#36313A
keybindingLabel.foreground#E0D6E0
list.activeSelectionBackground#564351
list.activeSelectionForeground#F0E6EF
list.focusBackground#564351
list.focusForeground#F0E6EF
list.highlightForeground#E7BED0
list.hoverBackground#36313A
list.inactiveSelectionBackground#36313A
list.inactiveSelectionForeground#E0D6E0
merge.commonContentBackground#6E636E20
merge.commonHeaderBackground#6E636E30
merge.currentContentBackground#84BD8B20
merge.currentHeaderBackground#84BD8B40
merge.incomingContentBackground#8992D420
merge.incomingHeaderBackground#8992D440
notificationCenter.border#2E2833
notificationCenterHeader.background#201D23
notificationCenterHeader.foreground#E0D6E0
notificationLink.foreground#8992D4
notifications.background#201D23
notifications.border#2E2833
notifications.foreground#E0D6E0
notificationToast.border#2E2833
panel.background#201D23
panel.border#2E2833
panelTitle.activeForeground#E7BED0
panelTitle.inactiveForeground#94828A
peekView.border#DF88A7
peekViewEditor.background#232026
peekViewEditor.matchHighlightBackground#DF88A730
peekViewResult.background#201D23
peekViewResult.matchHighlightBackground#DF88A730
peekViewTitle.background#1A171D
scrollbarSlider.activeBackground#765D6E80
scrollbarSlider.background#4B414B50
scrollbarSlider.hoverBackground#4B414B80
settings.checkboxBackground#201D23
settings.dropdownBackground#201D23
settings.headerForeground#E7BED0
settings.modifiedItemIndicator#8992D4
settings.numberInputBackground#201D23
settings.textInputBackground#201D23
sideBar.background#201D23
sideBar.border#2E2833
sideBar.foreground#E0D6E0
statusBar.background#1A171D
statusBar.border#2E2833
statusBar.debuggingBackground#DF88A7
statusBar.foreground#E0D6E0
statusBar.noFolderBackground#1A171D
tab.activeBackground#2E2833
tab.activeBorder#DF88A7
tab.activeForeground#F0E6EF
tab.inactiveBackground#201D23
tab.inactiveForeground#94828A
tab.unfocusedActiveBorder#765D6E
terminal.ansiBlack#201D23
terminal.ansiBlue#8992D4
terminal.ansiBrightBlack#6E636E
terminal.ansiBrightBlue#A5ACE5
terminal.ansiBrightCyan#A3D5F3
terminal.ansiBrightGreen#A2D1A7
terminal.ansiBrightMagenta#D898B4
terminal.ansiBrightRed#E7A4BA
terminal.ansiBrightWhite#F0E6EF
terminal.ansiBrightYellow#EDCEA1
terminal.ansiCyan#8CCBED
terminal.ansiGreen#84BD8B
terminal.ansiMagenta#C87D9D
terminal.ansiRed#DF88A7
terminal.ansiWhite#E0D6E0
terminal.ansiYellow#EDBE80
terminal.background#232026
terminal.foreground#F0E6EF
titleBar.activeBackground#1A171D
titleBar.activeForeground#E0D6E0
titleBar.border#2E2833
titleBar.inactiveBackground#1A171D
titleBar.inactiveForeground#94828A
welcomePage.buttonBackground#201D23
welcomePage.buttonHoverBackground#36313A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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