Sakura Night Saturated Theme

Name: Sakura Night Saturated Theme
Author: atimael

Publisher: atimaelThemes in package: 1

Open in VS Code GitHub

VS Code preview

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

Sakura Night Saturated Theme — Sakura Night Saturated Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#25292a
activityBar.activeBorder#ff7aad
activityBar.activeFocusBorder#ff7aad
activityBar.background#1c2021
activityBar.border#2e3233
activityBar.dropBorder#ff7aad
activityBar.foreground#d9d9d9
activityBar.inactiveForeground#7a7c7d
activityBarBadge.background#ff7aad
activityBarBadge.foreground#fcfcfc
banner.background#8d4d67
banner.foreground#fcfcfc
banner.iconForeground#fcfcfc
breadcrumb.activeSelectionForeground#d9d9d9
breadcrumb.background#1c2021
breadcrumb.focusForeground#d9d9d9
breadcrumb.foreground#7a7c7d
breadcrumbPicker.background#232729
button.background#ff7aad
button.foreground#fcfcfc
button.hoverBackground#ff94bd
button.secondaryBackground#8d4d67
button.secondaryForeground#fcfcfc
button.secondaryHoverBackground#b36685
checkbox.background#232729
checkbox.border#2e3233
checkbox.foreground#d9d9d9
debugToolBar.background#232729
debugToolBar.border#2e3233
diffEditor.diagonalFill#2e3233
diffEditor.insertedLineBackground#3e4e31
diffEditor.insertedTextBackground#3e4e3140
diffEditor.removedLineBackground#513637
diffEditor.removedTextBackground#51363740
dropdown.background#232729
dropdown.border#2e3233
dropdown.foreground#d9d9d9
dropdown.listBackground#232729
editor.background#1c2021
editor.currentFindMatchBackground#447588
editor.findMatchBackground#304a54
editor.findMatchHighlightBackground#304a5460
editor.focusedStackFrameHighlightBackground#543644
editor.foreground#d9d9d9
editor.hoverHighlightBackground#2e3233
editor.inactiveSelectionBackground#54364440
editor.lineHighlightBackground#282d2f
editor.linkedEditingBackground#543644
editor.rangeHighlightBackground#2e323330
editor.selectionBackground#543644
editor.stackFrameHighlightBackground#32292f
editor.symbolHighlightBackground#2e323330
editor.wordHighlightBackground#2e3233
editor.wordHighlightStrongBackground#543644
editorBracketMatch.background#543644
editorBracketMatch.border#ff7aad
editorCursor.background#1c2021
editorCursor.foreground#ff7aad
editorError.border#f27979
editorError.foreground#f27979
editorGroup.border#2e3233
editorGroup.dropBackground#54364460
editorGroupHeader.border#2e3233
editorGroupHeader.noTabsBackground#1c2021
editorGroupHeader.tabsBackground#1c2021
editorGroupHeader.tabsBorder#2e3233
editorGutter.addedBackground#a4d964
editorGutter.background#1d2123
editorGutter.deletedBackground#f27979
editorGutter.foldingControlForeground#a9aaab
editorGutter.modifiedBackground#6ccaf0
editorHint.border#a9aaab
editorHint.foreground#a9aaab
editorHoverWidget.background#232729
editorHoverWidget.border#2e3233
editorHoverWidget.foreground#d9d9d9
editorIndentGuide.activeBackground#543644
editorIndentGuide.background#2e3233
editorInfo.border#6ccaf0
editorInfo.foreground#6ccaf0
editorLineNumber.activeForeground#ff7aad
editorLineNumber.foreground#d9d9d9
editorOverviewRuler.commonContentForeground#877a43
editorOverviewRuler.currentContentForeground#607c42
editorOverviewRuler.incomingContentForeground#447588
editorRuler.foreground#2e3233
editorSuggestWidget.background#232729
editorSuggestWidget.border#2e3233
editorSuggestWidget.foreground#d9d9d9
editorSuggestWidget.highlightForeground#ff7aad
editorSuggestWidget.selectedBackground#543644
editorWarning.border#f2d466
editorWarning.foreground#f2d466
editorWhitespace.foreground#6b6e6f
editorWidget.background#232729
editorWidget.border#2e3233
editorWidget.foreground#d9d9d9
extensionButton.prominentBackground#ff7aad
extensionButton.prominentForeground#fcfcfc
extensionButton.prominentHoverBackground#ff94bd
gitDecoration.addedResourceForeground#a4d964
gitDecoration.conflictingResourceForeground#f29655
gitDecoration.deletedResourceForeground#f27979
gitDecoration.ignoredResourceForeground#7a7c7d
gitDecoration.modifiedResourceForeground#6ccaf0
gitDecoration.renamedResourceForeground#be8df2
gitDecoration.stageDeletedResourceForeground#f27979
gitDecoration.stageModifiedResourceForeground#6ccaf0
gitDecoration.submoduleResourceForeground#be8df2
gitDecoration.untrackedResourceForeground#f29655
input.background#232729
input.border#2e3233
input.foreground#d9d9d9
input.placeholderForeground#7a7c7d
inputOption.activeBackground#ff7aad
inputOption.activeForeground#fcfcfc
inputValidation.errorBackground#513637
inputValidation.errorBorder#f27979
inputValidation.errorForeground#f27979
inputValidation.infoBackground#304a54
inputValidation.infoBorder#6ccaf0
inputValidation.infoForeground#6ccaf0
inputValidation.warningBackground#514d32
inputValidation.warningBorder#f2d466
inputValidation.warningForeground#f2d466
keybindingLabel.background#232729
keybindingLabel.border#2e3233
keybindingLabel.bottomBorder#2e3233
keybindingLabel.foreground#d9d9d9
list.activeSelectionBackground#543644
list.activeSelectionForeground#d9d9d9
list.dropBackground#543644
list.errorForeground#f27979
list.focusBackground#543644
list.focusForeground#d9d9d9
list.highlightForeground#ff7aad
list.hoverBackground#25292a
list.hoverForeground#d9d9d9
list.inactiveFocusBackground#54364460
list.inactiveSelectionBackground#54364460
list.inactiveSelectionForeground#d9d9d9
list.invalidItemForeground#f27979
list.warningForeground#f2d466
menu.background#232729
menu.border#2e3233
menu.foreground#d9d9d9
menu.selectionBackground#543644
menu.selectionBorder#ff7aad
menu.selectionForeground#d9d9d9
menu.separatorBackground#2e3233
menubar.selectionBackground#25292a
menubar.selectionBorder#ff7aad
menubar.selectionForeground#d9d9d9
merge.border#2e3233
merge.commonContentBackground#514d32
merge.commonHeaderBackground#514d32
merge.currentContentBackground#3e4e3140
merge.currentHeaderBackground#3e4e31
merge.incomingContentBackground#304a5440
merge.incomingHeaderBackground#304a54
notificationCenter.border#2e3233
notificationCenterHeader.background#232729
notificationCenterHeader.foreground#d9d9d9
notificationLink.foreground#6ccaf0
notifications.background#8d4d67
notifications.border#2e3233
notifications.foreground#d9d9d9
notificationToast.border#2e3233
panel.background#1c2021
panel.border#2e3233
panel.dropBorder#ff7aad
panelInput.border#2e3233
panelTitle.activeBorder#ff7aad
panelTitle.activeForeground#d9d9d9
panelTitle.inactiveForeground#7a7c7d
peekView.border#ff7aad
peekViewEditor.background#232729
peekViewEditor.matchHighlightBackground#304a54
peekViewResult.background#1c2021
peekViewResult.fileForeground#d9d9d9
peekViewResult.lineForeground#a9aaab
peekViewResult.matchHighlightBackground#304a54
peekViewResult.selectionBackground#543644
peekViewResult.selectionForeground#d9d9d9
peekViewTitle.background#8d4d67
peekViewTitleDescription.foreground#a9aaab
peekViewTitleLabel.foreground#d9d9d9
problemsErrorIcon.foreground#f27979
problemsInfoIcon.foreground#6ccaf0
problemsWarningIcon.foreground#f2d466
progressBar.background#ff7aad
quickInput.background#232729
quickInput.foreground#d9d9d9
quickInputTitle.background#2e3233
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#91506b
scrollbarSlider.background#5a3b4a
scrollbarSlider.hoverBackground#91506b
settings.checkboxBackground#232729
settings.checkboxBorder#2e3233
settings.checkboxForeground#d9d9d9
settings.dropdownBackground#232729
settings.dropdownBorder#2e3233
settings.dropdownForeground#d9d9d9
settings.dropdownListBorder#2e3233
settings.headerForeground#d9d9d9
settings.modifiedItemIndicator#ff7aad
settings.numberInputBackground#232729
settings.numberInputBorder#2e3233
settings.numberInputForeground#d9d9d9
settings.textInputBackground#232729
settings.textInputBorder#2e3233
settings.textInputForeground#d9d9d9
sideBar.background#1c2021
sideBar.border#2e3233
sideBar.foreground#d9d9d9
sideBarSectionHeader.background#25292a
sideBarSectionHeader.border#2e3233
sideBarSectionHeader.foreground#d9d9d9
sideBarTitle.foreground#d9d9d9
statusBar.background#1c2021
statusBar.border#2e3233
statusBar.debuggingBackground#8d4d67
statusBar.debuggingForeground#fcfcfc
statusBar.foreground#d9d9d9
statusBar.noFolderBackground#8d4d67
statusBar.noFolderForeground#fcfcfc
statusBarItem.activeBackground#25292a
statusBarItem.hoverBackground#25292a
statusBarItem.prominentBackground#8d4d67
statusBarItem.prominentForeground#d9d9d9
statusBarItem.prominentHoverBackground#b36685
statusBarItem.remoteBackground#ff7aad
statusBarItem.remoteForeground#fcfcfc
tab.activeBackground#1c2021
tab.activeBorder#ff7aad
tab.activeForeground#d9d9d9
tab.activeModifiedBorder#ff7aad
tab.border#626566
tab.hoverBackground#25292a
tab.hoverBorder#ff7aad
tab.hoverForeground#d9d9d9
tab.inactiveBackground#1c2021
tab.inactiveForeground#7a7c7d
tab.inactiveModifiedBorder#7a7c7d
tab.unfocusedActiveBorder#7a7c7d
tab.unfocusedActiveForeground#a9aaab
tab.unfocusedActiveModifiedBorder#7a7c7d
tab.unfocusedInactiveForeground#7a7c7d
tab.unfocusedInactiveModifiedBorder#7a7c7d
terminal.ansiBlack#1c2021
terminal.ansiBlue#6ccaf0
terminal.ansiBrightBlue#77d7ff
terminal.ansiBrightCyan#7cffe7
terminal.ansiBrightGreen#b2ef68
terminal.ansiBrightMagenta#ff94bd
terminal.ansiBrightRed#ff8686
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#ffe173
terminal.ansiCyan#6ff2da
terminal.ansiGreen#a4d964
terminal.ansiMagenta#ff7aad
terminal.ansiRed#f27979
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#f2d466
terminal.background#1c2021
terminal.foreground#d9d9d9
terminal.selectionBackground#543644
terminalCursor.background#1c2021
terminalCursor.foreground#ff7aad
titleBar.activeBackground#1c2021
titleBar.activeForeground#d9d9d9
titleBar.border#2e3233
titleBar.inactiveBackground#1c2021
titleBar.inactiveForeground#7a7c7d
tree.indentGuidesStroke#2e3233
walkThrough.embeddedEditorBackground#232729
welcomePage.background#1c2021
welcomePage.buttonBackground#232729
welcomePage.buttonHoverBackground#25292a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.line, comment.block	#a9aaab	italic
comment.block.documentation, comment.line.documentation	#a4d964	italic
keyword, storage.type, storage.modifier	#ff7aad	—
keyword.control.export, keyword.control.import, keyword.control.return, keyword.control.function, storage.type.function, keyword.control.default	#ff7aad	—
storage.type.const, storage.modifier.const, keyword.other.const, keyword.control.const, storage.type.const.js, storage.type.const.ts, storage.type.const.tsx	#ff7aad	—
keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#ff7aad	—
string, string.quoted, string.template	#a4d964	—
constant.character.escape, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#f29655	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.other.constant, variable.other.enummember, variable.language	#be8df2	—
constant.language, support.constant, variable.language, support.class.builtin, support.type.object.module, support.class.console, variable.language.this, variable.language.super, support.class.built-in, variable.other.object	#ff7aad	—
variable, meta.definition.variable.name, support.variable, entity.name.variable	#d9d9d9	—
variable.other.local, variable.other.readwrite.local, meta.block variable.other.readwrite	#d9d9d9	—
variable.parameter, meta.function.parameters variable, meta.parameters variable, variable.parameter.function	#d9d9d9	—
variable.other.property, variable.other.object.property, variable.object.property, variable.other.member, variable.other.readwrite.member, meta.object-literal.key	#be8df2	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#6ccaf0	—
entity.name.function, meta.function.definition	#6ccaf0	—
entity.name.class, entity.name.type.class, meta.class, entity.name.type, entity.other.inherited-class, support.class	#f2d466	bold
entity.name.class	#f2d466	bold
entity.other.inherited-class	#f2d466	—
entity.name.type.interface	#f2d466	—
keyword.type, storage.type.type	#ff7aad	—
entity.name.type, storage.type.class, storage.type.interface, storage.type.enum, support.type	#f2d466	—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#f2d466	—
entity.other.attribute-value, string.quoted.double.html, string.quoted.single.html	#6ccaf0	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#ff7aad	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#a9aaab	—
entity.other.attribute-name.class	#f2d466	—
source.sass keyword.control	#6ccaf0	—
support.type.property-name	#d9d9d9	—
meta.property-value, support.constant.property-value, constant.other.color.rgb-value.hex.css	#f29655	—
keyword.other.unit	#a9aaab	—
support.type.property-name.json	#ff7aad	—
meta.structure.dictionary.json string.quoted.double.json	#6ccaf0	—
text.html.markdown, punctuation.definition.list_item.markdown	#d9d9d9	—
text.html.markdown markup.inline.raw.markdown	#a4d964	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#f29655	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#ff7aad	—
markup.italic	#ff7aad	italic
markup.bold, markup.bold string	#ff7aad	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	—	bold italic
markup.underline	#f29655	underline
markup.strike	—	strikethrough
markup.quote	#a9aaab	italic
markup.raw.block	#a4d964	—
markup.table	#d9d9d9	—
keyword.operator	#a9aaab	—
punctuation.separator, punctuation.terminator	#a9aaab	—
punctuation.section.embedded	#a9aaab	—
entity.name	#f29655	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#f2d466	bold
invalid, invalid.illegal	#f27979	—
invalid.deprecated	#a9aaab	—
meta.diff, meta.diff.header	#c594c5	—
markup.deleted	#f27979	—
markup.inserted	#a4d964	—
markup.changed	#f2d466	—
variable.other.readwrite.importEquals, meta.import variable.other.readwrite, meta.export variable.other.readwrite, variable.other.readwrite.alias	#d9d9d9	—
variable.other.constant.tsx, variable.other.constant.jsx, variable.other.constant.ts, variable.other.constant.js, meta.var.expr variable.other.constant.tsx, meta.var.expr variable.other.constant.jsx, meta.var.expr variable.other.constant.ts, meta.var.expr variable.other.constant.js, variable.other.readwrite.tsx, variable.other.readwrite.ts	#6ccaf0	—
entity.name.tag.open.jsx, entity.name.tag.close.jsx, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.open.tsx, entity.name.tag.close.tsx, support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.ts.tsx	#ff7aad	—

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