sangonomiya colors

Name: sangonomiya colors
Author: cprnn

Publisher: cprnnThemes in package: 1

The colors of one the most beautiful areas in Genshin Impact, Sangonomiya Shrine, made by @cprnn!

Open in VS Code GitHub

VS Code preview

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

sangonomiya colors — Sangonomiya Colors

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.background#212529
activityBar.border#21252960
activityBar.foreground#bf83ffe2
activityBarBadge.background#E7A7DE
activityBarBadge.foreground#212529
badge.background#21252930
badge.foreground#CB88BF
breadcrumb.activeSelectionForeground#CB88BF
breadcrumb.background#212529
breadcrumb.focusForeground#4D4D4D
breadcrumb.foreground#4890D8
breadcrumbPicker.background#212529
button.background#CB88BF50
contrastBorder#CB88BF40
debugToolBar.background#212329
diffEditor.insertedTextBackground#D384D815
diffEditor.removedTextBackground#C0D8FF20
dropdown.background#1a1c1e
dropdown.border#A57CD810
editor.background#212529
editor.findMatchBackground#212529
editor.findMatchBorder#CB88BF
editor.findMatchHighlightBackground#CB88BF93
editor.findMatchHighlightBorder#A57CD830
editor.foreground#d2fcff
editor.lineHighlightBackground#21252950
editor.selectionBackground#E7A7DE30
editor.selectionHighlightBackground#CB88BF6b
editor.selectionHighlightBorder#E7A7DEf0
editorBracketMatch.background#212529
editorBracketMatch.border#AC92FF7f
editorCursor.foreground#AC92FF
editorError.foreground#C0D8FF70
editorGroup.border#21252930
editorGroupHeader.tabsBackground#212529
editorGutter.addedBackground#D384D860
editorGutter.deletedBackground#C0D8FF60
editorGutter.modifiedBackground#E7A7DE60
editorHoverWidget.background#212529
editorHoverWidget.border#A57CD810
editorIndentGuide.activeBackground1#495057
editorIndentGuide.background1#49505770
editorInfo.foreground#E7A7DE70
editorLineNumber.activeForeground#E7A7DE
editorLineNumber.foreground#CB88BFc0
editorLink.activeForeground#4D4D4D
editorMarkerNavigation.background#4D4D4D05
editorOverviewRuler.border#212529
editorOverviewRuler.errorForeground#C0D8FF40
editorOverviewRuler.findMatchForeground#cb88bfa6
editorOverviewRuler.infoForeground#E7A7DE40
editorOverviewRuler.warningForeground#AC92FF70
editorRuler.foreground#cdcdcd
editorSuggestWidget.background#212529
editorSuggestWidget.border#A57CD810
editorSuggestWidget.foreground#4D4D4D
editorSuggestWidget.highlightForeground#AC92FF
editorSuggestWidget.selectedBackground#CB88BF20
editorWarning.foreground#D384D8
editorWhitespace.foreground#4D4D4D40
editorWidget.background#212529
editorWidget.border#AC92FF
editorWidget.resizeBorder#CB88BF
extensionButton.prominentBackground#D384D890
extensionButton.prominentHoverBackground#C0D8FF
focusBorder#A57CD800
gitDecoration.conflictingResourceForeground#AC92FF
gitDecoration.deletedResourceForeground#C0D8FF
gitDecoration.ignoredResourceForeground#CB88BF
gitDecoration.modifiedResourceForeground#4890D8
gitDecoration.untrackedResourceForeground#E7A7DE
input.background#343A40
input.border#A57CD810
input.foreground#cdcdcd
input.placeholderForeground#4D4D4D60
inputOption.activeBackground#4D4D4D30
inputOption.activeBorder#4D4D4D30
inputValidation.errorBorder#C0D8FF50
inputValidation.infoBorder#E7A7DE50
inputValidation.warningBorder#AC92FF50
list.activeSelectionBackground#212529
list.activeSelectionForeground#CB88BF
list.focusBackground#343A40
list.focusForeground#E7A7DE
list.highlightForeground#CB88BF
list.hoverBackground#495057
list.hoverForeground#A57CD8
list.inactiveSelectionBackground#21252930
list.inactiveSelectionForeground#CB88BF
list.warningForeground#AC92FF
listFilterWidget.background#21252930
listFilterWidget.noMatchesOutline#21252930
listFilterWidget.outline#21252930
menu.background#212529f8
menu.border#CB88BF50
menu.foreground#efefef
menu.selectionBackground#343A40
menu.selectionBorder#21252930
menu.selectionForeground#cdcdcd
menu.separatorBackground#2b2b2b
menubar.selectionBackground#343A40
menubar.selectionBorder#CB88BF50
menubar.selectionForeground#4D4D4D
minimap.background#212529
minimapGutter.addedBackground#C0D8FF
minimapGutter.deletedBackground#AC92FF
minimapGutter.modifiedBackground#D384D8
minimapSlider.activeBackground#D384D8b0
minimapSlider.background#D384D880
minimapSlider.hoverBackground#D384D8a0
notificationLink.foreground#CB88BF
notifications.background#3e3252
notifications.foreground#eac9f4
panel.background#212529
panel.border#21252960
panelTitle.activeBorder#CB88BF
panelTitle.activeForeground#A57CD8
panelTitle.inactiveForeground#4D4D4D
peekView.border#21252930
peekViewEditor.background#4D4D4D05
peekViewEditor.matchHighlightBackground#CB88BF50
peekViewEditorGutter.background#4D4D4D05
peekViewResult.background#4D4D4D05
peekViewResult.matchHighlightBackground#CB88BF50
peekViewResult.selectionBackground#CB88BF70
peekViewTitle.background#4D4D4D05
peekViewTitleDescription.foreground#b1b1b1c4
pickerGroup.foreground#CB88BF
progressBar.background#CB88BF
scrollbar.shadow#21252900
scrollbarSlider.activeBackground#CB88BFcc
scrollbarSlider.background#CB88BFbb
scrollbarSlider.hoverBackground#CB88BFee
selection.background#CB88BF
settings.checkboxBackground#212529
settings.checkboxForeground#4D4D4D
settings.dropdownBackground#212529
settings.dropdownForeground#cdcdcd
settings.headerForeground#CB88BF
settings.modifiedItemIndicator#CB88BF
settings.numberInputBackground#212529
settings.numberInputForeground#4D4D4D
settings.textInputBackground#212529
settings.textInputForeground#4D4D4D
sideBar.background#212529
sideBar.border#CB88BF50
sideBar.foreground#E7A7DE
sideBarSectionHeader.background#212529
sideBarSectionHeader.border#21252960
sideBarSectionHeader.foreground#E7A7DE
sideBarTitle.foreground#4D4D4D
statusBar.background#8AECF3
statusBar.border#21252960
statusBar.debuggingBackground#bdadf0
statusBar.debuggingForeground#420191
statusBar.foreground#883D79
statusBar.noFolderBackground#212529
statusBarItem.hoverBackground#CB88BF20
statusBarItem.remoteBackground#CB88BF
statusBarItem.remoteForeground#212529
tab.activeBackground#CB88BF50
tab.activeBorder#CB88BF
tab.activeForeground#f0f0f0
tab.activeModifiedBorder#CB88BF
tab.border#212529
tab.inactiveBackground#CB88BF20
tab.inactiveForeground#525252af
tab.unfocusedActiveBackground#CB88BF40
tab.unfocusedActiveBorder#CB88BF
tab.unfocusedActiveForeground#cdcdcd
tab.unfocusedInactiveBackground#CB88BF10
tab.unfocusedInactiveForeground#4D4D4D7f
terminal.ansiBlack#212529
terminal.ansiBlue#E7A7DE
terminal.ansiBrightBlack#CB88BF
terminal.ansiBrightBlue#E7A7DE
terminal.ansiBrightCyan#F4CDF7
terminal.ansiBrightGreen#D384D8
terminal.ansiBrightMagenta#AC92FF
terminal.ansiBrightRed#C0D8FF
terminal.ansiBrightWhite#A57CD8
terminal.ansiBrightYellow#AC92FF
terminal.ansiCyan#F4CDF7
terminal.ansiGreen#D384D8
terminal.ansiMagenta#AC92FF
terminal.ansiRed#C0D8FF
terminal.ansiWhite#A57CD8
terminal.ansiYellow#AC92FF
terminalCursor.background#212529
terminalCursor.foreground#AC92FF
textLink.activeForeground#4D4D4D
textLink.foreground#CB88BF
titleBar.activeBackground#212529
titleBar.activeForeground#cdcdcd
titleBar.border#3f3f3f
titleBar.inactiveBackground#212529
titleBar.inactiveForeground#CB88BF
tree.indentGuidesStroke#495057
widget.shadow#21252930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#AC92FF	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#D384D8	—
constant.other.php	#AC92FF	—
constant.other.color	#A57CD8	—
invalid, invalid.illegal	#C0D8FF	—
comment, comment.block.documentation	#676767	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#D384D8	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#4890D8	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#AC92FF	—
punctuation.definition, string.quoted.single.scss	#AC92FF	—
keyword.control	—	italic bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#767676	—
text.html.derivative	#AC92FF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#92d9ff	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#AC92FF	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#4890D8
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#E7A7DE	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#F4CDF7	—
support.other.variable, string.other.link, markup.table	#92d9ff	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#AC92FF	—
variable.parameter.function.language.special, variable.parameter	#C0D8FF	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#D384D8
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#92d9ff	—
support.type	#D384D8	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#4890D8	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#C0D8FF	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#E7A7DE	italic
entity.other.attribute-name, support.function	#AC92FF	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#D384D8	—
source.scss keyword.control	#AC92FF	—
markup.inserted	#D384D8	—
markup.deleted	#C0D8FF	—
markup.changed	#AC92FF	—
string.regexp	#F4CDF7	—
constant.character.escape	#F4CDF7	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#F4CDF7	italic
support.type.property-name.json	#F4CDF7	—
text.html.markdown, punctuation.definition.list_item.markdown	#F4CDF7	—
text.html.markdown markup.inline.raw.markdown	#AC92FF	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#CB88BF50	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#4890D8	bold
markup.underline	#E7A7DE	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#CB88BF50	—
markup.quote	—	italic
string.other.link.description.title.markdown	#AC92FF	—
constant.other.reference.link.markdown	#AC92FF	—
markup.raw.block	#AC92FF	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#F4CDF7	—
variable.language.fenced.markdown	#CB88BF	—
meta.separator	#AC92FF	bold
token.info-token	#CB88BF	—
token.warn-token	#AC92FF	—
token.error-token	#FF293B	—
token.debug-token	#F4CDF7	—

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