Deep Water

Name: Deep Water
Author: bDesigned

Publisher: bDesignedThemes in package: 4

A color theme based on the colors of the ocean 🌊

Open in VS Code GitHub

Color themes

VS Code preview

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

Deep Water — Deep Water

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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.activeBorder#008c96
activityBar.background#08131a
activityBar.border#008c9644
activityBar.dropBorder#008c96
activityBar.foreground#008c96
activityBar.inactiveForeground#008c9666
activityBarBadge.background#08131a
activityBarBadge.foreground#008c96
badge.background#08131a
badge.foreground#008c96
breadcrumb.activeSelectionForeground#009aa5
breadcrumb.background#08131a
breadcrumb.focusForeground#009aa5
breadcrumb.foreground#008c96cc
breadcrumbPicker.background#08131a
button.background#08131a
button.foreground#008c96
button.hoverBackground#313d53
button.secondaryBackground#24383b
button.secondaryForeground#ffffff
button.secondaryHoverBackground#2f4a4e
checkbox.background#08131a
checkbox.border#008c96
checkbox.foreground#008c96
contrastActiveBorder#08131a
contrastBorder#08131a
debugConsole.errorForeground#ef5350
debugConsole.infoForeground#008c96
debugConsole.sourceForeground#008c96
debugConsole.warningForeground#f7f598
debugConsoleInputIcon.foreground#008c96
debugExceptionWidget.background#08131a
debugExceptionWidget.border#a31515
debugIcon.breakpointCurrentStackframeForeground#f7f598
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#e51400
debugIcon.breakpointStackframeForeground#85d1cd
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#56c3d6
debugIcon.disconnectForeground#f48771
debugIcon.pauseForeground#56c3d6
debugIcon.restartForeground#85d1c7
debugIcon.startForeground#85d1a7
debugIcon.stepBackForeground#56c3d6
debugIcon.stepIntoForeground#56c3d6
debugIcon.stepOutForeground#56c3d6
debugIcon.stepOverForeground#56c3d6
debugIcon.stopForeground#f48771
debugTokenExpression.boolean#4e94ce
debugTokenExpression.error#f48771
debugTokenExpression.name#c586c0
debugTokenExpression.number#b5cea8
debugTokenExpression.string#ce9178
debugTokenExpression.value#cccccc99
debugToolBar.background#08131a
debugView.exceptionLabelBackground#6c2022
debugView.exceptionLabelForeground#008c96
debugView.stateLabelBackground#88888844
debugView.stateLabelForeground#008c96
debugView.valueChangedHighlight#fffc581f
descriptionForeground#008c96b3
diffEditor.diagonalFill#fffc581f
diffEditor.insertedTextBackground#99b76d23
diffEditor.insertedTextBorder#addb6733
diffEditor.removedTextBackground#ef535033
diffEditor.removedTextBorder#ef53504d
dropdown.background#08131a
dropdown.border#008c96
dropdown.foreground#008c96
dropdown.listBackground#08131a
editor.background#08131a
editor.findMatchBackground#fffc581f
editor.findMatchHighlightBackground#fffc581f
editor.findRangeHighlightBackground#fffc581f
editor.focusedStackFrameHighlightBackground#fffc581f
editor.foldBackground#fffb004b
editor.foreground#008c96
editor.hoverHighlightBackground#008c96
editor.inactiveSelectionBackground#57bec215
editor.lineHighlightBackground#008c9631
editor.onTypeRenameBackground#ff00004d
editor.rangeHighlightBackground#fffc581f
editor.selectionBackground#fffc581f
editor.selectionHighlightBackground#fffc581f
editor.snippetFinalTabstopHighlightBorder#fffc581f
editor.snippetTabstopHighlightBackground#fffc581f
editor.stackFrameHighlightBackground#fffc581f
editor.symbolHighlightBackground#fffc581f
editor.wordHighlightBackground#fffc581f
editor.wordHighlightStrongBackground#fffc581f
editorBracketMatch.background#00eeff4d
editorBracketMatch.border#17adb0
editorCodeLens.foreground#f7f598
editorCursor.foreground#21cfd5
editorError.border#fbfbfb
editorError.foreground#ef5350
editorGroup.border#ffffff12
editorGroup.dropBackground#fffc581f
editorGroupHeader.noTabsBackground#08131a
editorGroupHeader.tabsBackground#08131a
editorGroupHeader.tabsBorder#08131a
editorGutter.addedBackground#0c7c7c
editorGutter.background#08131a
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHint.foreground#f7f598
editorHoverWidget.background#08131a
editorHoverWidget.border#5f7e97
editorHoverWidget.foreground#f7f598
editorHoverWidget.statusBarBackground#fffc581f
editorIndentGuide.activeBackground#24e48a
editorIndentGuide.background#08131a
editorInfo.foreground#f7f598
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75efff
editorLineNumber.activeForeground#008c96
editorLineNumber.foreground#1a9fa87a
editorLink.activeForeground#4ebbce
editorMarkerNavigation.background#fffc581f
editorMarkerNavigationError.background#ef5350
editorMarkerNavigationInfo.background#5abdc4
editorMarkerNavigationWarning.background#fffc581f
editorOverviewRuler.addedForeground#0c7c6999
editorOverviewRuler.bracketMatchForeground#f7f598
editorOverviewRuler.commonContentForeground#17adb0
editorOverviewRuler.currentContentForeground#17adb0
editorOverviewRuler.deletedForeground#94151b99
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#f7f598
editorOverviewRuler.incomingContentForeground#17adb0
editorOverviewRuler.infoForeground#008c96
editorOverviewRuler.modifiedForeground#0c879d99
editorOverviewRuler.rangeHighlightForeground#008c96
editorOverviewRuler.selectionHighlightForeground#f7f598
editorOverviewRuler.warningForeground#f7f598
editorOverviewRuler.wordHighlightForeground#f7f598
editorOverviewRuler.wordHighlightStrongForeground#f7f598
editorPane.background#08131a
editorRuler.foreground#f7f598
editorSuggestWidget.background#01232b
editorSuggestWidget.border#08131a
editorSuggestWidget.foreground#008c96
editorSuggestWidget.highlightForeground#f7f598
editorSuggestWidget.selectedBackground#01404e
editorUnnecessaryCode.opacity#0b0e0faa
editorWarning.border#dfc772
editorWarning.foreground#f7f598
editorWhitespace.foreground#282f40
editorWidget.background#08131a
editorWidget.border#08131a
editorWidget.foreground#008c96
errorForeground#ef5350
extensionBadge.remoteBackground#08131a
extensionBadge.remoteForeground#008c96
extensionButton.prominentBackground#327e67
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#286359
focusBorder#1f1f1f77
foreground#008c96
gitDecoration.addedResourceForeground#81b8b1
gitDecoration.conflictingResourceForeground#6cb2c4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#1ab19d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#5abeb0
icon.foreground#c5c5c5
imagePreview.border#80808059
input.background#0b253a
input.border#5f978b
input.foreground#008c96cc
input.placeholderForeground#5f9097
inputOption.activeBackground#1f1f1f30
inputOption.activeBorder#008c96
inputOption.activeForeground#ffffff
inputValidation.errorBackground#ef53509c
inputValidation.errorBorder#ef5350
inputValidation.infoBackground#0c8383
inputValidation.infoBorder#08131a
inputValidation.warningBackground#f7ecb5
inputValidation.warningBorder#f7ecb5
inputValidation.warningForeground#000000
list.activeSelectionBackground#ffd00044
list.activeSelectionForeground#ffffff
list.deemphasizedForeground#8c8c8c
list.dropBackground#08131a
list.errorForeground#f88070
list.filterMatchBackground#fffc581f
list.focusBackground#008c96
list.focusForeground#ffffff
list.highlightForeground#f7f598
list.hoverBackground#01779b
list.hoverForeground#f7f598
list.inactiveSelectionBackground#008c9667
list.inactiveSelectionForeground#08131a
list.invalidItemForeground#975f94
list.warningForeground#f7f598
listFilterWidget.background#03303880
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#08131a
menu.foreground#008c96
menu.selectionBackground#034347
menu.selectionForeground#ffffff
menu.separatorBackground#008c96
menubar.selectionBackground#08131a
menubar.selectionForeground#eeefff
merge.commonContentBackground#03303880
merge.commonHeaderBackground#03303880
merge.currentContentBackground#03303880
merge.currentHeaderBackground#03303880
merge.incomingContentBackground#03303880
merge.incomingHeaderBackground#03303880
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#fffc581f
minimap.selectionHighlight#fffc581f
minimap.warningHighlight#fffc581f
minimapGutter.addedBackground#01779b50
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
minimapSlider.activeBackground#008c9680
minimapSlider.background#008c9680
minimapSlider.hoverBackground#025e6480
notebook.cellBorderColor#6a819e0a
notebook.cellHoverBackground#6a819e05
notebook.cellInsertionIndicator#1f1f1f77
notebook.cellStatusBarItemHoverBackground#ffffff26
notebook.cellToolbarSeparator#80808059
notebook.focusedCellBackground#154f570a
notebook.focusedCellBorder#ffffff1f
notebook.focusedEditorBorder#1f1f1f77
notebook.outputContainerBackgroundColor#08131a
notebook.symbolHighlightBackground#fffc581f
notebookScrollbarSlider.activeBackground#008c96
notebookScrollbarSlider.background#008c96
notebookScrollbarSlider.hoverBackground#025e64
notebookStatusErrorIcon.foreground#ef5350
notebookStatusRunningIcon.foreground#008c96
notebookStatusSuccessIcon.foreground#70b3af
notificationCenter.border#cccccc
notificationCenterHeader.background#008c96
notificationCenterHeader.foreground#403f53
notificationLink.foreground#80cbc4
notifications.background#08131a
notifications.border#ffffff
notifications.foreground#008c96cc
notificationsErrorIcon.foreground#ef5350
notificationsInfoIcon.foreground#008c96
notificationsWarningIcon.foreground#fffc581f
notificationToast.border#008c9644
panel.background#08131a
panel.border#6a819e18
panel.dropBorder#008c96
panelSection.border#6a819e18
panelSection.dropBackground#1d485880
panelSectionHeader.background#08131a
panelSectionHeader.border#08131a
panelTitle.activeBorder#008c96
panelTitle.activeForeground#008c96
panelTitle.inactiveForeground#5f7e97
peekView.border#f7ecb5
peekViewEditor.background#08131a
peekViewEditor.matchHighlightBackground#fffc581f
peekViewEditorGutter.background#08131a
peekViewResult.background#08131a
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#fffc581f
peekViewResult.selectionBackground#fffc581f
peekViewResult.selectionForeground#cecece
peekViewTitle.background#08131a
peekViewTitleDescription.foreground#697098
peekViewTitleLabel.foreground#cecece
pickerGroup.border#008c9644
pickerGroup.foreground#008c96
problemsErrorIcon.foreground#ef5350
problemsInfoIcon.foreground#008c96
problemsWarningIcon.foreground#fffc581f
progressBar.background#008c96
quickInput.background#08131a
quickInput.foreground#008c96
quickInputTitle.background#ffffff1b
scm.providerBorder#324d4b
scrollbar.shadow#008c9667
scrollbarSlider.activeBackground#008c96
scrollbarSlider.background#008c96
scrollbarSlider.hoverBackground#025e64
searchEditor.findMatchBackground#ffdc412d
searchEditor.textInputBorder#5f978b
selection.background#fffc581f
settings.checkboxBackground#08131a
settings.checkboxBorder#008c96
settings.checkboxForeground#ffffff
settings.dropdownBackground#08131a
settings.dropdownBorder#008c96
settings.dropdownForeground#ffffff
settings.dropdownListBorder#08131a
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#008c96
settings.numberInputBorder#5f978b
settings.numberInputForeground#ffffffcc
settings.textInputBackground#008c96
settings.textInputBorder#5f978b
settings.textInputForeground#ffffffcc
sideBar.background#08131a
sideBar.border#6a819e18
sideBar.dropBackground#223d3f80
sideBar.foreground#008c96cc
sideBarSectionHeader.background#08131a
sideBarSectionHeader.border#08131a
sideBarSectionHeader.foreground#008c96
sideBarTitle.foreground#008c96
statusBar.background#008c96
statusBar.border#f0f0f0
statusBar.debuggingBackground#b15a91
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#08131a
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#01779b
statusBarItem.hoverBackground#01779b
statusBarItem.prominentBackground#01779b
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#01779b
statusBarItem.remoteBackground#008c96
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#008c96
symbolIcon.booleanForeground#008c96
symbolIcon.classForeground#fffc581f
symbolIcon.colorForeground#008c96
symbolIcon.constantForeground#008c96
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#fffc581f
symbolIcon.enumeratorMemberForeground#008c96
symbolIcon.eventForeground#fffc581f
symbolIcon.fieldForeground#008c96
symbolIcon.fileForeground#008c96
symbolIcon.folderForeground#008c96
symbolIcon.functionForeground#b180d7
symbolIcon.interfaceForeground#008c96
symbolIcon.keyForeground#008c96
symbolIcon.keywordForeground#008c96
symbolIcon.methodForeground#b180d7
symbolIcon.moduleForeground#008c96
symbolIcon.namespaceForeground#008c96
symbolIcon.nullForeground#008c96
symbolIcon.numberForeground#008c96
symbolIcon.objectForeground#008c96
symbolIcon.operatorForeground#008c96
symbolIcon.packageForeground#008c96
symbolIcon.propertyForeground#008c96
symbolIcon.referenceForeground#008c96
symbolIcon.snippetForeground#008c96
symbolIcon.stringForeground#008c96
symbolIcon.structForeground#008c96
symbolIcon.textForeground#008c96
symbolIcon.typeParameterForeground#008c96
symbolIcon.unitForeground#008c96
symbolIcon.variableForeground#008c96
tab.activeBackground#008c96
tab.activeBorderTop#008c96
tab.activeForeground#ffffff
tab.activeModifiedBorder#3399cc
tab.border#08131a
tab.hoverBackground#0a333d
tab.inactiveBackground#08131a
tab.inactiveForeground#008c96
tab.inactiveModifiedBorder#3399cc80
tab.unfocusedActiveBackground#008c96
tab.unfocusedActiveBorderTop#008c9680
tab.unfocusedActiveForeground#ffffff80
tab.unfocusedActiveModifiedBorder#339ccc80
tab.unfocusedHoverBackground#0a333d80
tab.unfocusedInactiveBackground#08131a
tab.unfocusedInactiveForeground#008c9680
tab.unfocusedInactiveModifiedBorder#3399cc40
terminal.ansiBlack#01779b
terminal.ansiBlue#008c96
terminal.ansiBrightBlack#006868
terminal.ansiBrightBlue#1ca0be
terminal.ansiBrightCyan#fc6693
terminal.ansiBrightGreen#019b53
terminal.ansiBrightMagenta#d670ab
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f7f593
terminal.ansiCyan#1ca0be
terminal.ansiGreen#01779b
terminal.ansiMagenta#01779b
terminal.ansiRed#fc6693
terminal.ansiWhite#ffffff
terminal.ansiYellow#f7f593
terminal.background#08131a
terminal.border#6a819e18
terminal.foreground#008c96
terminal.selectionBackground#fffc581f
textBlockQuote.background#08131a
textBlockQuote.border#007acc80
textCodeBlock.background#08131a
textLink.activeForeground#6cc1d9
textLink.foreground#008c96
textPreformat.foreground#d7ba7d
textSeparator.foreground#ffffff2e
titleBar.activeBackground#008c96
titleBar.activeForeground#eeefff
titleBar.border#08131a
titleBar.inactiveBackground#08131a
titleBar.inactiveForeground#008c96
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#08131a
welcomePage.buttonBackground#08131a
welcomePage.buttonHoverBackground#fef598
widget.shadow#008c96

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, entity.name.type.class, entity.other.attribute-name, entity.name.method, entity.name.tag, keyword, keyword.control, markup.italic.markdown, punctuation.definition.italic.markdown, storage, string.other.link.title.markdown	—	italic
comment	#4b6869	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, source.css, string.template meta.template.expression, keyword, storage.type, storage.modifier, string.json, support.type.property-name.json.comments, support.type.property-name.json, support.type.object.module.js, support.type.vendored.property-name.css, variable.language.this	#01779b	—
string.other.link.title.markdown, support.type.property-name, variable.other.object	#78fade	—
markup.underline.link.image.markdown, markup.underline.link.markdown, constant.language, punctuation.definition.constant, variable.other.constant, constant.character, constant.other, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, variable.other.object.property, variable.other.readwrites, meta.definition.variable, variable.other.readwrite.js, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, invalid.deprecated.entity.other.attribute-name	#17ADB0	—
string.quoted, variable.parameter, entity.name.type, entity.name.type.js, entity.name.tag, markup.bold.markdown	#1CA0BE	—
constant.numeric, markup.italic.markdown, punctuation.definition.italic.markdown, punctuation.definition.metadata.markdown	#6CC1D9	—
entity.name.function, entity.other.attribute-name, punctuation.definition.markdown, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, punctuation.definition.bold.markdown, string.quoted.double.json, string.template.js, support.class, support.constant, support.function, support.type, support.variable.property	#8CE6D0	—
entity.name.section.markdown, punctuation.definition.heading.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown, meta.structure.dictionary.value.json string.quoted.double, punctuation.definition.string.json, meta.paragraph.markdown, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, source.json support, source.svelte, text.html.markdown, text.html	#A5DEE0	—
punctuation.definition.string	#EAF0EF	—
keyword.operator, storage, meta.brace.round.js, meta.brace.square.js, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, punctuation.separator.key-value, punctuation.definition.array, punctuation.definition.block, punctuation.definition.list, punctuation.definition.metadata.markdown, punctuation.definition.string, punctuation.definition.dictionary, punctuation.definition.string.end.markdown, punctuation.definition.tag, punctuation.support.type.property-name.begin.json, meta.structure.dictionary.value.json, punctuation.support.type.property-name.end.json, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.terminator.statement, source, source.json string, source.json punctuation.definition.string	#f7f598	—

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