Pastel Underwater Light Contrast

Name: Pastel Underwater Light Contrast
Author: dimritium

Publisher: dimritiumThemes in package: 1

Pastel coloured theme

GitHub

VS Code preview

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

Pastel Underwater Light Contrast — pastel underwater

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#eeddec
activityBar.activeBorder#83577D
activityBar.background#F5F0EC
activityBar.border#e5e2d4
activityBar.dropBorder#DDDBD8
activityBar.foreground#605a52
activityBar.inactiveForeground#9E9A95
activityBarBadge.background#7686A9
activityBarBadge.foreground#F7F5F2
badge.background#DDDBD8
badge.foreground#605a52
banner.background#556995
banner.foreground#F7F5F2
banner.iconForeground#EBECEF
breadcrumb.activeSelectionForeground#83577D
breadcrumb.background#F7F5F2
breadcrumb.focusForeground#706A63
breadcrumb.foreground#8F8A84
button.background#556995
button.foreground#F7F5F2
button.hoverBackground#66789F
button.secondaryBackground#83577De0
button.secondaryForeground#F5F0EC
button.secondaryHoverBackground#8F6789e0
checkbox.background#F7F5F2
checkbox.border#7F7A73
checkbox.foreground#83577D
commandCenter.border#fcf8e8
debugExceptionWidget.background#F7F5F2
debugExceptionWidget.border#DDDBD8
debugToolBar.background#F5F0EC
debugToolBar.border#F5F0EC
descriptionForeground#605a52
diffEditor.border#DDDBD8
diffEditor.diagonalFill#DDDBD8
diffEditor.insertedTextBackground#D3D5C533
diffEditor.removedTextBackground#D0B9B633
dropdown.background#F7F5F2
dropdown.border#9E9A95
dropdown.foreground#605a52
editor.background#f8f4ed
editor.findMatchBackground#7b94e1d0
editor.findMatchBorder#55699544
editor.findMatchHighlightBackground#7b94e150
editor.findMatchHighlightBorder#55599544
editor.findRangeHighlightBackground#7b94e150
editor.foreground#605a52
editor.hoverHighlightBackground#5569951d
editor.inactiveSelectionBackground#BEBBB633
editor.lineHighlightBorder#BEBBB633
editor.linkedEditingBackground#F5F0EC
editor.rangeHighlightBackground#F0EBED33
editor.rangeHighlightBorder#F0EBED33
editor.selectionHighlightBackground#83577D11
editor.selectionHighlightBorder#E4DAE022
editor.symbolHighlightBackground#83577D11
editor.symbolHighlightBorder#83577D33
editor.wordHighlightBackground#83577D11
editor.wordHighlightBorder#c3c0b5
editor.wordHighlightStrongBackground#83577D11
editor.wordHighlightStrongBorder#83577D33
editorBracketHighlight.foreground1#ab5bb8e0
editorBracketHighlight.foreground2#cd8238e0
editorBracketHighlight.foreground3#609cc2e0
editorBracketHighlight.foreground4#57ac40e0
editorBracketHighlight.foreground5#36ada1e0
editorBracketHighlight.foreground6#ab6862e0
editorBracketMatch.background#daf3a0e0
editorBracketMatch.border#DDDBD8
editorCodeLens.foreground#9E9A95
editorCursor.background#F7F5F2
editorCursor.foreground#8795B3
editorError.foreground#8F5652
editorGhostText.foreground#BEBBB6
editorGroup.border#CDCBC7
editorGroup.dropBackground#CCB9C744
editorGroup.emptyBackground#F7F5F2
editorGroupHeader.noTabsBackground#F5F0EC
editorGroupHeader.tabsBackground#ece8e8
editorGroupHeader.tabsBorder#e5e2d4
editorGutter.addedBackground#AAAE92
editorGutter.background#f8f4ed
editorGutter.commentRangeForeground#7F7A73
editorGutter.deletedBackground#C6A9A6
editorGutter.foldingControlForeground#9E9A95
editorGutter.modifiedBackground#A9B2C7
editorHint.border#BEBBB6
editorHint.foreground#7F7A73
editorHoverWidget.background#F5F0EC
editorHoverWidget.border#BEBBB6
editorHoverWidget.foreground#605a52
editorIndentGuide.activeBackground#DDDBD8
editorIndentGuide.background#ECEBE8
editorInfo.foreground#556995
editorInlayHint.background#F5F0EC
editorInlayHint.foreground#7F7A73
editorLineNumber.activeForeground#605c59ec
editorLineNumber.foreground#CDCBC7
editorLink.activeForeground#556995
editorMarkerNavigation.background#F7F5F2
editorMarkerNavigationError.background#E6DAD8
editorMarkerNavigationInfo.background#DBDEE5
editorMarkerNavigationWarning.background#E5DED5
editorOverviewRuler.addedForeground#749B4D44
editorOverviewRuler.background#F5F0EC
editorOverviewRuler.border#ECEBE8
editorOverviewRuler.bracketMatchForeground#7F7A7388
editorOverviewRuler.currentContentForeground#477A7B44
editorOverviewRuler.deletedForeground#8F565244
editorOverviewRuler.errorForeground#8F5652dd
editorOverviewRuler.findMatchForeground#83577D88
editorOverviewRuler.incomingContentForeground#55699544
editorOverviewRuler.infoForeground#556995dd
editorOverviewRuler.modifiedForeground#55699544
editorOverviewRuler.rangeHighlightForeground#886A4488
editorOverviewRuler.selectionHighlightForeground#83577D88
editorOverviewRuler.warningForeground#886A44dd
editorOverviewRuler.wordHighlightForeground#477A7B88
editorOverviewRuler.wordHighlightStrongForeground#477A7B88
editorPane.background#fc9642
editorRuler.foreground#DDDBD8
editorSuggestWidget.background#F7F5F2
editorSuggestWidget.border#DDDBD8
editorSuggestWidget.focusHighlightForeground#F0EBED
editorSuggestWidget.foreground#605a52
editorSuggestWidget.highlightForeground#9B7896
editorSuggestWidget.selectedBackground#9B7896
editorSuggestWidget.selectedForeground#F7F5F2
editorSuggestWidget.selectedIconForeground#F0EBED
editorWarning.foreground#5aa19ce0
editorWhitespace.foreground#BEBBB6
editorWidget.background#F7F5F2
editorWidget.border#DDDBD8
editorWidget.foreground#605a52
editorWidget.resizeBorder#CDCBC7
errorForeground#8F5652
focusBorder#9B7896
foreground#605a52
gitDecoration.addedResourceForeground#749B4De0
gitDecoration.conflictingResourceForeground#5aa19ce0
gitDecoration.deletedResourceForeground#c03f36e0
gitDecoration.ignoredResourceForeground#a4a29f
gitDecoration.modifiedResourceForeground#556995
gitDecoration.stageDeletedResourceForeground#8F5652
gitDecoration.stageModifiedResourceForeground#556995
gitDecoration.submoduleResourceForeground#886A44
gitDecoration.untrackedResourceForeground#605a52
icon.foreground#605a52
input.background#F7F5F2
input.border#7F7A73
input.foreground#605a52
input.placeholderForeground#9E9A95
inputOption.activeBackground#DBDEE5
inputOption.activeBorder#DBDEE5
inputOption.activeForeground#605a52
inputValidation.errorBackground#A57773
inputValidation.errorBorder#8F5652
inputValidation.errorForeground#F7F5F2
inputValidation.infoBackground#7686A9
inputValidation.infoBorder#556995
inputValidation.infoForeground#F7F5F2
inputValidation.warningBackground#9F8768
inputValidation.warningBorder#886A44
inputValidation.warningForeground#F7F5F2
list.activeSelectionBackground#b08cabe0
list.activeSelectionForeground#F7F5F2
list.activeSelectionIconForeground#ECEBE8
list.dropBackground#DBDEE5
list.focusBackground#E4DAE0
list.focusForeground#605a52
list.focusHighlightForeground#E4DAE0
list.highlightForeground#8F6789
list.hoverBackground#F0EBED
list.hoverForeground#605a52
list.inactiveSelectionBackground#bfa1bae0
list.inactiveSelectionForeground#F7F5F2
list.inactiveSelectionIconForeground#BEBBB6
list.warningForeground#886A44
listFilterWidget.background#F7F5F2
listFilterWidget.noMatchesOutline#A57773
listFilterWidget.outline#9B7896
menu.background#F5F0EC
menu.border#BEBBB6
menu.foreground#605a52
menu.selectionBackground#83577D80
menu.selectionBorder#83577D70
menu.selectionForeground#605a52
menu.separatorBackground#BEBBB6
menubar.selectionBackground#F5F0EC
menubar.selectionFo̦reground#605a52
merge.commonContentBackground#9F876811
merge.commonHeaderBackground#9F876828
merge.currentContentBackground#477A7B11
merge.currentHeaderBackground#477A7B28
merge.incomingContentBackground#55699511
merge.incomingHeaderBackground#55699528
minimap.background#f9f3e8
minimap.errorHighlight#A57773
minimap.findMatchHighlight#BEBBB6
minimap.selectionHighlight#E4DAE0
minimap.warningHighlight#9F8768
minimapGutter.addedBackground#9DA181
minimapGutter.deletedBackground#B08884
minimapGutter.modifiedBackground#8795B3
minimapSlider.background#6c655c25
minimapSlider.hoverBackground#b3afa935
notebook.cellBorderColor#e5e2d4
notebook.focusedCellBorder#0fbda8
notebook.focusedEditorBorder#cecbbf
notebook.inactiveFocusedCellBorder#cecbbf
notificationCenter.border#ECEBE8
notificationCenterHeader.background#F5F0EC
notificationCenterHeader.foreground#605a52
notifications.background#F5F0EC
notifications.border#ECEBE8
notifications.foreground#605a52
notificationsErrorIcon.foreground#8F5652
notificationsInfoIcon.foreground#556995
notificationsWarningIcon.foreground#886A44
notificationToast.border#DDDBD8
panel.background#f2ebe4
panel.border#DDDBD8
panel.dropBorder#BEBBB6
panelSection.border#BEBBB6
panelSectionHeader.background#F0EDE7
panelTitle.activeBorder#9E9A95
panelTitle.activeForeground#565149
panelTitle.inactiveForeground#817d78
peekView.border#B9C1D1
peekViewEditor.background#F5F0EC
peekViewEditor.matchHighlightBackground#55699522
peekViewEditor.matchHighlightBorder#55699528
peekViewEditorGutter.background#F5F0EC
peekViewResult.background#F5F0EC
peekViewResult.fileForeground#605a52
peekViewResult.lineForeground#9E9A95
peekViewResult.matchHighlightBackground#83577D1d
peekViewResult.selectionBackground#83577D22
peekViewResult.selectionForeground#605a52
peekViewTitle.background#F5F0EC
peekViewTitleDescription.foreground#556995
peekViewTitleLabel.foreground#605a52
pickerGroup.border#DDDBD8
pickerGroup.foreground#605a52
progressBar.background#9B7896
sash.hoverBorder#9B7896
scrollbarSlider.activeBackground#CDCBC7
scrollbarSlider.background#e2e1dd
scrollbarSlider.hoverBackground#dddad6
searchEditor.findMatchBackground#F0EDE7
searchEditor.findMatchBorder#C2B39F33
searchEditor.textInputBorder#9F8768
selection.background#F0EBED
settings.focusedRowBackground#F5F0EC
settings.headerForeground#605a52
sideBar.background#F5F0EC
sideBar.border#e5e2d4
sideBar.dropBackground#DBDEE5
sideBar.foreground#605a52
sideBarSectionHeader.background#F5F0EC
sideBarSectionHeader.border#CDCBC7
sideBarSectionHeader.foreground#7F7A73
sideBarTitle.foreground#7F7A73
sideBySideEditor.horizontalBorder#fcf9eb
sideBySideEditor.verticalBorder#fcf9eb
statusBar.background#50B776
statusBar.debuggingBackground#B75050
statusBar.debuggingForeground#F7F5F2
statusBar.foreground#F7F5F2
statusBar.noFolderBackground#50B776
statusBar.noFolderForeground#F7F5F2
statusBarItem.activeBackground#9a7766e0
statusBarItem.errorBackground#d8281b
statusBarItem.errorForeground#E6DAD8
statusBarItem.hoverBackground#5c81b6e0
statusBarItem.remoteBackground#b75076d0
statusBarItem.remoteForeground#F7F5F2
symbolIcon.booleanForeground#a100d6
symbolIcon.classForeground#2059cb
symbolIcon.colorForeground#a100d6
symbolIcon.constantForeground#c91d1d
symbolIcon.constructorForeground#2059cb
symbolIcon.enumeratorForeground#2059cb
symbolIcon.enumeratorMemberForeground#956a04
symbolIcon.fieldForeground#956a04
symbolIcon.functionForeground#007aa3
symbolIcon.interfaceForeground#2059cb
symbolIcon.keyForeground#956a04
symbolIcon.keywordForeground#c20aac
symbolIcon.methodForeground#007aa3
symbolIcon.moduleForeground#2059cb
symbolIcon.namespaceForeground#2059cb
symbolIcon.nullForeground#a100d6
symbolIcon.numberForeground#a100d6
symbolIcon.operatorForeground#981aff
symbolIcon.packageForeground#2059cb
symbolIcon.propertyForeground#956a04
symbolIcon.stringForeground#3b7203
symbolIcon.structForeground#2059cb
symbolIcon.textForeground#3b7203
symbolIcon.typeParameterForeground#2059cb
tab.activeBackground#f3e1da
tab.activeBorder#F7F5F2
tab.activeForeground#605a52
tab.activeModifiedBorder#6547b8
tab.border#ECEBE8
tab.hoverBackground#f5dcd3
tab.inactiveBackground#F5F0EC
tab.inactiveForeground#8F8A84
tab.inactiveModifiedBorder#9b2c2c
tab.lastPinnedBorder#DDDBD8
terminal.ansiBlack#605a52
terminal.ansiBlue#72a9cbe0
terminal.ansiBrightBlack#d69d52
terminal.ansiBrightBlue#7e9fe7
terminal.ansiBrightCyan#49c9c1e0
terminal.ansiBrightGreen#4cdd2fe0
terminal.ansiBrightMagenta#f372e2
terminal.ansiBrightRed#e25e54
terminal.ansiBrightWhite#F7F5F2
terminal.ansiBrightYellow#886A44
terminal.ansiCyan#3f9393e0
terminal.ansiGreen#8fc35a
terminal.ansiMagenta#d98dcee0
terminal.ansiRed#d3756de0
terminal.ansiWhite#F7F5F2
terminal.ansiYellow#b8be4de0
terminal.border#BEBBB6
terminal.foreground#605a52
terminal.selectionBackground#eeddece0
terminalCursor.background#F5F0EC
terminalCursor.foreground#91c951d0
textBlockQuote.background#F5F0EC
textBlockQuote.border#B6A48C
textCodeBlock.background#F5F0EC
textLink.activeForeground#83577D
textLink.foreground#556995
textPreformat.foreground#886A44
textSeparator.foreground#7F7A73
titleBar.activeBackground#F5F0EC
titleBar.activeForeground#9f9c96
titleBar.border#e5e2d4
titleBar.inactiveBackground#F7F5F2
titleBar.inactiveForeground#BEBBB6
tree.indentGuidesStroke#BEBBB6
tree.tableColumnsBorder#BEBBB6
walkThrough.embeddedEditorBackground#F7F5F2
widget.shadow#CDCBC7
window.activeBorder#83577D
window.inactiveBorder#BEBBB6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.graphql, variable.object.property, variable.other.assignment, variable.other.block.crystal, variable.other.block, variable.other.declaration, variable.other.object.js.jsx, variable.other.object.tsx, variable.other.object, variable.other.php, variable.other.positional.shell, variable.other.readwrite.instance.crystal, variable.other.readwrite, variable.other.ruby, variable.other, variable.scss	#3E3D39	—
constant.other.caps, source.shell variable.other, variable.language.self, variable.language.special.self, variable.language.super, variable.language.this, variable.other.alias.yaml, variable.other.class.php, variable.other.constant, variable.other.global.safer.php, variable.other.readwrite.class.ruby, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special.self, variable.other.readwrite.instance.crystal, variable.other.readwrite.module	#C91D1D	—
entity.alias.import	#C91D1D	—
support.variable, support.constant.color, support.type, support.class, support.other.namespace	#2059CB	—
meta.method.declaration.js storage.type.js, support.function	#007AA3	—
meta.generic-where-clause.swift, meta.arguments.attribute.swift	#675332	—
constant, support.constant, keyword.other.unit	#A100D6	—
meta.object-literal.key, variable.other.property.js.jsx, variable.other.property.tsx, variable.other.object.property, variable.other.property, support.type.property-name	#956A04	—
meta.function-call.arguments, variable.parameter	#1A1918	—
entity.name.function	#007AA3	—
entity.name.function-call, entity.name.function.call, meta.function-call, meta.method-call entity.name.function, meta.function-call entity.name.function, meta.function.call entity.name.function	#9E4200	—
keyword.control.module, keyword.control, keyword.operator.expression.of, keyword.operator.new, keyword.other.special-method, keyword.type.go, keyword, keyword storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface, storage.type.type	#C20AAC	—
entity.name.package, entity.name.type, entity.name.class, entity.name.namespace, entity.name.module, entity.name.scope-resolution, storage.modifier.package.java, meta.inheritance-clause, entity.other.inherited-class	#2059CB	—
keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational	#0000FF	—
storage.type, keyword.type	#2059CB	—
keyword.operator	#981AFF	—
source.elixir.embedded.source, storage.modifier.import.java, string.quoted.double, string, meta.import entity.name.namespace, meta.use entity.name.namespace, meta.use entity.name.type	#3B7203	—
storage.modifier.import.java, meta.import entity.name.namespace, meta.use entity.name.namespace, meta.use entity.name.type	#3B7203	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.interpolation	#C91D1D	—
meta.brace	#54534D	—
comment.documentation, comment.block.documentation, string.quoted.docstring.multi.python, comment.block.documentation punctuation.definition.comment	#928e85	—
comment, punctuation.definition.comment, punctuation.whitespace.comment.leading.graphql	#B9B6AA	italic
comment.wildcard, meta.jsx.children	#3E3D39	—
comment.line.number-sign.flag.po, comment storage.type.class.po, storage.type.annotation, meta.attribute.rust	#675332	—
support.type.property-name.json	#C20AAC	—
meta.structure.dictionary.value support.type.property-name.json	#2059CB	—
meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#C91D1D	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#007AA3	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#956A04	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#C20AAC	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#2059CB	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#C91D1D	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#007AA3	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#956A04	—
meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value meta.structure.dictionary.value support.type.property-name.json	#C20AAC	—
meta.tag.metadata, markup.underline.link	#C20AAC	—
meta.tag.metadata.link, string.other.link.title.markdown, string.other.link.description.markdown	#C20AAC	—
markup.italic	#0000FF	—
punctuation.definition.tag	#86847C	—
meta.tag.inline, entity.name.tag.js.jsx, entity.name.tag.tsx	#007AA3	—
meta.tag.object	#2059CB	—
meta.tag.metadata.style, source.vue entity.name.tag.style.html	#C20AAC	—
meta.tag.metadata.script, source.vue entity.name.tag.script.html	#C20AAC	—
meta.tag.custom	#A100D6	—
meta.tag.structure, meta.tag, entity.name.tag.yaml, keyword.key.toml, markup.fenced_code.block, markup.inline.raw.string, fenced_code.block.language, markup.raw.block, keyword.other.definition.ini	#956A04	—
entity.other.attribute-name, meta.selector.css, source.css.scss entity.name.tag.css	#9E4200	—
heading, entity.name.section.group-title	#9E4200	—
invalid.illegal.tag-handle.yaml, text.html.markdown entity.name.tag.html, text.html.markdown punctuation.definition.tag, meta.tag.other.unrecognized, source.vue entity.name.tag.template.html	#C91D1D	—
markup.bold, punctuation.definition.bold	—	bold
markup.italic, punctuation.definition.italic, markup.quote.markdown	—	italic
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

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