Sakura Japan Cherry Blossom Theme 🌸

Name: Sakura Japan Cherry Blossom Theme 🌸
Author: Lakshit Somani

Publisher: Lakshit SomaniThemes in package: 1

A beautiful soft cherry-blossom syntax theme 🌸

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Sakura Japan Cherry Blossom Theme 🌸 — Sakura Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#fdf7f7
activityBar.border#eae1e1
activityBar.foreground#c55ea5
activityBar.inactiveForeground#c5a0ba
activityBarBadge.background#c55ea5
activityBarBadge.foreground#fefefe
breadcrumb.activeSelectionForeground#8e9a89
breadcrumb.background#fdf7f7
breadcrumb.focusForeground#a9b5a4
breadcrumb.foreground#779182
breadcrumbPicker.background#fefefe
diffEditor.diagonalFill#efc7c7
diffEditor.insertedTextBackground#bbe2bb60
diffEditor.removedTextBackground#efe2ba60
editor.background#fefcfc
editor.findMatchBackground#bd1d54
editor.findMatchHighlightBackground#fbeef3
editor.foreground#29000d
editor.hoverHighlightBackground#f1ebef
editor.inactiveSelectionBackground#e7cfdf80
editor.lineHighlightBackground#f1ebef
editor.selectionBackground#e7cfdf
editor.selectionHighlightBackground#f1ebef
editor.wordHighlightBackground#edceda
editor.wordHighlightStrongBackground#dfe8d0
editorBracketMatch.background#ffa381
editorBracketMatch.border#c5795e
editorCursor.foreground#c55ea5
editorError.foreground#d56666
editorGroupHeader.tabsBackground#fdf7f7
editorGutter.addedBackground#bbe2bb
editorGutter.background#fdf7f7
editorGutter.deletedBackground#efe2ba
editorGutter.modifiedBackground#a3daec
editorHint.foreground#7f8d78
editorIndentGuide.activeBackground1#c5795e
editorIndentGuide.background1#f1edef
editorInfo.foreground#e4cc83
editorInlayHint.background#f1edef80
editorInlayHint.foreground#545454
editorInlayHint.parameterBackground#f1edef80
editorInlayHint.parameterForeground#545454
editorInlayHint.typeBackground#f1edef80
editorInlayHint.typeForeground#545454
editorLineNumber.activeForeground#d052ab
editorLineNumber.foreground#c5a0ba
editorLink.activeForeground#a45176
editorOverviewRuler.border#f1edef
editorOverviewRuler.errorForeground#d56666
editorOverviewRuler.infoForeground#e4cc83
editorOverviewRuler.warningForeground#d6b140
editorWarning.foreground#d6b140
editorWhitespace.foreground#7a6f7560
editorWidget.background#fefefe
editorWidget.border#f1edef
focusBorder#c55ea5
list.activeSelectionBackground#e7cfdf
list.activeSelectionForeground#29000d
list.highlightForeground#c55ea5
list.hoverBackground#fdf7f7
list.hoverForeground#29000d
list.inactiveSelectionBackground#f1ebef
list.inactiveSelectionForeground#29000d
listFilterWidget.background#fefefe
listFilterWidget.noMatchesOutline#d56666
listFilterWidget.outline#c55ea5
minimap.errorHighlight#d56666
minimap.findMatchHighlight#fbeef3
minimap.selectionHighlight#e7cfdf
minimap.warningHighlight#d6b140
notification.background#fffeff
notification.foreground#29000d
panel.background#fefcfc
panel.border#f1edef
panelTitle.activeBorder#c55ea5
panelTitle.activeForeground#29000d
panelTitle.inactiveForeground#7a6f75
peekView.border#c55ea5
peekViewEditor.background#fdf7f7
peekViewResult.background#fefefe
peekViewResult.matchHighlightBackground#fbeef3
peekViewResult.selectionBackground#e7cfdf
peekViewResult.selectionForeground#29000d
peekViewTitle.background#f1ebef
peekViewTitleDescription.foreground#7a6f75
peekViewTitleLabel.foreground#29000d
pickerGroup.border#f1edef
pickerGroup.foreground#c55ea5
scrollbarSlider.activeBackground#c5a0bab3
scrollbarSlider.background#dcd9c180
scrollbarSlider.hoverBackground#dcd2a9b3
sideBar.background#fdf7f7
sideBar.border#f1edef
sideBar.foreground#7a6f75
sideBarSectionHeader.background#f1ebef
sideBarSectionHeader.foreground#29000d
sideBarTitle.foreground#29000d
statusBar.background#f1ebef
statusBar.border#f1edef
statusBar.debuggingBackground#c55ea5
statusBar.debuggingForeground#fefefe
statusBar.foreground#29000d
statusBar.noFolderBackground#f1ebef
statusBarItem.hoverBackground#e7cfdf
tab.activeBackground#fff4f4
tab.activeBorder#ffc9c9
tab.border#ffc9c9
tab.inactiveBackground#eae1e1
terminal.ansiBlack#251b13
terminal.ansiBlue#607fa9
terminal.ansiBrightBlack#687788
terminal.ansiBrightBlue#6981bd
terminal.ansiBrightCyan#6cc4e2
terminal.ansiBrightGreen#3a8e74
terminal.ansiBrightMagenta#c55ea5
terminal.ansiBrightRed#c02b2b
terminal.ansiBrightWhite#b46e8d
terminal.ansiBrightYellow#caa83f
terminal.ansiCyan#69a2bd
terminal.ansiGreen#618c71
terminal.ansiMagenta#98556c
terminal.ansiRed#d56666
terminal.ansiWhite#7a6f75
terminal.ansiYellow#d6b140
terminal.background#fefcfc
terminal.foreground#29000d
titleBar.activeBackground#fdf7f7
titleBar.activeForeground#29000d
titleBar.inactiveBackground#fdf7f7
titleBar.inactiveForeground#7a6f75
widget.shadow#29000d20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f8d78	italic
keyword, storage, storage.modifier, storage.type	#98556c	bold
string, punctuation.definition.string, string.quoted	#875a9d	—
constant.numeric	#875a9d	—
constant.language.boolean, constant.language.null, constant.language, support.constant	#875a9d	bold
variable, variable.other, variable.language	#251b13	—
variable.other.local, variable.other.readwrite.local	#618c71	—
variable.other.global, variable.other.readwrite.global	#687788	—
variable.parameter	#cb6b91	—
variable.other.property, support.variable.property	#607fa9	—
variable.other.property.static, entity.name.variable.static	#69a2bd	—
entity.name.function, support.function, meta.function-call	#607fa9	—
entity.name.function.static	#69a2bd	—
entity.name.type, entity.name.class, support.type, support.class	#251b13	bold
entity.name.type.annotation, meta.decorator, punctuation.definition.annotation	#b46e8d	—
keyword.operator, punctuation, meta.brace, meta.delimiter	#7a6f75	—
entity.name.tag, meta.tag.sgml	#b46e8d	bold
entity.other.attribute-name	#3a8e74	—
keyword.other.documentation, comment.block.documentation keyword, storage.type.class.jsdoc	#7f8d78	bold underline
comment.block.documentation variable, comment.block.documentation type	#7f8d78	bold italic
invalid, invalid.illegal	#d56666	underline
invalid.deprecated	#caa83f	strikethrough
markup.heading, markup.heading entity.name	#98556c	bold
keyword.todo, markup.todo	#708d63	bold italic
keyword.control.custom2	#74118c	—
keyword.control.custom3	#008080	—
keyword.control.custom4	#800000	—
entity.name.function.go	#286d73	—
meta.function-call.go	#36666b	—
constant.other.go	#871094	—
entity.name.package.go	#805900	—
keyword.other.xpath	#174ad4	—
entity.name.alias.yaml	#0000e6	—

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