Arctic Depth

Name: Arctic Depth
Author: Marvellinus Vincent

Publisher: Marvellinus VincentThemes in package: 1

A sleek, high-contrast dark blue theme designed for developers who love rich blues and a futuristic aesthetic

GitHub

VS Code preview

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

Arctic Depth — Arctic Depth

fetchUser.ts

index.ts

README.md

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#28323d
activityBar.background#121417
activityBar.border#121417
activityBar.foreground#E0E7EC
activityBar.inactiveForeground#5E81AC80
activityBarBadge.background#81a1c1
activityBarBadge.foreground#e0e7ec
badge.background#5E81AC
badge.foreground#FFFFFF
breadcrumb.background#121417
breadcrumb.focusForeground#40e0d0
breadcrumb.foreground#81a1c1
button.background#4A6A8C
button.foreground#a5d2ff
button.hoverBackground#3D5A80
button.secondaryBackground#1A1C21
button.secondaryForeground#E0E7EC
button.secondaryHoverBackground#1E2025
charts.blue#5E81AC
charts.foreground#E0E7EC
charts.green#5E81AC
charts.lines#5E81AC80
charts.orange#F9C74F
charts.purple#5E81AC80
charts.red#EE6C7D
charts.yellow#F9C74F
debugIcon.continueForeground#5E81AC
debugIcon.disconnectForeground#EE6C7D
debugIcon.pauseForeground#F9C74F
debugIcon.restartForeground#5E81AC
debugIcon.startForeground#5E81AC
debugIcon.stepIntoForeground#5E81AC
debugIcon.stepOutForeground#5E81AC
debugIcon.stepOverForeground#5E81AC
debugIcon.stopForeground#EE6C7D
debugToolBar.background#121417
debugToolBar.border#1a1c21
descriptionForeground#5E81AC80
diffEditor.border#444444
diffEditor.insertedTextBackground#5E81AC20
diffEditor.insertedTextBorder#7F9BC540
diffEditor.removedTextBackground#EE6C7D20
diffEditor.removedTextBorder#EE6C7D40
dropdown.background#1A1C21
dropdown.border#1A1C21
dropdown.foreground#add0e8
dropdown.listBackground#1A1C21
editor.background#171a22
editor.findMatchBackground#5E81AC80
editor.findMatchBorder#45516080
editor.findMatchHighlightBackground#9DB5D960
editor.findMatchHighlightBorder#9db5d960
editor.findRangeHighlightBackground#5e81ac30
editor.findRangeHighlightBorder#171a22
editor.foldBackground#4084cd60
editor.hoverHighlightBackground#2b3b6b
editor.inactiveSelectionBackground#5E81AC30
editor.lineHighlightBackground#1E2025
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#494831
editor.rangeHighlightBorder#494831
editor.selectionBackground#4A6A8C60
editor.selectionHighlightBackground#495064
editor.selectionHighlightBorder#1c1e24
editor.wordHighlightBackground#7F9BC530
editor.wordHighlightBorder#7F9BC530
editor.wordHighlightStrongBackground#7F9BC530
editor.wordHighlightStrongBorder#7F9BC530
editorBracketMatch.background#5E81AC40
editorBracketMatch.border#5E81AC
editorCodeLens.foreground#b07878
editorCursor.background#171a22
editorCursor.foreground#5E81AC
editorError.background#e6272700
editorError.border#e6272700
editorError.foreground#f78070
editorGroup.border#171A22
editorGroupHeader.border#121417
editorGroupHeader.tabsBackground#121417
editorGutter.addedBackground#50861b
editorGutter.background#121417
editorGutter.deletedBackground#f78070
editorGutter.foldingControlForeground#5d81ab
editorGutter.modifiedBackground#0c7d9d
editorHint.foreground#5E81AC
editorHoverWidget.background#1e2025
editorHoverWidget.border#2f3a47
editorHoverWidget.foreground#e0e7ec
editorInfo.background#323d49
editorInfo.border#4490bf00
editorInfo.foreground#5E81AC
editorLineNumber.activeForeground#5E81AC
editorLineNumber.foreground#5e81ac80
editorLink.activeForeground#5cb2ff
editorMarkerNavigation.background#2e2f34
editorMarkerNavigationError.background#f78070
editorMarkerNavigationInfo.background#5e81ac
editorMarkerNavigationWarning.background#f9c74f
editorOverviewRuler.background#171a22
editorOverviewRuler.border#171a22
editorRuler.foreground#171a22
editorSuggestWidget.background#121417
editorSuggestWidget.border#1E2025
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#7F9BC5
editorSuggestWidget.selectedBackground#3f79c040
editorWarning.background#d3c29a20
editorWarning.border#171a22
editorWarning.foreground#F9C74F
editorWhitespace.foreground#5E81AC30
editorWidget.background#1A1C21
editorWidget.border#1E2025
editorWidget.foreground#7ac7e6e1
editorWidget.resizeBorder#1a1c21
errorForeground#f78070
extensionBadge.remoteBackground#5E81AC
extensionBadge.remoteForeground#abb5be
extensionButton.prominentBackground#5E81AC
extensionButton.prominentForeground#abb5be
extensionButton.prominentHoverBackground#5e81ac20
focusBorder#5E81AC
foreground#466180
gitDecoration.addedResourceForeground#40E0D0
gitDecoration.conflictingResourceForeground#f78070
gitDecoration.deletedResourceForeground#f78070
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#F9C74F
gitDecoration.stageDeletedResourceForeground#e83d20
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#bae67e
icon.foreground#5E81AC
input.background#1A1C21
input.border#1A1C21
input.foreground#add0e8
input.placeholderForeground#add0e8
inputOption.activeBackground#5E81AC40
inputOption.activeBorder#1a1c21
inputOption.activeForeground#81a1c1
inputValidation.errorBackground#e6272700
inputValidation.errorBorder#e6272700
inputValidation.errorForeground#f78070
inputValidation.infoBackground#5E81AC20
inputValidation.infoBorder#1a1c21
inputValidation.warningBackground#F9C74F20
inputValidation.warningBorder#F9C74F
list.activeSelectionBackground#5E81AC40
list.activeSelectionForeground#40E0D0
list.dropBackground#5E81AC20
list.focusBackground#5E81AC40
list.focusForeground#40E0D0
list.focusOutline#5E81AC
list.highlightForeground#9DB5D9
list.hoverBackground#5E81AC20
list.hoverForeground#40E0D0
list.inactiveSelectionBackground#5E81AC20
list.inactiveSelectionForeground#40E0D0
list.invalidItemForeground#f78070
listFilterWidget.background#2f3b54
listFilterWidget.outline#2f3b54
menu.background#1a222a
menu.border#1a222a
menu.foreground#81a1c1
menu.selectionBackground#094771
menu.selectionBorder#094771
menu.selectionForeground#77bbff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#5e81ac20
menubar.selectionBorder#5e81ac20
menubar.selectionForeground#77bbff
merge.commonContentBackground#383838
merge.commonHeaderBackground#282828
merge.currentContentBackground#27403b
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384b
merge.incomingHeaderBackground#395f8f
notebook.cellBorderColor#1E2025
notebook.cellToolbarSeparator#1E2025
notebook.focusedCellBorder#5E81AC
notebook.focusedEditorBorder#5E81AC
notebook.selectedCellBorder#5E81AC
notebookStatusErrorIcon.foreground#f78070
notebookStatusRunningIcon.foreground#F9C74F
notebookStatusSuccessIcon.foreground#5E81AC
notificationCenter.border#1E2025
notificationCenterHeader.background#121417
notificationCenterHeader.foreground#81a1c1
notifications.background#1A1C21
notifications.border#1E2025
notifications.foreground#abb5be
notificationsErrorIcon.foreground#f78070
notificationsInfoIcon.foreground#9cdcfe
notificationsWarningIcon.foreground#F9C74F
notificationToast.border#1E2025
panel.background#121417
panel.border#121417
panelSection.border#1E2025
panelSection.dropBackground#5E81AC40
panelTitle.activeBorder#5E81AC
panelTitle.activeForeground#add0e8
panelTitle.inactiveForeground#5E81AC80
peekView.border#5E81AC
peekViewEditor.background#121417
peekViewEditor.matchHighlightBackground#5e81ac40
peekViewEditor.matchHighlightBorder#5e81ac80
peekViewEditorGutter.background#121417
peekViewResult.background#121417
peekViewResult.fileForeground#E0E7EC
peekViewResult.lineForeground#5E81AC80
peekViewResult.matchHighlightBackground#5e81ac30
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#E0E7EC
peekViewTitle.background#1A1C21
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#E0E7EC
pickerGroup.border#6599ea
pickerGroup.foreground#7ac7e6e1
progressBar.background#5E81AC
scrollbar.shadow#363a6030
scrollbarSlider.activeBackground#4A6A8C
scrollbarSlider.background#5E81AC80
scrollbarSlider.hoverBackground#5E81AC
selection.background#5E81AC40
sideBar.background#121417
sideBar.border#121417
sideBar.foreground#8695b799
sideBarSectionHeader.background#121417
sideBarSectionHeader.border#121417
sideBarSectionHeader.foreground#81a1c1
sideBarTitle.foreground#81a1c1
statusBar.background#121417
statusBar.border#121417
statusBar.debuggingBackground#121417
statusBar.debuggingBorder#121417
statusBar.debuggingForeground#81a1c1
statusBar.foreground#81a1c1
statusBar.noFolderBackground#121417
statusBar.noFolderBorder#121417
statusBar.noFolderForeground#81a1c1
statusBarItem.activeBackground#121417
statusBarItem.hoverBackground#dde1e820
statusBarItem.prominentBackground#121417
statusBarItem.prominentForeground#81a1c1
statusBarItem.prominentHoverBackground#292a2c20
statusBarItem.prominentHoverForeground#81a1c1
statusBarItem.remoteBackground#121417
statusBarItem.remoteForeground#81a1c1
statusBarItem.remoteHoverBackground#dde1e820
tab.activeBackground#1A1C21
tab.activeBorder#7F9BC5
tab.activeForeground#E0E7EC
tab.activeModifiedBorder#5E81AC
tab.border#121417
tab.hoverBackground#5e81ac20
tab.hoverBorder#5e81ac20
tab.hoverForeground#40e0d0
tab.inactiveBackground#121417
tab.inactiveForeground#81a1c1
tab.inactiveModifiedBorder#5E81AC80
tab.unfocusedHoverBackground#121417
terminal.ansiBlack#171a22
terminal.ansiBlue#5E81AC
terminal.ansiBrightBlack#1E2025
terminal.ansiBrightBlue#7F9BC5
terminal.ansiBrightCyan#00E5E5
terminal.ansiBrightGreen#7F9BC5
terminal.ansiBrightMagenta#7F9BC580
terminal.ansiBrightRed#FF8A9A
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFDF80
terminal.ansiCyan#06B8B8
terminal.ansiGreen#4FC414
terminal.ansiMagenta#5E81AC80
terminal.ansiRed#EE6C7D
terminal.ansiWhite#E0E7EC
terminal.ansiYellow#F9C74F
terminal.background#121417
terminal.border#1E2025
terminal.foreground#78bae7
terminal.selectionBackground#5E81AC40
terminalCommandDecoration.defaultBackground#5E81AC
terminalCursor.background#5E81AC
terminalCursor.foreground#5E81AC
textLink.foreground#77bbff
titleBar.activeBackground#121417
titleBar.activeForeground#81a1c1
titleBar.border#121417
titleBar.inactiveBackground#121417
titleBar.inactiveForeground#5E81AC80
tree.indentGuidesStroke#00000000
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, source	#6d9ed4	—
comment, punctuation.definition.comment	#6a7a8a	italic
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig	#6da8b8	—
invalid, invalid.illegal	#f78070	—
keyword, storage.type, storage.modifier	#c3a6ff	—
constant.numeric, support.constant, constant.character, constant.escape	#F8C8D2	—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks	#c0c0c0	—
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe	#f681a6	—
support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite	#40E0D0	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object	#bae67e	—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks	#78c490	—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter	#d4b56a	—
meta.block variable.other	#68b6ff	—
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property	#d1cece	—
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key	#d4a860	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name, support.variable.object.node, support.variable.object.process	#77d8eb	—
entity.name.module.js, variable.import.parameter.js	#f78070	—
variable.language	#9cdcfe	italic
entity.name.method.js	#9cdcfe	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#9cdcfe	—
entity.other.attribute-name	#ffae57	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffae57	—
entity.other.attribute-name.class, punctuation.definition.entity.css	#ffae57	—
source.sass keyword.control	#9cdcfe	—
markup.inserted	#88dfa6	—
markup.deleted	#f78070	—
markup.changed	#88C0D0	—
string.regexp	#ffae57	—
constant.character.escape	#40E0D0	—
url, link, uri	—	underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag	#E6E6E6	—
source.json meta.structure.dictionary.json support.type.property-name.json	#9cdcfe	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffae57	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9cdcfe	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffae57	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9cdcfe	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffae57	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9cdcfe	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffae57	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9cdcfe	—
markup.italic	#f78070	italic
markup.bold	#f78070	bold
markup.underline	#88dfa6	underline
markup.strike	#ffcc66	italic
markup.quote	#9cdcfe	italic
markup.raw.block	#ffae57	—
markup.table	#9cdcfe	—
text.html.markdown, punctuation.definition.list_item.markdown	#83b4ed	—
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown	#40E0D0	—
text.html.markdown meta.dummy.line-break	#83b4ed	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown	#88dfa6	—
markup.quote, punctuation.definition.blockquote.markdown	#5ccfe6	italic
string.other.link.title.markdown	#ffcc66	underline
markup.raw.block.fenced.markdown	#d7dce2	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#83b4ed	—
variable.language.fenced.markdown	#83b4ed
meta.separator	#83b4ed
token.info-token	#9cdcfe	—
token.warn-token	#ffcc66	—
token.error-token	#f78070	—
token.debug-token	#88C0D0	—

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