Iceberg Theme

Name: Iceberg Theme
Author: cocopon

Publisher: cocoponThemes in package: 2

Bluish color theme

GitHub

Color themes

VS Code preview

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

Iceberg Theme — Iceberg

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.background#161821
activityBar.foreground#c6c8d1
activityBar.inactiveForeground#6b7089
activityBarBadge.background#84a0c6
activityBarBadge.foreground#161821
badge.background#6b708920
badge.foreground#6b7089
breadcrumb.activeSelectionForeground#c6c8d1
breadcrumb.background#161821
breadcrumb.focusForeground#c6c8d1
breadcrumb.foreground#6b7089
breadcrumbPicker.background#1e2132
button.background#c6c8d1
button.foreground#161821
button.hoverBackground#d2d4de
debugConsole.errorForeground#e27878
debugConsole.infoForeground#89b8c2
debugConsole.sourceForeground#c6c8d1
debugConsole.warningForeground#e2a478
debugConsoleInputIcon.foreground#c6c8d1
debugIcon.breakpointCurrentStackframeForeground#e2a478
debugIcon.breakpointDisabledForeground#6b7089
debugIcon.breakpointForeground#e27878
debugIcon.breakpointStackframeForeground#b4be82
debugIcon.breakpointUnverifiedForeground#6b7089
debugIcon.continueForeground#84a0c6
debugIcon.disconnectForeground#e278784d
debugIcon.pauseForeground#84a0c6
debugIcon.restartForeground#b4be82
debugIcon.startForeground#b4be82
debugIcon.stepBackForeground#84a0c6
debugIcon.stepIntoForeground#84a0c6
debugIcon.stepOutForeground#84a0c6
debugIcon.stepOverForeground#84a0c6
debugIcon.stopForeground#e27878
debugTokenExpression.boolean#a093c7
debugTokenExpression.error#e27878
debugTokenExpression.name#c6c8d1
debugTokenExpression.number#a093c7
debugTokenExpression.string#89b8c2
debugTokenExpression.value#a093c7
debugToolBar.background#1e2132
descriptionForeground#6b7089
diffEditor.insertedTextBackground#b4be8220
diffEditor.removedTextBackground#e2787820
dropdown.background#0f1117
dropdown.border#0f1117
dropdown.foreground#c6c8d1
editor.background#161821
editor.findMatchBackground#e2a47880
editor.findMatchHighlightBackground#e2a47840
editor.foldBackground#1e2132
editor.foreground#c6c8d1
editor.lineHighlightBackground#1e2132
editor.rangeHighlightBackground#e2a4781a
editor.selectionBackground#272c42
editor.wordHighlightBackground#84a0c640
editor.wordHighlightStrongBackground#84a0c680
editorActionList.background#1e2132
editorActionList.focusBackground#2a3158
editorActionList.focusForeground#cdd1e6
editorActionList.foreground#c6c8d1
editorBracketHighlight.foreground1#84a0c6
editorBracketHighlight.foreground2#89b8c2
editorBracketHighlight.foreground3#b4be82
editorBracketHighlight.foreground4#e2a478
editorBracketHighlight.foreground5#a093c7
editorBracketHighlight.foreground6#00000000
editorBracketHighlight.unexpectedBracket.foreground#e27878
editorBracketMatch.background#3f455e
editorBracketMatch.border#3f455e
editorCursor.foreground#c6c8d1
editorError.foreground#e27878
editorGroup.border#0e1015
editorGroup.dropBackground#84a0c620
editorGroupHeader.tabsBackground#0e1015
editorGutter.addedBackground#b4be8280
editorGutter.background#1e2132
editorGutter.deletedBackground#e2787880
editorGutter.modifiedBackground#b4be8280
editorHoverWidget.background#1e2132
editorHoverWidget.border#1e2132
editorHoverWidget.foreground#c6c8d1
editorHoverWidget.statusBarBackground#1e2132
editorIndentGuide.activeBackground1#242940
editorIndentGuide.background1#24294040
editorLightBulb.foreground#e2a478
editorLightBulbAutoFix.foreground#89b8c2
editorLineNumber.activeForeground#cdd1e6
editorLineNumber.foreground#444b71
editorLink.activeForeground#84a0c6
editorMarkerNavigation.background#1e2132
editorOverviewRuler.addedForeground#b4be8280
editorOverviewRuler.border#24294040
editorOverviewRuler.deletedForeground#e2787880
editorOverviewRuler.errorForeground#e27878
editorOverviewRuler.infoForeground#95c4ce80
editorOverviewRuler.modifiedForeground#b4be8280
editorOverviewRuler.warningForeground#e2a47880
editorOverviewRuler.wordHighlightForeground#84a0c680
editorRuler.foreground#242940
editorSuggestWidget.selectedBackground#c6c8d120
editorWarning.foreground#e2a478
editorWhitespace.foreground#242940
editorWidget.background#1e2132
editorWidget.border#1e2132
extensionButton.prominentBackground#c6c8d1
extensionButton.prominentForeground#161821
extensionButton.prominentHoverBackground#d2d4de
focusBorder#242940
foreground#c6c8d1
gitDecoration.addedResourceForeground#b4be82
gitDecoration.conflictingResourceForeground#e2a478
gitDecoration.deletedResourceForeground#e27878
gitDecoration.ignoredResourceForeground#6b7089
gitDecoration.modifiedResourceForeground#89b8c2
gitDecoration.renamedResourceForeground#a093c7
gitDecoration.stageDeletedResourceForeground#e27878
gitDecoration.stageModifiedResourceForeground#89b8c2
gitDecoration.submoduleResourceForeground#6b7089
gitDecoration.untrackedResourceForeground#6b7089
input.background#0f1117
input.foreground#c6c8d1
input.placeholderForeground#c6c8d140
inputOption.activeBorder#84a0c6
inputValidation.errorBackground#53353b
inputValidation.errorBorder#e27878
list.activeSelectionBackground#1e2132
list.activeSelectionForeground#c6c8d1
list.dropBackground#84a0c620
list.errorForeground#e27878
list.focusForeground#cdd1e6
list.highlightForeground#b4be82
list.hoverBackground#1e2132
list.inactiveSelectionBackground#1e2132
list.warningForeground#e2a478
menu.background#1e2132
menu.foreground#c6c8d1
menu.selectionBackground#2a3158
menu.selectionForeground#cdd1e6
menu.separatorBackground#161821
menubar.selectionBackground#1e2132
menubar.selectionForeground#c6c8d1
merge.currentContentBackground#a093c720
merge.currentHeaderBackground#a093c740
merge.incomingContentBackground#89b8c220
merge.incomingHeaderBackground#89b8c240
notificationCenterHeader.background#1e2132
notifications.background#1e2132
notifications.border#161821
notifications.foreground#c6c8d1
notificationsErrorIcon.foreground#e27878
notificationsInfoIcon.foreground#89b8c2
notificationsWarningIcon.foreground#e2a478
panel.background#161821
panel.border#0e1015
panelTitle.activeForeground#c6c8d1
panelTitle.inactiveForeground#6b7089
peekView.border#242940
peekViewEditor.background#161821
peekViewEditor.matchHighlightBackground#e2a47840
peekViewEditorGutter.background#1e2132
peekViewResult.background#1e2132
peekViewResult.fileForeground#c6c8d1
peekViewResult.lineForeground#6b7089
peekViewResult.matchHighlightBackground#e2a47840
peekViewResult.selectionBackground#272c42
peekViewTitle.background#1e2132
peekViewTitleDescription.foreground#6b7089
peekViewTitleLabel.foreground#c6c8d1
pickerGroup.border#161821
pickerGroup.foreground#84a0c6
problemsErrorIcon.foreground#e27878
problemsInfoIcon.foreground#89b8c2
problemsWarningIcon.foreground#e2a478
progressBar.background#84a0c6
quickInput.background#1e2132
quickInput.foreground#6b7089
quickInputList.focusBackground#2a3158
scrollbar.shadow#0f1117
scrollbarSlider.background#24294080
scrollbarSlider.hoverBackground#242940a0
selection.background#4a548266
settings.headerForeground#c6c8d1
settings.modifiedItemIndicator#89b8c24c
sideBar.background#161821
sideBar.border#0e1015
sideBar.dropBackground#84a0c620
sideBar.foreground#c6c8d1
sideBarSectionHeader.background#242940
sideBarSectionHeader.foreground#6b7089
statusBar.background#0e1015
statusBar.debuggingBackground#0e1015
statusBar.debuggingForeground#6b7089
statusBar.foreground#6b7089
statusBar.noFolderBackground#0e1015
statusBar.noFolderForeground#6b7089
statusBarItem.errorBackground#e27878
statusBarItem.errorForeground#161821
statusBarItem.hoverBackground#6b708920
symbolIcon.classForeground#e2a478
symbolIcon.constructorForeground#e2a478
symbolIcon.enumeratorForeground#e2a478
symbolIcon.enumeratorMemberForeground#89b8c2
symbolIcon.eventForeground#e2a478
symbolIcon.fieldForeground#89b8c2
symbolIcon.functionForeground#a093c7
symbolIcon.interfaceForeground#89b8c2
symbolIcon.methodForeground#a093c7
symbolIcon.variableForeground#89b8c2
tab.activeBackground#161821
tab.activeForeground#c6c8d1
tab.activeModifiedBorder#89b8c2
tab.border#0e1015
tab.hoverBackground#1e2132
tab.inactiveBackground#0e1015
tab.inactiveForeground#6b7089
tab.inactiveModifiedBorder#89b8c280
tab.unfocusedActiveForeground#6b7089
tab.unfocusedInactiveForeground#6b708980
terminal.ansiBlack#1e2132
terminal.ansiBlue#84a0c6
terminal.ansiBrightBlack#6b7089
terminal.ansiBrightBlue#91acd1
terminal.ansiBrightCyan#95c4ce
terminal.ansiBrightGreen#c0ca8e
terminal.ansiBrightMagenta#ada0d3
terminal.ansiBrightRed#e98989
terminal.ansiBrightWhite#d2d4de
terminal.ansiBrightYellow#e9b189
terminal.ansiCyan#89b8c2
terminal.ansiGreen#b4be82
terminal.ansiMagenta#a093c7
terminal.ansiRed#e27878
terminal.ansiWhite#c6c8d1
terminal.ansiYellow#e2a478
terminal.foreground#c6c8d1
terminal.selectionBackground#4a548266
terminalCommandDecoration.defaultBackground#6b7089
terminalCommandDecoration.errorBackground#e27878
terminalCommandDecoration.successBackground#84a0c6
textLink.activeForeground#84a0c6
textLink.foreground#84a0c6
titleBar.activeBackground#0e1015
titleBar.activeForeground#c6c8d1
titleBar.inactiveBackground#0e1015
titleBar.inactiveForeground#6b7089
tree.indentGuidesStroke#242940
widget.shadow#0f1117

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6b7089	—
constant, support.constant	#a093c7	—
entity.other.attribute-name	#a093c7	—
entity.name.class	#c6c8d1	—
entity.name.function	#c6c8d1	—
entity.name.section	#e2a478	—
entity.name.tag	#84a0c6	—
keyword, keyword.operator.expression, keyword.operator.new	#84a0c6	—
keyword.control.at-rule, keyword.control.content	#b4be82	—
keyword.function	#84a0c6	—
keyword.operator	#c6c8d1	—
keyword.other.unit	#a093c7	—
markup.bold	#d2d4de	bold
markup.fenced_code.block	#6b7089	—
markup.inline.raw.string	#a093c7	—
meta.link	#89b8c2	—
meta.brace.square	#c6c8d1	—
entity.name.function.method, markup.heading, meta.definition.method	#e2a478	—
meta.object-literal.key	#84a0c6	—
meta.tag.attributes	#a093c7	—
meta.tag.sgml.doctype	#6b7089	—
meta.type.annotation	#b4be82	—
punctuation.definition.template-expression	#b4be82	—
punctuation.definition.block	#c6c8d1	—
punctuation.definition.tag	#84a0c6	—
storage	#84a0c6	—
storage.type.function	#84a0c6	—
string	#89b8c2	—
support	#84a0c6	—
support.type.property-name	#84a0c6	—
variable.language.this	#b4be82	—
text	#c6c8d1	—
meta.diff.header	#84a0c6	—
meta.diff.range	#89b8c2	—
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css	#c6c8d1	—
markup.deleted.diff	#e27878	—
markup.inserted.diff	#b4be82	—
support.type.class.flowtype	#b4be82	—
punctuation.definition.block.tag.jsdoc	#b4be82	—
storage.type.class.jsdoc	#b4be82	—
variable.other.jsdoc	#c6c8d1	—
entity.name.import.go	#89b8c2	—
markup.underline.link	#84a0c6	—
keyword.other.important.scss	#e2a478	—
variable.interpolation.scss	#b4be82	—
variable.scss	#89b8c2	—

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