Salt Water Taffy

Name: Salt Water Taffy
Author: Finn James

Publisher: Finn JamesThemes in package: 1

Seaside colors with a pastel finish

Open in VS Code GitHub

VS Code preview

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

Salt Water Taffy — Salt Water Taffy

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.activeBorder#17242b00
activityBar.background#17242b
activityBar.border#243942
activityBar.foreground#92ABD6
activityBar.inactiveForeground#43565e
activityBarBadge.background#A9DECA
activityBarBadge.foreground#243942
badge.background#C28C95
badge.foreground#243942
button.background#62BACC
button.foreground#17242b
button.hoverBackground#62BACCbb
debugExceptionWidget.background#243942
debugExceptionWidget.border#243942
debugToolBar.background#243942
debugToolBar.border#A9E0EB
diffEditor.insertedTextBackground#95E6CB44
diffEditor.removedTextBackground#C97DAC44
dropdown.background#17242b
dropdown.border#39434D
dropdown.foreground#CBD6C9
dropdown.listBackground#243942
editor.background#17242b
editor.findMatchBackground#A9E0EB33
editor.findMatchHighlightBackground#A9E0EB33
editor.findRangeHighlightBackground#A9E0EB33
editor.foreground#CBD6C9
editor.lineHighlightBackground#243942
editor.rangeHighlightBackground#243942
editor.selectionBackground#243942
editor.wordHighlightBackground#A9E0EB33
editor.wordHighlightStrongBackground#A9E0EB33
editorBracketMatch.border#243942
editorCursor.background#243942
editorCursor.foreground#A9E0EB
editorError.foreground#BD4F7B
editorGroup.border#243942
editorGroup.emptyBackground#17242b
editorGroupHeader.noTabsBackground#243942
editorGroupHeader.tabsBackground#17242b
editorGroupHeader.tabsBorder#243942
editorGutter.addedBackground#7BC7AB
editorGutter.deletedBackground#BD4F7B
editorGutter.modifiedBackground#7BC7AB
editorHoverWidget.background#243942
editorHoverWidget.border#243942
editorIndentGuide.background#243942
editorLightBulb.foreground#EBAEB8
editorLineNumber.activeForeground#39434D
editorLineNumber.foreground#39434D
editorLink.activeForeground#92ABD6
editorMarkerNavigation.background#243942
editorOverviewRuler.addedForeground#A9E0EB
editorOverviewRuler.border#243942
editorOverviewRuler.deletedForeground#C97DACAA
editorOverviewRuler.errorForeground#BD4F7B
editorOverviewRuler.findMatchForeground#7BC7AB
editorOverviewRuler.modifiedForeground#7BC7ABAA
editorOverviewRuler.warningForeground#92ABD6
editorRuler.foreground#243942
editorSuggestWidget.background#243942
editorSuggestWidget.border#43565e
editorSuggestWidget.foreground#CBD6C9
editorSuggestWidget.highlightForeground#B9D1FA
editorSuggestWidget.selectedBackground#4D5557
editorWarning.foreground#92ABD6
editorWhitespace.foreground#39434D
editorWidget.background#243942
editorWidget.border#A9E0EB
errorForeground#BD4F7B
extensionButton.prominentBackground#92ABD6AA
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#92ABD6BB
focusBorder#546B75
foreground#CBD6C9
gitDecoration.conflictingResourceForeground#C97DACc0
gitDecoration.deletedResourceForeground#C97DACc0
gitDecoration.ignoredResourceForeground#43565e
gitDecoration.modifiedResourceForeground#62BACCc0
gitDecoration.untrackedResourceForeground#759596b0
input.background#243942
input.border#546B75
input.foreground#CBD6C9
input.placeholderForeground#546B75
inputOption.activeBorder#546B75
inputValidation.errorBackground#232323
inputValidation.errorBorder#BD4F7B
inputValidation.infoBackground#232323
inputValidation.infoBorder#A9E0EB
inputValidation.warningBackground#232323
inputValidation.warningBorder#EBAEB8
list.activeSelectionBackground#243942
list.activeSelectionForeground#CBD6C9
list.errorForeground#BD4F7B
list.focusBackground#43565e
list.focusForeground#CBD6C9
list.highlightForeground#92ABD6
list.hoverBackground#243942
list.hoverForeground#CBD6C9
list.inactiveSelectionBackground#243942
list.inactiveSelectionForeground#CBD6C9
list.warningForeground#C97DAC
listFilterWidget.background#17242b
listFilterWidget.noMatchesOutline#BD4F7B
listFilterWidget.outline#A9E0EB
minimap.errorHighlight#BD4F7B
minimap.selectionHighlight#62BACC87
notificationCenter.border#243942
notificationCenterHeader.background#17242b
notificationCenterHeader.foreground#A9E0EB
notificationLink.foreground#C28C95
notifications.background#243942
notifications.foreground#FFFFFF
notificationToast.border#17242b
panel.background#17242b
panel.border#243942
panelTitle.activeBorder#17242b
panelTitle.activeForeground#A9E0EB
panelTitle.inactiveForeground#43565e
peekView.border#243942
peekViewEditor.background#243942
peekViewEditor.matchHighlightBackground#92ABD633
peekViewResult.background#243942
peekViewResult.fileForeground#43565e
peekViewResult.matchHighlightBackground#92ABD633
peekViewTitle.background#243942
peekViewTitleDescription.foreground#43565e
peekViewTitleLabel.foreground#43565e
pickerGroup.border#243942
pickerGroup.foreground#92ABD6
progressBar.background#A9E0EB
scrollbar.shadow#17242b00
scrollbarSlider.activeBackground#FFFFFF22
scrollbarSlider.background#FFFFFF11
scrollbarSlider.hoverBackground#FFFFFF22
selection.background#243942FF
sideBar.background#17242b
sideBar.border#243942
sideBar.foreground#759596
sideBarSectionHeader.background#17242b
sideBarSectionHeader.foreground#A9E0EB
sideBarTitle.foreground#A9E0EB99
statusBar.background#17242b
statusBar.border#243942
statusBar.debuggingBackground#A9E0EB
statusBar.debuggingForeground#17242b
statusBar.foreground#759596
statusBar.noFolderBackground#243942
tab.activeBackground#17242b
tab.activeForeground#A9E0EB
tab.inactiveBackground#17242b
tab.inactiveForeground#759596
tab.unfocusedActiveForeground#CBD6C9AA
tab.unfocusedInactiveForeground#43565e
terminal.ansiBlue#92ABD6
terminal.ansiBrightBlack#43565e
terminal.ansiBrightBlue#B9D1FA
terminal.ansiBrightCyan#A9E0EB
terminal.ansiBrightGreen#A9DECA
terminal.ansiBrightMagenta#CBB6E3
terminal.ansiBrightRed#DBA7CD
terminal.ansiBrightWhite#F6FFF5
terminal.ansiBrightYellow#EBAEB8
terminal.ansiCyan#62BACC
terminal.ansiGreen#7BC7AB
terminal.ansiMagenta#A189BD
terminal.ansiRed#C97DAC
terminal.ansiWhite#CBD6C9
terminal.ansiYellow#C28C95
terminal.background#17242b
terminal.border#243942
terminal.foreground#CBD6C9
terminalCursor.background#17242b
terminalCursor.foreground#A9E0EB
textBlockQuote.background#243942
textLink.activeForeground#92ABD6
textLink.foreground#92ABD6
textPreformat.foreground#CBD6C9
titleBar.activeBackground#17242b
titleBar.activeForeground#43565e
titleBar.border#243942
titleBar.inactiveBackground#17242b
titleBar.inactiveForeground#43565e
walkThrough.embeddedEditorBackground#243942
widget.shadow#17242bB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#43565e	italic
meta.type.flowtype variable.other.flowtype, variable.other.property, variable.other.object, variable.other.readwrite, meta.template.expression, entity.name.type.module, punctuation.definition.entity, variable.parameter	#d4d4d4	—
variable.language.this, variable.language.super	#d4d4d4	—
entity.name.tag.reference, entity.name.tag.css, entity.name.tag.scss	#DBA7CD	—
keyword, storage.type, storage.type.function, variable.other.flowtype, storage.type.extends, storage.type.function, storage.type.class, keyword.operator.module	#759596	—
entity.name.type	#92ABD6	underline
entity.name.type.module	—
storage.modifier	#759596	—
entity.name.tag	#759596	—
meta.decorator, meta.decorator.tsx variable.other.readwrite.tsx, meta.decorator.tsx variable.other.object.tsx, meta.decorator.tsx variable.other.property.tsx, meta.decorator.jsx variable.other.readwrite.jsx, meta.decorator.jsx variable.other.object.jsx, meta.decorator.jsx variable.other.property.jsx	#759596	—
support.class.component	#EBAEB8	—
variable.function, source meta.function-call entity.name.function, meta.class meta.group.braces.curly meta.function-call variable.function, meta.class meta.field.declaration meta.function-call entity.name.function, variable.function.constructor, meta.block meta.var.expr meta.function-call entity.name.function, support.function.console, meta.function-call support.function, meta.property.class variable.other.class, punctuation.definition.entity.css, meta.function-call.python	#EBAEB8	—
entity.name.function, meta.class entity.name.class, meta.class entity.name.type.class, meta.class meta.function-call variable.function, source keyword.control.loop, storage.type.function.arrow, keyword.other.important	#DBA7CD	—
entity.name.type.class, entity.name.type.js	—	bold
keyword.control.flow	#C97DAC	—
support.type.primitive	#92ABD6	italic
support.type.property-name	#d4d4d4	—
keyword.control.trycatch, source meta.group.braces.curly keyword.control.loop, keyword.control.switch	#759596	—
punctuation.terminator, punctuation.definition, punctuation.support, punctuation.separator.dictionary, punctuation.separator.array, meta.brace.round, punctuation.section.embedded, punctuation.accessor, meta.delimiter.comma, keyword.operator.ternary, punctuation.section.property-list, punctuation.section.function, punctuation.separator.comma, meta.function-call.without-arguments, constant.character.entity, entity.other.attribute-name.pseudo-class, meta.brace.curly, meta.brace.square, punctuation.separator.parameter, punctuation.operation.graphql	#759596	—
keyword.other.substitution, punctuation.definition.interpolation, punctuation.definition.template-expression	#759596	—
punctuation.separator.key-value, keyword.operator.type	#759596	—
keyword.operator.optional	#EBAEB8	—
keyword.operator.assignment	#C28C95	—
keyword.operator.logical	#EBAEB8	—
keyword.operator.comparison, keyword.operator.relational	#DBA7CD	—
string.quoted, string.interpolated, support.constant.property-value, keyword.other.unit, string.template, punctuation.definition.string	#7BC7AB	—
keyword.other.unit	#92ABD6	—
constant.language, constant.numeric, support.constant, constant.character, constant.other.color, constant.other.symbol, constant.other.key	#92ABD6	—
markup.inserted	#99C794	—
markup.deleted	#BD4F7B	—
markup.changed	#BB80B3	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#C97DAC	—
entity.name.filename.find-in-files	#99C794	—
token.info-token	#7BC7AB	—
token.warn-token	#EBAEB8	—
token.error-token	#DBA7CD	—
token.debug-token	#92ABD6	—
source entity.other.attribute-name	#A9DECA	italic
source meta.tag.attributes entity.other.attribute-name, meta.jsx.js entity.other.attribute-name.jsx	#d4d4d4	italic
text.html.basic entity.other.attribute-name.html	—	italic
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.block.any.html	#43565e	—
variable.language.this.js, variable.language.special.self.python	#A9E0EB	—
entity.other.attribute-name.html	#92ABD6	—

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