Oceanic Plus

Name: Oceanic Plus
Author: Marco Scannadinari

Publisher: Marco ScannadinariThemes in package: 1

Color and UI theme based on Oceanic Next

GitHub

VS Code preview

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

Oceanic Plus — Oceanic Plus

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#111b21
activityBar.foreground#fff8
activityBarBadge.background#3d8282
badge.background#3d8282
button.background#428b8b
debugToolBar.background#141f27
dropdown.background#16242c
dropdown.border#243c49
editor.background#1b2b34
editor.findMatchBackground#5FB3B3aa
editor.findMatchHighlightBackground#719cb550
editor.foreground#cdd3de
editor.lineHighlightBackground#ffffff0a
editor.selectionBackground#fff2
editorCursor.foreground#69c
editorGroupHeader.tabsBackground#1b2b34
editorGroupHeader.tabsBorder#ffffff1a
editorHoverWidget.background#1b2b34
editorHoverWidget.border#fff2
editorIndentGuide.activeBackground#477189
editorIndentGuide.background#fff1
editorLineNumber.foreground#fff3
editorRuler.foreground#fff1
editorSuggestWidget.background#1b2b34
editorSuggestWidget.highlightForeground#5fb3b3
editorWhitespace.foreground#fff1
editorWidget.background#1b2b34
editorWidget.border#ffffff1a
focusBorder#3f657a
input.background#0003
input.border#fff1
list.activeSelectionBackground#ffffff1a
list.focusBackground#ffffff1a
list.highlightForeground#5fb3b3
list.hoverBackground#ffffff08
list.inactiveFocusBackground#fff1
list.inactiveSelectionBackground#fff1
menu.background#0d151a
menu.border#314e5f
menu.selectionBackground#1b2b34
menu.selectionBorder#1b2b34
menu.separatorBackground#2c4758
menubar.selectionBackground#142129
menubar.selectionBorder#142129
notification.background#35454E
notification.buttonBackground#369
notification.buttonForeground#fffe
notification.buttonHoverBackground#4D80B3
notification.errorBackground#EC5F67
notification.errorForeground#fffe
notification.foreground#fffe
notification.infoBackground#369
notification.infoForeground#fffe
notification.warningBackground#F99157
notification.warningForeground#fffe
pickerGroup.foreground#5fb3b3
progressBar.background#5fb3b3
scrollbar.shadow#0006
scrollbarSlider.activeBackground#fff6
scrollbarSlider.background#fff2
scrollbarSlider.hoverBackground#fff4
selection.background#fff2
sideBar.background#16242c
sideBar.border#ffffff1a
statusBar.background#0d151a
statusBar.debuggingBackground#369
statusBar.debuggingForeground#fff
statusBar.foreground#fffa
statusBar.noFolderBackground#0d151a
statusBar.noFolderForeground#fffa
tab.activeBackground#5FB3B31d
tab.activeBorder#afd8d8
tab.border#0000
tab.inactiveBackground#1b2b34
tab.inactiveForeground#fff7
tab.unfocusedActiveBorder#0000
textLink.activeForeground#afd8d8
textLink.foreground#5fb3b3
titleBar.activeBackground#0d151a
titleBar.inactiveBackground#0d151a
widget.shadow#0005

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#cdd3deff	—
comment, punctuation.definition.comment	#65737e	italic
variable	#fbc2a2	—
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, punctuation.terminator.statement	#5FB3B3	—
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, keyword.other.unit	#F99157	—
variable.parameter	#F99157	italic
constant.language.this.js	#EC5F67	italic
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.class-method.js entity.name.function.js, variable.function.constructor	#D8DEE9	—
entity.other.attribute-name	#BB80B3	italic
markup.inserted	#99C794	—
markup.deleted	#EC5F67	—
markup.changed	#BB80B3	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#F99157	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#EC5f67	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#FAC863	—
keyword.operator.quantifier.regexp	#FAC863	—
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
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FAC863	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C594C5	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#D8DEE9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#6699CC	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#AB7967	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#EC5f67	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#F99157	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FAC863	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C594C5	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

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