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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#008c96
activityBar.background#d3f3fc
activityBar.border#008c9644
activityBar.dropBorder#008c96
activityBar.foreground#008c96
activityBar.inactiveForeground#008c9666
activityBarBadge.background#d3f3fc
activityBarBadge.foreground#008c96
badge.background#d3f3fc
badge.foreground#008c96
breadcrumb.activeSelectionForeground#009aa5
breadcrumb.background#d3f3fc
breadcrumb.focusForeground#009aa5
breadcrumb.foreground#008c96cc
breadcrumbPicker.background#d3f3fc
button.background#d3f3fc
button.foreground#008c96
button.hoverBackground#313d53
button.secondaryBackground#24383b
button.secondaryForeground#ffffff
button.secondaryHoverBackground#2f4a4e
checkbox.background#d3f3fc
checkbox.border#008c96
checkbox.foreground#008c96
contrastActiveBorder#d3f3fc
contrastBorder#d3f3fc
debugConsole.errorForeground#ef5350
debugConsole.infoForeground#008c96
debugConsole.sourceForeground#008c96
debugConsole.warningForeground#ffca28
debugConsoleInputIcon.foreground#008c96
debugExceptionWidget.background#d3f3fc
debugExceptionWidget.border#a31515
debugIcon.breakpointCurrentStackframeForeground#ffcc00
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#d3f3fc
debugView.exceptionLabelBackground#6c2022
debugView.exceptionLabelForeground#008c96
debugView.stateLabelBackground#88888844
debugView.stateLabelForeground#008c96
debugView.valueChangedHighlight#56c3d6
descriptionForeground#008c96b3
diffEditor.diagonalFill#cccccc33
diffEditor.insertedTextBackground#99b76d23
diffEditor.insertedTextBorder#addb6733
diffEditor.removedTextBackground#ef535033
diffEditor.removedTextBorder#ef53504d
dropdown.background#d3f3fc
dropdown.border#008c96
dropdown.foreground#008c96
dropdown.listBackground#d3f3fc
editor.background#d3f3fc
editor.findMatchBackground#515c6a
editor.findMatchHighlightBackground#ffdc4144
editor.findRangeHighlightBackground#3a3d4166
editor.focusedStackFrameHighlightBackground#7abdbd4d
editor.foldBackground#2d5d704d
editor.foreground#008c96
editor.hoverHighlightBackground#008c96
editor.inactiveSelectionBackground#57bec215
editor.lineHighlightBackground#008c9631
editor.onTypeRenameBackground#ff00004d
editor.rangeHighlightBackground#2d5d70
editor.selectionBackground#2d5d70
editor.selectionHighlightBackground#2d5d70
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#ffdc4144
editor.wordHighlightBackground#2d5d70
editor.wordHighlightStrongBackground#2d5d70
editorBracketMatch.background#00eeff4d
editorBracketMatch.border#2AA298
editorCodeLens.foreground#999999
editorCursor.foreground#21cfd5
editorError.border#FBFBFB
editorError.foreground#ef5350
editorGroup.border#ffffff12
editorGroup.dropBackground#53595d80
editorGroupHeader.noTabsBackground#d3f3fc
editorGroupHeader.tabsBackground#d3f3fc
editorGroupHeader.tabsBorder#d3f3fc
editorGutter.addedBackground#0c7c7c
editorGutter.background#d3f3fc
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#d3f3fc
editorHoverWidget.border#5f7e97
editorHoverWidget.foreground#008c96
editorHoverWidget.statusBarBackground#ffffff
editorIndentGuide.activeBackground#24e48a
editorIndentGuide.background#d3f3fc
editorInfo.foreground#75efff
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75efff
editorLineNumber.activeForeground#008c96
editorLineNumber.foreground#1a9fa87a
editorLink.activeForeground#4ebbce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#ef5350
editorMarkerNavigationInfo.background#5abdc4
editorMarkerNavigationWarning.background#ffca28
editorOverviewRuler.addedForeground#0c7c6999
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#7e57c2
editorOverviewRuler.currentContentForeground#57a9c2
editorOverviewRuler.deletedForeground#94151b99
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#57a4c2
editorOverviewRuler.infoForeground#008c96
editorOverviewRuler.modifiedForeground#0c7d9d99
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#ffca28
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#d3f3fc
editorRuler.foreground#45585a
editorSuggestWidget.background#d3f3fc
editorSuggestWidget.border#d3f3fc
editorSuggestWidget.foreground#008c96
editorSuggestWidget.highlightForeground#008c96
editorSuggestWidget.selectedBackground#5f8f97
editorUnnecessaryCode.opacity#0b0e0faa
editorWarning.border#dfc772
editorWarning.foreground#ffca28
editorWhitespace.foreground#282f40
editorWidget.background#d3f3fc
editorWidget.border#d3f3fc
editorWidget.foreground#008c96
errorForeground#ef5350
extensionBadge.remoteBackground#d3f3fc
extensionBadge.remoteForeground#008c96
extensionButton.prominentBackground#327e67
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#286359
focusBorder#1f1f1f77
foreground#008c96
gitDecoration.addedResourceForeground#81b8b1
gitDecoration.conflictingResourceForeground#6c6cc4
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#ef5350
inputValidation.errorBorder#ef5350
inputValidation.infoBackground#0c8383
inputValidation.infoBorder#d3f3fc
inputValidation.warningBackground#f7ecb5
inputValidation.warningBorder#f7ecb5
inputValidation.warningForeground#000000
list.activeSelectionBackground#015a61
list.activeSelectionForeground#ffffff
list.deemphasizedForeground#8c8c8c
list.dropBackground#d3f3fc
list.errorForeground#f88070
list.filterMatchBackground#ffdc4144
list.focusBackground#008c96
list.focusForeground#ffffff
list.highlightForeground#008c96
list.hoverBackground#008c96
list.hoverForeground#008c96
list.inactiveSelectionBackground#008c96
list.inactiveSelectionForeground#d3f3fc
list.invalidItemForeground#975f94
list.warningForeground#cca700
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#d3f3fc
menu.foreground#008c96
menu.selectionBackground#008c96
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#eeefff
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40e2ff80
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#d18616
minimap.selectionHighlight#264f78
minimap.warningHighlight#ffca28
minimapGutter.addedBackground#587c0c
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#6a819e0a
notebook.focusedCellBorder#ffffff1f
notebook.focusedEditorBorder#1f1f1f77
notebook.outputContainerBackgroundColor#6a819e0a
notebook.symbolHighlightBackground#ffffff0b
notebookScrollbarSlider.activeBackground#008c96
notebookScrollbarSlider.background#008c96
notebookScrollbarSlider.hoverBackground#025e64
notebookStatusErrorIcon.foreground#ef5350
notebookStatusRunningIcon.foreground#008c96
notebookStatusSuccessIcon.foreground#89d185
notificationCenter.border#CCCCCC
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#403f53
notificationLink.foreground#80cbc4
notifications.background#d3f3fc
notifications.border#ffffff
notifications.foreground#008c96cc
notificationsErrorIcon.foreground#ef5350
notificationsInfoIcon.foreground#008c96
notificationsWarningIcon.foreground#ffca28
notificationToast.border#008c9644
panel.background#d3f3fc
panel.border#6a819e18
panel.dropBorder#008c96
panelSection.border#6a819e18
panelSection.dropBackground#53595d80
panelSectionHeader.background#80808033
panelSectionHeader.border#d3f3fc
panelTitle.activeBorder#008c96
panelTitle.activeForeground#008c96
panelTitle.inactiveForeground#5f7e97
peekView.border#f7ecb5
peekViewEditor.background#d3f3fc
peekViewEditor.matchHighlightBackground#7e57c25a
peekViewEditorGutter.background#d3f3fc
peekViewResult.background#d3f3fc
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#7e57c25a
peekViewResult.selectionBackground#2e3250
peekViewResult.selectionForeground#cecece
peekViewTitle.background#d3f3fc
peekViewTitleDescription.foreground#697098
peekViewTitleLabel.foreground#cecece
pickerGroup.border#008c9644
pickerGroup.foreground#3794ff
problemsErrorIcon.foreground#ef5350
problemsInfoIcon.foreground#008c96
problemsWarningIcon.foreground#ffca28
progressBar.background#0e70c0
quickInput.background#d3f3fc
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#43c29c
settings.checkboxBackground#d3f3fc
settings.checkboxBorder#008c96
settings.checkboxForeground#008c96
settings.dropdownBackground#d3f3fc
settings.dropdownBorder#008c96
settings.dropdownForeground#008c96
settings.dropdownListBorder#d3f3fc
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#008c96
settings.numberInputBorder#5f978b
settings.numberInputForeground#008c96cc
settings.textInputBackground#008c96
settings.textInputBorder#5f978b
settings.textInputForeground#008c96cc
sideBar.background#d3f3fc
sideBar.border#6a819e18
sideBar.dropBackground#53595d80
sideBar.foreground#008c96cc
sideBarSectionHeader.background#d3f3fc
sideBarSectionHeader.border#d3f3fc
sideBarSectionHeader.foreground#008c96
sideBarTitle.foreground#008c96
statusBar.background#008c96
statusBar.border#F0F0F0
statusBar.debuggingBackground#b15a91
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#d3f3fc
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#03648a
statusBarItem.hoverBackground#03648a
statusBarItem.prominentBackground#03648a
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#038a7f
statusBarItem.remoteBackground#008c96
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#008c96
symbolIcon.booleanForeground#008c96
symbolIcon.classForeground#ee9d28
symbolIcon.colorForeground#008c96
symbolIcon.constantForeground#008c96
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#ee9d28
symbolIcon.enumeratorMemberForeground#008c96
symbolIcon.eventForeground#ee9d28
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#d3f3fc
tab.hoverBackground#0a333d
tab.inactiveBackground#d3f3fc
tab.inactiveForeground#008c96
tab.inactiveModifiedBorder#3399cc80
tab.unfocusedActiveBackground#008c96
tab.unfocusedActiveBorderTop#008c9680
tab.unfocusedActiveForeground#ffffff80
tab.unfocusedActiveModifiedBorder#339ccc80
tab.unfocusedHoverBackground#0a333d80
tab.unfocusedInactiveBackground#d3f3fc
tab.unfocusedInactiveForeground#008c9680
tab.unfocusedInactiveModifiedBorder#3399cc40
terminal.ansiBlack#01f7ff
terminal.ansiBlue#6cc1d9
terminal.ansiBrightBlack#122020
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#fc6693
terminal.ansiBrightGreen#019b53
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#1ca0be
terminal.ansiGreen#01779b
terminal.ansiMagenta#01779b
terminal.ansiRed#ff0000
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#d3f3fc
terminal.background#d3f3fc
terminal.border#6a819e18
terminal.foreground#008c96
terminal.selectionBackground#008c96
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#0a0a0a66
textLink.activeForeground#6cc1d9
textLink.foreground#008c96
textPreformat.foreground#d7ba7d
textSeparator.foreground#ffffff2e
titleBar.activeBackground#008c96
titleBar.activeForeground#eeefff
titleBar.border#d3f3fc
titleBar.inactiveBackground#d3f3fc
titleBar.inactiveForeground#008c96
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#052e2e
welcomePage.buttonBackground#d3f3fc
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, 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}!`;
}