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 Dark

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#DEE2E6	—
comment, markup.quote.markdown, meta.diff, meta.diff.header	#6C757D	—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown	#DEE2E6	—
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	#9BF6FF	—
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	#FFD6A5	—
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	#FDFFB6	—
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	#FFADAD	—
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type	#BDB2FF	—
string.regexp, markup.changed	#A0C4FF	—
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	#FFADAD	—
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	#CAFFBF	—
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}!`;
}