Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #021a1e activityBar.border #00000000 activityBar.foreground #A8A88D activityBar.inactiveForeground #45475a activityBarBadge.background #2DA697 activityBarBadge.foreground #042328 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #54ce62 — string, string.quoted, string.template #2DA697 — punctuation.definition.string #228077 — keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import, storage, storage.type, storage.modifier #d6e3e4 — entity.name.function, meta.definition.method entity.name.function, meta.function entity.name.function
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}!`;
}
Seafloor Dark — Seafloor Dark
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
badge.background
#2DA697
badge.foreground #042328
breadcrumb.activeSelectionForeground #A8A88D
breadcrumb.background #021a1e
breadcrumb.focusForeground #B3C4C5
breadcrumb.foreground #7a8e8c
breadcrumbPicker.background #021a1e
button.background #2DA697
button.foreground #042328
button.hoverBackground #3dc0b0
checkbox.background #021a1e
checkbox.border #2a5560
checkbox.foreground #A8A88D
descriptionForeground #45475a
diffEditor.insertedLineBackground #54ce6215
diffEditor.insertedTextBackground #54ce6220
diffEditor.removedLineBackground #f38ba815
diffEditor.removedTextBackground #f38ba820
dropdown.background #021a1e
dropdown.border #2a5560
dropdown.foreground #A8A88D
editor.background #042328
editor.findMatchBackground #f9e2af
editor.findMatchForeground #1e1e2e
editor.findMatchHighlightBackground #fab38780
editor.findMatchHighlightForeground #1e1e2eA0
editor.findRangeHighlightBackground #0a354040
editor.foreground #A8A88D
editor.inactiveSelectionBackground #1a3aaa45
editor.lineHighlightBackground #0a3540
editor.lineHighlightBorder #00000000
editor.selectionBackground #1a3aaa70
editorBracketHighlight.foreground1 #4d8a7a
editorBracketHighlight.foreground2 #5a8898
editorBracketHighlight.foreground3 #6a9070
editorBracketHighlight.foreground4 #427a85
editorBracketHighlight.foreground5 #5e8878
editorBracketHighlight.foreground6 #4a7a8a
editorBracketHighlight.unexpectedBracket.foreground #f38ba880
editorBracketMatch.background #cba6f730
editorBracketMatch.border #00e5bf
editorCursor.foreground #8ADF90
editorGroupHeader.tabsBackground #021a1e
editorGroupHeader.tabsBorder #00000000
editorGutter.background #052a30
editorHoverWidget.background #1e1e2e
editorHoverWidget.border #2a5560
editorIndentGuide.activeBackground1 #2a5560
editorIndentGuide.background1 #1e3540
editorLineNumber.activeForeground #5e8c85
editorLineNumber.foreground #1e4a52
editorOverviewRuler.border #1e1e2e
editorOverviewRuler.findMatchForeground #f9e2afA0
editorOverviewRuler.selectionHighlightForeground #000FFF80
editorSuggestWidget.background #1e1e2e
editorSuggestWidget.border #2a5560
editorSuggestWidget.foreground #A8A88D
editorSuggestWidget.highlightForeground #B3C4C5
editorSuggestWidget.selectedBackground #0a3540
editorWhitespace.foreground #1e354060
editorWidget.background #1e1e2e
editorWidget.border #2a5560
editorWidget.foreground #A8A88D
errorForeground #f38ba8
focusBorder #2DA697
foreground #A8A88D
gitDecoration.addedResourceForeground #54ce62
gitDecoration.conflictingResourceForeground #cba6f7
gitDecoration.deletedResourceForeground #f38ba8
gitDecoration.ignoredResourceForeground #587477
gitDecoration.modifiedResourceForeground #f9e2af
gitDecoration.untrackedResourceForeground #8ADF90
input.background #021a1e
input.border #2a5560
input.foreground #A8A88D
input.placeholderForeground #45475a
inputOption.activeBackground #2DA69740
inputOption.activeBorder #2DA697
list.activeSelectionBackground #0a3540
list.activeSelectionForeground #B3C4C5
list.errorForeground #f38ba8
list.focusBackground #0a3540
list.highlightForeground #8ADF90
list.hoverBackground #0d2f38
list.inactiveSelectionBackground #0d2f38
list.warningForeground #f9e2af
menu.background #021a1e
menu.foreground #A8A88D
menu.selectionBackground #0a3540
menu.selectionForeground #B3C4C5
menu.separatorBackground #2a5560
menubar.selectionBackground #0a3540
menubar.selectionForeground #B3C4C5
minimap.findMatchHighlight #f9e2af80
minimap.selectionHighlight #1a3aaa80
minimapSlider.activeBackground #2a554080
minimapSlider.background #2a554040
minimapSlider.hoverBackground #2a554060
notificationCenterHeader.background #042328
notifications.background #021a1e
notifications.foreground #A8A88D
notificationToast.border #2a5560
panel.background #021a1e
panel.border #1e1e2e
panelTitle.activeBorder #2DA697
panelTitle.activeForeground #B3C4C5
panelTitle.inactiveForeground #45475a
peekView.border #2DA697
peekViewEditor.background #021a1e
peekViewEditor.matchHighlightBackground #f9e2af40
peekViewResult.background #021a1e
peekViewResult.matchHighlightBackground #f9e2af40
peekViewResult.selectionBackground #0a3540
peekViewTitle.background #042328
peekViewTitleDescription.foreground #A8A88D
peekViewTitleLabel.foreground #B3C4C5
pickerGroup.border #2a5560
pickerGroup.foreground #45475a
progressBar.background #2DA697
quickInput.background #021a1e
quickInput.foreground #A8A88D
scrollbar.shadow #00000060
scrollbarSlider.activeBackground #2a5560b0
scrollbarSlider.background #2a556060
scrollbarSlider.hoverBackground #2a556090
selection.background #1a3aaa70
settings.headerForeground #B3C4C5
settings.modifiedItemIndicator #2DA697
sideBar.background #021a1e
sideBar.border #0a354040
sideBar.foreground #A8A88D
sideBarSectionHeader.background #042328
sideBarSectionHeader.border #1e1e2e
sideBarSectionHeader.foreground #A8A88D
sideBarTitle.foreground #B3C4C5
statusBar.background #D6B58A
statusBar.border #00000000
statusBar.foreground #091405
statusBar.noFolderBackground #7f6b52
statusBar.noFolderForeground #091405
statusBarItem.hoverBackground #c4a37a
statusBarItem.remoteBackground #2DA697
statusBarItem.remoteForeground #042328
tab.activeBackground #042328
tab.activeBorderTop #2DA697
tab.activeForeground #D4E4E5
tab.border #021a1e
tab.hoverBackground #0a3540
tab.inactiveBackground #021a1e
tab.inactiveForeground #6b8c8f
tab.unfocusedActiveBorderTop #1a6860
terminal.ansiBlack #042328
terminal.ansiBlue #000FFF
terminal.ansiBrightBlack #45475a
terminal.ansiBrightBlue #73AAA9
terminal.ansiBrightCyan #B3C4C5
terminal.ansiBrightGreen #8ADF90
terminal.ansiBrightMagenta #cba6f7
terminal.ansiBrightRed #f38ba8
terminal.ansiBrightWhite #B3C4C5
terminal.ansiBrightYellow #f9e2af
terminal.ansiCyan #2DA697
terminal.ansiGreen #54ce62
terminal.ansiMagenta #cba6f7
terminal.ansiRed #f38ba8
terminal.ansiWhite #A8A88D
terminal.ansiYellow #f9e2af
terminal.background #021a1e
terminal.foreground #A8A88D
terminalCursor.foreground #8ADF90
titleBar.activeBackground #021a1e
titleBar.activeForeground #A8A88D
titleBar.border #00000000
titleBar.inactiveBackground #011418
titleBar.inactiveForeground #45475a
toolbar.hoverBackground #0a3540
widget.shadow #00000080 meta.function-call entity.name.function, meta.method-call entity.name.function #A8A88D —
variable, variable.other, variable.other.readwrite, variable.parameter #A8A88D —
variable.language #d6e3e4 —
constant, variable.other.constant, constant.language #73AAA9 —
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, entity.name.namespace, entity.name.module, support.type, support.class #6C9585 —
entity.other.inherited-class #6C9585 italic
support.function, support.function.builtin #B3C4C5 —
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters, punctuation.definition.block #7a7a6e —
meta.preprocessor, punctuation.definition.preprocessor, keyword.control.import, keyword.control.export, entity.name.function.preprocessor #B3C4C5 —
entity.other.attribute-name #A8A88D —
support.type.property-name.css, support.type.property-name #B3C4C5 —
support.constant.property-value, support.constant.color, support.constant.font-name #2DA697 —
invalid, invalid.illegal #f38ba8 underline
invalid.deprecated #f38ba8 italic
constant.character.escape #73AAA9 —
markup.heading, entity.name.section.markdown #B3C4C5 bold
markup.italic #73AAA9 italic
markup.underline.link, string.other.link.title.markdown #2DA697 underline
markup.inline.raw, markup.raw.block #2DA697 —
markup.quote #54ce62 italic
markup.inserted, meta.diff.header.to-file #54ce62 —
markup.deleted, meta.diff.header.from-file #f38ba8 —
meta.diff, meta.diff.header #A8A88D —
support.type.property-name.json #B3C4C5 —
entity.name.tag.yaml #B3C4C5 —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline components
fetchUser.ts
fetchUser
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 $
Seafloor Dark | Coding Theme