New Ocean

Name: New Ocean
Author: CarlosVQ

Publisher: CarlosVQThemes in package: 1

New Ocean theme, inspired in base16 colors

Open in VS Code GitHub

VS Code preview

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

New Ocean — New Ocean

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#051218
activityBar.border#081620
activityBar.foreground#d8dee9
activityBarBadge.background#4178A3
activityBarBadge.foreground#d8dee9
badge.background#0d1a24
badge.foreground#d8dee9
button.background#5fb3b3
button.hoverBackground#4e9b9b
dropdown.background#0d1a24
dropdown.border#6699cc
dropdown.foreground#ffffff
editor.background#0c2131
editor.foreground#cdd3de
editor.inactiveSelectionBackground#304251
editor.lineHighlightBackground#65737e55
editor.selectionBackground#304251
editorCursor.foreground#c0c5ce
editorGroupHeader.noTabsBackground#0c2131
editorGroupHeader.tabsBackground#0d1a24
editorGroupHeader.tabsBorder#081620
editorHoverWidget.background#15262E
editorHoverWidget.border#ffffff16
editorIndentGuide.background#304251
editorLineNumber.foreground#707880
editorRuler.foreground#ffffff16
editorSuggestWidget.background#0d1a24
editorSuggestWidget.border#6699cc
editorSuggestWidget.selectedBackground#15262E
editorWhitespace.foreground#65737e
editorWidget.background#15262E
editorWidget.border#ffffff22
errorForeground#ec5f67
focusBorder#0d1a24
gitDecoration.conflictingResourceForeground#b71c1c
gitDecoration.deletedResourceForeground#b71c1c
gitDecoration.modifiedResourceForeground#6699cc
gitDecoration.untrackedResourceForeground#99c794
input.background#0d1a24
inputValidation.errorBackground#ec5f67
inputValidation.infoBackground#99c794
list.activeSelectionBackground#32424c
list.errorForeground#b71c1c
list.hoverBackground#32424c
list.inactiveSelectionBackground#0d1a24
list.warningForeground#f9a825
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#ffffff33
scrollbarSlider.background#ffffff22
scrollbarSlider.hoverBackground#ffffff33
sideBar.background#0d1a24
sideBar.border#081620
sideBar.foreground#64727f
sideBarSectionHeader.background#0d1a24
sideBarSectionHeader.foreground#64727f
statusBar.background#02141b
statusBar.border#051218
statusBar.foreground#71757e
statusBar.noFolderBackground#0d1a24
statusBar.noFolderBorder#0d1a24
tab.activeBackground#0d1a24
tab.activeBorder#fff
tab.activeForeground#e6dfdf
tab.border#0d1a24
tab.inactiveBackground#0d1a24
terminal.ansiBlack#0d1a24
terminal.ansiBlue#6699cc
terminal.ansiBrightBlack#65737e
terminal.ansiBrightBlue#6699cc
terminal.ansiBrightCyan#5fb3b3
terminal.ansiBrightGreen#99c794
terminal.ansiBrightMagenta#c594c5
terminal.ansiBrightRed#ec5f67
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fac863
terminal.ansiCyan#5fb3b3
terminal.ansiGreen#99c794
terminal.ansiMagenta#c594c5
terminal.ansiRed#ec5f67
terminal.ansiWhite#ffffff
terminal.ansiYellow#fac863
terminal.background#0c2131
terminal.foreground#c0c5ce
terminal.selectionBackground#4f5b6677
terminalCursor.background#0d1a24
terminalCursor.foreground#c0c5ce
titleBar.activeBackground#dadada
titleBar.activeForeground#000
titleBar.inactiveBackground#fafafa
titleBar.inactiveForeground#666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#65737e	—
variable	#CDD3DE	—
keyword, storage.type, storage.modifier	#C594C5	—
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#70AAAB	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#EB606B	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level	#6699CC	—
support.other.variable, string.other.link	#F2777A	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#FC919E	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#99C794	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#FAC863	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#EC5F67	—
variable.language	#EC5F67	italic
entity.name.method.js	#D8DEE9	—
meta.method.js entity.name.function.js, variable.function.constructor	#D8DEE9	—
entity.other.attribute-name	#BB80B3	—
markup.inserted	#99C794	—
markup.deleted	#EC5F67	—
markup.changed	#BB80B3	—
string.regexp	#5FB3B3	—
constant.character.escape	#5FB3B3	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#AB7967	—
entity.name.filename.find-in-files	#99C794	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#6699CC	italic
source.js constant.other.object.key.js string.unquoted.label.js	#EC5F67	italic
object	#cdebf7	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
meta.object-literal.key.js	#99C794	—
keyword.control.import.js, keyword.control.from.js, keyword.control.export.js	#649FAB	—
punctuation.definition.block.js, meta.jsx.children.js, meta.brace.round.js, meta.brace.square.js, punctuation.definition.binding-pattern.object.js, support.variable.property.dom.js, support.variable.dom.js	#CDD3DE	—
entity.other.inherited-class.js	#EC5F67	—

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