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 Osaka

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#16191d
activityBar.border#2b3036
activityBar.foreground#d98c71
activityBar.inactiveForeground#6c757d
activityBarBadge.background#d98c71
activityBarBadge.foreground#1c2025
breadcrumb.activeSelectionForeground#ced4da
breadcrumb.focusForeground#adb5bd
breadcrumb.foreground#6c757d
breadcrumbPicker.background#16191d
button.background#d98c71
button.foreground#1c2025
button.hoverBackground#eebcb0
charts.blue#7da3c4
charts.foreground#adb5bd
charts.green#8abf94
charts.lines#495057
charts.orange#ceb195
charts.purple#ceb195
charts.red#d98c71
charts.yellow#e0c068
debugIcon.breakpointForeground#d98c71
debugIcon.startForeground#8abf94
debugIcon.stopForeground#d98c71
debugToolBar.background#16191d
diffEditor.border#2b3036
diffEditor.insertedTextBackground#8abf9420
diffEditor.removedTextBackground#d98c7120
editor.background#1c2025
editor.foreground#ced4da
editor.lineHighlightBackground#23282e
editor.lineHighlightBorder#23282e00
editor.selectionBackground#d98c7160
editor.selectionHighlightBackground#d98c7130
editor.wordHighlightBackground#7da3c430
editor.wordHighlightStrongBackground#7da3c450
editorGroupHeader.tabsBackground#16191d
editorGroupHeader.tabsBorder#2b3036
editorGutter.background#1c2025
editorLineNumber.activeForeground#d98c71
editorLineNumber.foreground#495057
editorOverviewRuler.currentContentForeground#8abf94
editorOverviewRuler.incomingContentForeground#7da3c4
editorSuggestWidget.background#16191d
editorSuggestWidget.border#2b3036
editorSuggestWidget.highlightForeground#d98c71
editorSuggestWidget.selectedBackground#2b3036
editorWidget.background#16191d
editorWidget.border#2b3036
extensionButton.prominentBackground#d98c71
extensionButton.prominentForeground#1c2025
extensionButton.prominentHoverBackground#eebcb0
gitDecoration.conflictingResourceForeground#e0c068
gitDecoration.deletedResourceForeground#d98c71
gitDecoration.ignoredResourceForeground#495057
gitDecoration.modifiedResourceForeground#7da3c4
gitDecoration.untrackedResourceForeground#8abf94
input.background#23282e
input.border#2b3036
input.foreground#ced4da
input.placeholderForeground#6c757d
keybindingLabel.background#23282e
keybindingLabel.border#2b3036
keybindingLabel.bottomBorder#2b3036
keybindingLabel.foreground#adb5bd
list.activeSelectionBackground#2b3036
list.activeSelectionForeground#ced4da
list.focusBackground#2b3036
list.focusForeground#ced4da
list.highlightForeground#d98c71
list.hoverBackground#23282e
list.inactiveSelectionBackground#23282e
list.inactiveSelectionForeground#adb5bd
merge.commonContentBackground#49505720
merge.commonHeaderBackground#49505730
merge.currentContentBackground#8abf9420
merge.currentHeaderBackground#8abf9440
merge.incomingContentBackground#7da3c420
merge.incomingHeaderBackground#7da3c440
notificationCenter.border#2b3036
notificationCenterHeader.background#16191d
notificationCenterHeader.foreground#adb5bd
notificationLink.foreground#7da3c4
notifications.background#16191d
notifications.border#2b3036
notifications.foreground#adb5bd
notificationToast.border#2b3036
panel.background#16191d
panel.border#2b3036
panelTitle.activeForeground#ced4da
panelTitle.inactiveForeground#6c757d
peekView.border#d98c71
peekViewEditor.background#1c2025
peekViewEditor.matchHighlightBackground#d98c7140
peekViewResult.background#16191d
peekViewResult.matchHighlightBackground#d98c7140
peekViewTitle.background#16191d
scrollbarSlider.activeBackground#343a40C0
scrollbarSlider.background#343a4080
scrollbarSlider.hoverBackground#343a40A0
settings.checkboxBackground#16191d
settings.dropdownBackground#16191d
settings.headerForeground#d98c71
settings.modifiedItemIndicator#7da3c4
settings.numberInputBackground#16191d
settings.textInputBackground#16191d
sideBar.background#16191d
sideBar.border#2b3036
sideBar.foreground#adb5bd
statusBar.background#16191d
statusBar.border#2b3036
statusBar.debuggingBackground#d98c71
statusBar.foreground#adb5bd
statusBar.noFolderBackground#16191d
tab.activeBackground#1c2025
tab.activeBorder#d98c71
tab.activeForeground#ced4da
tab.inactiveBackground#16191d
tab.inactiveForeground#6c757d
tab.unfocusedActiveBorder#d98c7160
terminal.ansiBlack#16191d
terminal.ansiBlue#7da3c4
terminal.ansiBrightBlack#495057
terminal.ansiBrightBlue#9ec3e0
terminal.ansiBrightCyan#9ec3e0
terminal.ansiBrightGreen#a8d5b1
terminal.ansiBrightMagenta#e6ccb2
terminal.ansiBrightRed#eebcb0
terminal.ansiBrightWhite#ced4da
terminal.ansiBrightYellow#ead496
terminal.ansiCyan#7da3c4
terminal.ansiGreen#8abf94
terminal.ansiMagenta#ceb195
terminal.ansiRed#d98c71
terminal.ansiWhite#adb5bd
terminal.ansiYellow#e0c068
terminal.background#1c2025
terminal.foreground#ced4da
titleBar.activeBackground#16191d
titleBar.activeForeground#adb5bd
titleBar.border#2b3036
titleBar.inactiveBackground#16191d
titleBar.inactiveForeground#6c757d
welcomePage.buttonBackground#16191d
welcomePage.buttonHoverBackground#23282e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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