SeaShells Theme

Name: SeaShells Theme
Author: nemoDreaming

Publisher: nemoDreamingThemes in package: 2

A VS Code theme based on the SeaShells terminal color scheme.

Open in VS Code GitHub

Color themes

VS Code preview

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

SeaShells Theme — SeaShells (Dark)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

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#074b5f
activityBar.background#0c1923
activityBar.border#0d1d28
activityBar.foreground#87acb4
activityBar.inactiveForeground#3d545d
activityBarBadge.background#027c9b
activityBarBadge.foreground#fee4ce
badge.background#d15123
badge.foreground#fee4ce
banner.background#9d5200
banner.foreground#deb88d
banner.iconForeground#1e4950
button.background#84653e
button.border#00000000
button.foreground#fee4ce
button.secondaryBackground#1e4950
button.secondaryForeground#deb88d
button.separator#60594d
charts.blue#1e4950
charts.foreground#deb88d
charts.green#027c9b
charts.lines#756958
charts.orange#fca02f
charts.purple#68d4f1
charts.red#d15123
charts.yellow#fdd39f
diffEditor.border#0f222f
diffEditor.diagonalFill#122938
diffEditor.insertedLineBackground#027c9b4d
diffEditor.insertedTextBackground#027c9b4d
diffEditor.insertedTextBorder#00000000
diffEditor.removedLineBackground#d151234d
diffEditor.removedTextBackground#d151234d
diffEditor.removedTextBorder#00000000
disabledForeground#756958
editor.background#0c1923
editor.foreground#deb88d
editor.lineHighlightBackground#0f212d
editor.lineHighlightBorder#00000000
editor.selectionBackground#1e4962
editor.selectionForeground#fee4ce
editorCursor.foreground#fca02f
editorError.foreground#68d4f1
editorGroup.border#0f222f
editorGroup.dropBackground#122938
editorGroup.dropIntoPromptBackground#122938
editorGroup.dropIntoPromptBorder#00000000
editorGroup.dropIntoPromptForeground#37434c
editorGroupHeader.tabsBackground#0c1923
editorGutter.addedBackground#027c9b
editorGutter.deletedBackground#d15123
editorHoverWidget.background#483f31
editorHoverWidget.border#deb88d40
editorHoverWidget.foreground#deb88d
editorHoverWidget.highlightForeground#fee4ce
editorHoverWidget.statusBarBackground#0c1923
editorInfo.foreground#1e4950
editorLineNumber.activeForeground#434b53
editorLineNumber.foreground#17384c
editorOverviewRuler.addedForeground#027c9b
editorOverviewRuler.deletedForeground#d15123
editorOverviewRuler.errorForeground#d15123
editorOverviewRuler.infoForeground#1e4950
editorOverviewRuler.warningForeground#fca02f
editorRuler.foreground#1a3540
editorWarning.foreground#fca02f
editorWidget.background#483f31
editorWidget.border#deb88d40
editorWidget.foreground#deb88d
errorForeground#d15123
focusBorder#20424f
foreground#deb88d
gitDecoration.addedResourceForeground#027c9b
gitDecoration.conflictingResourceForeground#d15123
gitDecoration.deletedResourceForeground#d15123
gitDecoration.ignoredResourceForeground#deb88d66
gitDecoration.modifiedResourceForeground#50a3b5
gitDecoration.stageDeletedResourceForeground#aa4623
gitDecoration.stageModifiedResourceForeground#428798
gitDecoration.untrackedResourceForeground#fca02f
gitlens.decorations.addedForegroundColor#027c9b
gitlens.decorations.copiedForegroundColor#027c9b
gitlens.decorations.deletedForegroundColor#d15123
gitlens.decorations.ignoredForegroundColor#60594d
gitlens.decorations.modifiedForegroundColor#50a3b5
gitlens.decorations.untrackedForegroundColor#fca02f
inlineChatDiff.inserted#027c9b33
inlineChatDiff.removed#d1512333
list.activeSelectionBackground#17384c
list.activeSelectionForeground#fee4ce
list.activeSelectionIconForeground#fee4ce
list.errorForeground#d15123
list.focusBackground#132c3c
list.focusForeground#deb88d
list.focusOutline#00000000
list.hoverBackground#102533
list.hoverForeground#deb88d
list.inactiveFocusBackground#102533
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#132c3c
list.inactiveSelectionForeground#deb88d
list.inactiveSelectionIconForeground#deb88d
list.invalidItemForeground#d15123
list.warningForeground#fca02f
merge.border#0f222f
panel.border#0f222f
problemsErrorIcon.foreground#d15123
problemsInfoIcon.foreground#1e4950
problemsWarningIcon.foreground#fca02f
selection.background#1e4962
sideBar.background#0c1923
sideBar.border#0f222f
sideBar.foreground#9d938a
sideBarSectionHeader.background#0c1923
sideBarSectionHeader.foreground#fee4ce
sideBarTitle.foreground#deb88d
statusBar.background#0c1923
statusBar.border#00000000
statusBar.debuggingBackground#50a3b5
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#fee4ce
statusBar.foreground#434b53
statusBar.noFolderBackground#234857
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#68d4f1
statusBarItem.activeBackground#fee4ce
statusBarItem.errorBackground#d15123
statusBarItem.errorForeground#fee4ce
statusBarItem.hoverBackground#002437
statusBarItem.warningBackground#fca02f
statusBarItem.warningForeground#84653e
tab.activeBackground#002437
tab.activeForeground#deb88d
tab.border#132c35
tab.hoverBackground#15313a
tab.hoverForeground#857f79
tab.inactiveBackground#0c1923
tab.inactiveForeground#434b53
terminal.ansiBlack#17384c
terminal.ansiBlue#1e4950
terminal.ansiBrightBlack#434b53
terminal.ansiBrightBlue#1bbcdd
terminal.ansiBrightCyan#87acb4
terminal.ansiBrightGreen#628d98
terminal.ansiBrightMagenta#bbe3ee
terminal.ansiBrightRed#d48678
terminal.ansiBrightWhite#fee4ce
terminal.ansiBrightYellow#fdd39f
terminal.ansiCyan#50a3b5
terminal.ansiGreen#027c9b
terminal.ansiMagenta#68d4f1
terminal.ansiRed#d15123
terminal.ansiWhite#deb88d
terminal.ansiYellow#fca02f
terminal.background#0c1923
terminal.foreground#deb88d
terminal.selectionBackground#1e4962
terminal.selectionForeground#fee4ce
textLink.activeForeground#87acb4
textLink.foreground#50a3b5
titleBar.activeBackground#0b2532
titleBar.activeForeground#628d98
titleBar.border#00000000
toolbar.activeBackground#5b2f23
toolbar.hoverBackground#332423
toolbar.hoverOutline#00000000
welcomePage.background#0d1d28
welcomePage.progress.background#17384c
welcomePage.progress.foreground#50a3b5
welcomePage.tileBackground#122938
welcomePage.tileBorder#494c4e
welcomePage.tileHoverBackground#143042
widget.border#deb88d40
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string.template	#027c9b	—
string.template punctuation	#50a3b5	—
template.expression.begin, template.expression.end	#027c9b	—
constant.language	#fca02f	italic
constant.numeric	#50a3b5	—
constant.language.json, constant.language.import-export-all	#027c9b	—
variable.other.constant	#fee4ce	—
support.variable	#68d4f1	—
variable, meta.definition.variable entity.name.function	#deb88d	—
variable.parameter	—	italic
variable.object.property, meta.field.declaration string, variable.other.object.property	#027c9b	—
support.variable.property, variable.other.property	#68d4f1	—
keyword	#fca02f	—
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default	#fee4ce	italic
keyword.control.flow	#68d4f1	italic
variable.language.this	—	italic
modifier, support.type.object	#027c9b	—
storage.type, storage.modifier	#027c9b	italic
support.module, support.node	#deb88d	italic
entity.name.type, entity.other.inherited-class	#fee4ce	—
comment	#50a3b566	italic
entity.name.function, support.function, meta.definition.method entity.name.function, meta.function entity.name.function	#50a3b5	—
new.expr entity.name.function	#fee4ce	bold
support.type	#68d4f1	—
support.class	#68d4f1	—
entity.name.type.class	#68d4f1	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json, meta.attribute entity.name, meta.attribute punctuation.separator.label	#50a3b5	italic
entity.other.attribute-name.class	#027c9b	—
entity.other.attribute-name.id	#50a3b5	—
meta.tag, punctuation.definition.tag	#027c9b	—
entity.name.tag	#50a3b5	—
text.html meta.tag	#628d98	—
meta.tag entity.other.attribute-name	#027c9b	italic
entity.other.attribute-name	#fca02f	—
source.css support.type	#027c9b	—
source.css entity.name.tag	#bbe3ee	—
source.css entity.other.attribute-name.class	#50a3b5	—
source.css entity.other.attribute-name.id	#fee4ce	—
markup.heading	#027c9b	—
text.html.markdown meta.link.inline, meta.link.reference	#deb88d	—
text.html.markdown beginning.punctuation.definition.list	#027c9b	—
markup.italic	#434b53	italic
markup.bold	#fee4ce	bold
markup.bold markup.italic, markup.italic markup.bold	#fee4ce	—
keyword.other.definition.ini	#deb88d	—
entity.name.section.group-title.ini	#027c9b	—
punctuation.definition.tag	#50a3b5	—
entity.name.tag.yaml	#68d4f1	—
storage.modifier.ts, entity.name.type.module.ts, support.type.primitive.ts	#50a3b5	—
source.vue meta.attribute variable	—	bold
entity.name.type.instance.jsdoc	#50a3b5	—
meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.terminator.statement, punctuation.separator.comma, punctuation.separator.parameter, punctuation.section.embedded	#50a3b566	—
token.info-token	#1e4950	—
token.warn-token	#fca02f	—
token.error-token	#d15123	—
token.debug-token	#027c9b	—