Seabrook

Name: Seabrook
Author: sortbyfirstname

Publisher: sortbyfirstnameThemes in package: 2

An aesthetically pleasing theme for Visual Studio Code.

GitHub

Color themes

VS Code preview

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

Seabrook — Seabrook Light

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#DEE2E6
activityBar.border#343A40
activityBar.foreground#212529
activityBarBadge.background#212529
activityBarBadge.foreground#DEE2E6
badge.background#212529
badge.foreground#DEE2E6
button.background#CED4DA
button.foreground#212529
button.hoverBackground#DEE2E6
button.secondaryBackground#ADB5BD
button.secondaryForeground#212529
button.secondaryHoverBackground#DEE2E6
debugExceptionWidget.background#E49A2B60
debugExceptionWidget.border#E49A2B60
debugToolBar.background#DEE2E6
debugToolBar.border#CED4DA
diffEditor.insertedTextBackground#2dffc77a
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#ff5e8486
diffEditor.removedTextBorder#00000000
dropdown.background#CED4DA
dropdown.border#495057
editor.background#DEE2E6
editor.findMatchBackground#DEE2E6
editor.findMatchBorder#212529
editor.findMatchHighlightBackground#DEE2E6
editor.findMatchHighlightBorder#212529
editor.findRangeHighlightBackground#DEE2E6
editor.findRangeHighlightBorder#212529
editor.foldBackground#BDBDBD
editor.foreground#212529
editor.hoverHighlightBackground#CED4DA
editor.inactiveSelectionBackground#CED4DA
editor.lineHighlightBackground#DEE2E6
editor.lineHighlightBorder#DEE2E6
editor.rangeHighlightBackground#BDBDBD
editor.rangeHighlightBorder#212529
editor.selectionBackground#CED4DA
editor.selectionHighlightBackground#CED4DA
editor.selectionHighlightBorder#212529
editor.wordHighlightBackground#CED4DA
editor.wordHighlightBorder#212529
editor.wordHighlightStrongBackground#BDBDBD
editorBracketMatch.background#DEE2E6
editorBracketMatch.border#BDBDBD
editorCodeLens.foreground#6C757D
editorCursor.foreground#212529
editorError.foreground#CE0D3A
editorGroup.border#212529
editorGroup.emptyBackground#DEE2E6
editorGroupHeader.tabsBackground#CED4DA
editorGroupHeader.tabsBorder#212529
editorGutter.addedBackground#06D6A0
editorGutter.background#DEE2E6
editorGutter.commentRangeForeground#6C757D
editorGutter.deletedBackground#CE0D3A
editorGutter.foldingControlForeground#6C757D
editorGutter.modifiedBackground#20ABDA
editorHoverWidget.background#CED4DA
editorHoverWidget.border#212529
editorHoverWidget.foreground#6C757D
editorHoverWidget.highlightForeground#212529
editorIndentGuide.activeBackground#6C757D
editorIndentGuide.background#CED4DA
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#20ABDA
editorLineNumber.activeForeground#212529
editorLineNumber.foreground#BDBDBD
editorLink.activeForeground#DEE2E6
editorMarkerNavigation.background#CED4DA
editorMarkerNavigationError.background#CE0D3A
editorMarkerNavigationInfo.background#118AB2
editorMarkerNavigationWarning.background#E49A2B
editorOverviewRuler.background#CED4DA
editorOverviewRuler.border#00000000
editorRuler.foreground#BDBDBD
editorSuggestWidget.background#CED4DA
editorSuggestWidget.border#212529
editorSuggestWidget.focusHighlightForeground#212529
editorSuggestWidget.foreground#6C757D
editorSuggestWidget.highlightForeground#BDBDBD
editorSuggestWidget.selectedBackground#DEE2E6
editorSuggestWidget.selectedForeground#212529
editorSuggestWidget.selectedIconForeground#212529
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#E49A2B
editorWhitespace.foreground#DEE2E6
editorWidget.background#CED4DA
editorWidget.border#212529
editorWidget.foreground#212529
editorWidget.resizeBorder#6C757D
errorForeground#CE0D3A
extensionButton.background#6C757D
extensionButton.foreground#DEE2E6
extensionButton.hoverBackground#212529
extensionButton.prominentBackground#212529
extensionButton.prominentHoverBackground#6C757D
focusBorder#212529
foreground#212529
gitDecoration.addedResourceForeground#03BD8B
gitDecoration.conflictingResourceForeground#AA9EEE
gitDecoration.deletedResourceForeground#CE0D3A
gitDecoration.ignoredResourceForeground#8C8C8C
gitDecoration.modifiedResourceForeground#E49A2B
gitDecoration.stageDeletedResourceForeground#CE0D3A
gitDecoration.stageModifiedResourceForeground#E49A2B
gitDecoration.submoduleResourceForeground#118AB2
gitDecoration.untrackedResourceForeground#03BD8B
icon.foreground#6C757D
input.background#DEE2E6
input.border#212529
input.foreground#212529
input.placeholderForeground#6C757D
inputOption.activeBackground#212529
inputOption.activeBorder#00000000
inputOption.activeForeground#DEE2E6
inputOption.hoverBackground#CED4DA
inputValidation.errorBackground#CE0D3A
inputValidation.errorBorder#CE0D3A
inputValidation.errorForeground#212529
inputValidation.infoBackground#118AB2
inputValidation.infoBorder#118AB2
inputValidation.infoForeground#212529
inputValidation.warningBackground#E49A2B
inputValidation.warningBorder#E49A2B
inputValidation.warningForeground#212529
keybindingLabel.background#CED4DA
keybindingLabel.border#6C757D
keybindingLabel.bottomBorder#6C757D
keybindingLabel.foreground#212529
list.activeSelectionBackground#DEE2E6
list.activeSelectionForeground#212529
list.dropBackground#BDBDBD
list.errorForeground#CE0D3A
list.filterMatchBackground#DEE2E6
list.filterMatchBorder#212529
list.focusBackground#CED4DA
list.focusForeground#212529
list.highlightForeground#212529
list.hoverBackground#CED4DA
list.hoverForeground#212529
list.inactiveFocusOutline#212529
list.inactiveSelectionBackground#DEE2E6
list.inactiveSelectionForeground#212529
list.invalidItemForeground#6C757D
list.warningForeground#E49A2B
listFilterWidget.background#CED4DA
listFilterWidget.noMatchesOutline#CE0D3A
listFilterWidget.outline#212529
menu.background#DEE2E6
menu.border#212529
menu.foreground#6C757D
menu.selectionBackground#CED4DA
menu.selectionBorder#212529
menu.selectionForeground#212529
menu.separatorBackground#CED4DA
menubar.selectionBackground#CED4DA
menubar.selectionForeground#212529
merge.commonContentBackground#CED4DA
merge.commonHeaderBackground#CED4DA
merge.currentContentBackground#06D6A030
merge.currentHeaderBackground#06D6A050
merge.incomingContentBackground#118AB230
merge.incomingHeaderBackground#118AB250
minimap.background#DEE2E6
minimap.errorHighlight#CE0D3A
minimap.findMatchHighlight#6C757D
minimap.selectionHighlight#6C757D
minimap.warningHighlight#E49A2B
minimapGutter.addedBackground#06D6A0
minimapGutter.deletedBackground#CE0D3A
minimapGutter.modifiedBackground#118AB2
notificationCenter.border#212529
notificationCenterHeader.background#CED4DA
notificationCenterHeader.foreground#212529
notifications.background#CED4DA
notifications.border#212529
notifications.foreground#212529
notificationsErrorIcon.foreground#CE0D3A
notificationsInfoIcon.foreground#118AB2
notificationsWarningIcon.foreground#E49A2B
notificationToast.border#212529
panel.background#CED4DA
panel.border#212529
panelSection.border#6C757D
panelTitle.activeBorder#212529
panelTitle.activeForeground#212529
panelTitle.inactiveForeground#6C757D
peekView.border#6C757D
peekViewEditor.background#DEE2E6
peekViewEditor.matchHighlightBackground#CED4DA
peekViewEditor.matchHighlightBorder#212529
peekViewEditorGutter.background#DEE2E6
peekViewResult.background#DEE2E6
peekViewResult.fileForeground#212529
peekViewResult.lineForeground#BDBDBD
peekViewResult.matchHighlightBackground#CED4DA
peekViewResult.selectionBackground#CED4DA
peekViewResult.selectionForeground#212529
peekViewTitle.background#CED4DA
peekViewTitleDescription.foreground#6C757D
peekViewTitleLabel.foreground#212529
pickerGroup.border#212529
pickerGroup.foreground#212529
progressBar.background#6C757D
scrollbar.shadow#6C757D
scrollbarSlider.activeBackground#6C757D
scrollbarSlider.background#BDBDBD
scrollbarSlider.hoverBackground#6C757D
searchEditor.findMatchBorder#ff0000
selection.background#BDBDBD
sideBar.background#CED4DA
sideBar.border#212529
sideBar.dropBackground#BDBDBD
sideBar.foreground#212529
sideBarSectionHeader.background#CED4DA
sideBarSectionHeader.border#212529
sideBarSectionHeader.foreground#212529
sideBarTitle.foreground#6C757D
statusBar.background#DEE2E6
statusBar.border#212529
statusBar.debuggingBackground#CED4DA
statusBar.debuggingBorder#212529
statusBar.debuggingForeground#6C757D
statusBar.foreground#6C757D
statusBar.noFolderBackground#DEE2E6
statusBar.noFolderBorder#212529
statusBar.noFolderForeground#6C757D
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#BDBDBD
statusBarItem.prominentBackground#CED4DA
statusBarItem.prominentHoverBackground#BDBDBD
statusBarItem.remoteBackground#212529
statusBarItem.remoteForeground#DEE2E6
tab.activeBackground#DEE2E6
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#212529
tab.border#212529
tab.inactiveBackground#CED4DA
tab.inactiveForeground#6C757D
terminal.ansiBlack#000000
terminal.ansiBlue#399EE6
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#399EE6
terminal.ansiBrightCyan#4CBF99
terminal.ansiBrightGreen#86B300
terminal.ansiBrightMagenta#A37ACC
terminal.ansiBrightRed#F51818
terminal.ansiBrightWhite#E5E5E5
terminal.ansiBrightYellow#E49A2B
terminal.ansiCyan#4CBF99
terminal.ansiGreen#86B300
terminal.ansiMagenta#A37ACC
terminal.ansiRed#F51818
terminal.ansiWhite#E5E5E5
terminal.ansiYellow#E49A2B
terminal.border#212529
terminal.foreground#212529
terminal.selectionBackground#6C757D
terminal.selectionForeground#DEE2E6
terminalCursor.background#DEE2E6
terminalCursor.foreground#6C757D
textLink.foreground#6C757D
titleBar.activeBackground#DEE2E6
titleBar.activeForeground#212529
titleBar.border#212529
titleBar.inactiveBackground#DEE2E6
titleBar.inactiveForeground#6C757D
tree.indentGuidesStroke#BDBDBD
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#212529	—
comment, markup.quote.markdown, meta.diff, meta.diff.header	#AAA	—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown	#212529	—
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name	#07afaf	—
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js, storage, keyword, meta.link, meta.image, markup.italic, source.js support.type	#E49A2B	—
markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string	#bf34d1	—
markup.heading, variable.language.this.js, variable.language.special.self.python, punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag	#e73dba	—
string.regexp, markup.changed	#399EE6	—
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted	#F51818	—
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string	#00b300	—
entity.other.inherited-class	—	underline
comment, invalid, keyword, entity.other.attribute-name	—	italic

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