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 Reflection

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#101218
activityBar.border#1C202A
activityBar.foreground#F9BECA
activityBar.inactiveForeground#596377
activityBarBadge.background#F9BECA
activityBarBadge.foreground#101218
breadcrumb.activeSelectionForeground#E8E9F0
breadcrumb.focusForeground#D8DCE9
breadcrumb.foreground#596377
breadcrumbPicker.background#171B24
button.background#F9BECA
button.foreground#151820
button.hoverBackground#FACFD8
charts.blue#7AACD6
charts.foreground#D8DCE9
charts.green#A8D6E2
charts.lines#596377
charts.orange#E9B587
charts.purple#D8A8C8
charts.red#F9BECA
charts.yellow#F8D3A7
debugIcon.breakpointForeground#F9BECA
debugIcon.startForeground#A8D6E2
debugIcon.stopForeground#F9BECA
debugToolBar.background#171B24
diffEditor.border#1C202A
diffEditor.insertedTextBackground#A8D6E220
diffEditor.removedTextBackground#F9BECA20
editor.background#151820
editor.foreground#E8E9F0
editor.lineHighlightBackground#1C202A
editor.lineHighlightBorder#1C202A00
editor.selectionBackground#3A6B9E40
editor.selectionHighlightBackground#3A6B9E30
editor.wordHighlightBackground#F9BECA20
editor.wordHighlightStrongBackground#F9BECA30
editorGroupHeader.tabsBackground#0E1016
editorGroupHeader.tabsBorder#1C202A
editorGutter.background#151820
editorLineNumber.activeForeground#F9BECA
editorLineNumber.foreground#596377
editorOverviewRuler.currentContentForeground#A8D6E2
editorOverviewRuler.incomingContentForeground#7AACD6
editorSuggestWidget.background#171B24
editorSuggestWidget.border#1C202A
editorSuggestWidget.highlightForeground#F9BECA
editorSuggestWidget.selectedBackground#2A3449
editorWidget.background#171B24
editorWidget.border#1C202A
extensionButton.prominentBackground#F9BECA
extensionButton.prominentForeground#151820
extensionButton.prominentHoverBackground#FACFD8
gitDecoration.conflictingResourceForeground#F8D3A7
gitDecoration.deletedResourceForeground#F9BECA
gitDecoration.ignoredResourceForeground#596377
gitDecoration.modifiedResourceForeground#7AACD6
gitDecoration.untrackedResourceForeground#A8D6E2
input.background#1C202A
input.border#2A3449
input.foreground#E8E9F0
input.placeholderForeground#596377
keybindingLabel.background#202736
keybindingLabel.border#2A3449
keybindingLabel.bottomBorder#2A3449
keybindingLabel.foreground#D8DCE9
list.activeSelectionBackground#2A3449
list.activeSelectionForeground#E8E9F0
list.focusBackground#2A3449
list.focusForeground#E8E9F0
list.highlightForeground#F9BECA
list.hoverBackground#202736
list.inactiveSelectionBackground#202736
list.inactiveSelectionForeground#D8DCE9
merge.commonContentBackground#59637720
merge.commonHeaderBackground#59637730
merge.currentContentBackground#A8D6E220
merge.currentHeaderBackground#A8D6E240
merge.incomingContentBackground#7AACD620
merge.incomingHeaderBackground#7AACD640
notificationCenter.border#1C202A
notificationCenterHeader.background#171B24
notificationCenterHeader.foreground#D8DCE9
notificationLink.foreground#7AACD6
notifications.background#171B24
notifications.border#1C202A
notifications.foreground#D8DCE9
notificationToast.border#1C202A
panel.background#171B24
panel.border#1C202A
panelTitle.activeForeground#F9BECA
panelTitle.inactiveForeground#596377
peekView.border#F9BECA
peekViewEditor.background#151820
peekViewEditor.matchHighlightBackground#F9BECA30
peekViewResult.background#171B24
peekViewResult.matchHighlightBackground#F9BECA30
peekViewTitle.background#0E1016
scrollbarSlider.activeBackground#3A6B9E70
scrollbarSlider.background#3A6B9E30
scrollbarSlider.hoverBackground#3A6B9E50
settings.checkboxBackground#171B24
settings.dropdownBackground#171B24
settings.headerForeground#F9BECA
settings.modifiedItemIndicator#7AACD6
settings.numberInputBackground#171B24
settings.textInputBackground#171B24
sideBar.background#171B24
sideBar.border#1C202A
sideBar.foreground#D8DCE9
statusBar.background#0E1016
statusBar.border#1C202A
statusBar.debuggingBackground#F9BECA
statusBar.foreground#D8DCE9
statusBar.noFolderBackground#0E1016
tab.activeBackground#151820
tab.activeBorder#F9BECA
tab.activeForeground#E8E9F0
tab.inactiveBackground#171B24
tab.inactiveForeground#596377
tab.unfocusedActiveBorder#596377
terminal.ansiBlack#171B24
terminal.ansiBlue#7AACD6
terminal.ansiBrightBlack#596377
terminal.ansiBrightBlue#A3C6E5
terminal.ansiBrightCyan#B4D7E4
terminal.ansiBrightGreen#C5E3EB
terminal.ansiBrightMagenta#E5C6DB
terminal.ansiBrightRed#FACFD8
terminal.ansiBrightWhite#E8E9F0
terminal.ansiBrightYellow#F9DFC2
terminal.ansiCyan#91C7D9
terminal.ansiGreen#A8D6E2
terminal.ansiMagenta#D8A8C8
terminal.ansiRed#F9BECA
terminal.ansiWhite#D8DCE9
terminal.ansiYellow#F8D3A7
terminal.background#151820
terminal.foreground#E8E9F0
titleBar.activeBackground#0E1016
titleBar.activeForeground#D8DCE9
titleBar.border#1C202A
titleBar.inactiveBackground#0E1016
titleBar.inactiveForeground#596377
welcomePage.buttonBackground#171B24
welcomePage.buttonHoverBackground#2A3449

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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