Deep Ocean Theme

Name: Deep Ocean Theme
Author: Kaua Lima

Publisher: Kaua LimaThemes in package: 3

A dark theme based on the depths of the ocean

Open in VS Code GitHub

Color themes

VS Code preview

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

Deep Ocean Theme — Deep Ocean - Purple

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#110e1a
activityBar.activeBorder#916bce
activityBar.background#0c0a13
activityBar.border#06080b
activityBar.foreground#9b7cce
activityBar.inactiveForeground#2f3441
activityBarBadge.background#916bce
activityBarBadge.foreground#d6d9e0
badge.background#815dbb
badge.foreground#ededed
breadcrumb.activeSelectionForeground#ade2dd
breadcrumb.background#13111B
breadcrumbPicker.background#0f111a
button.background#805db8
button.foreground#ededed
debugToolBar.background#06080b
dropdown.background#2f3441
editor.background#13111B
editor.foreground#d8d8d8
editor.lineHighlightBackground#2f344134
editor.selectionBackground#2f3441e8
editorCursor.foreground#976ecf
editorGroupHeader.tabsBackground#191624
editorHoverWidget.background#0c0a13
editorHoverWidget.border#976ecf7c
editorLineNumber.activeForeground#d8d8d8
editorSuggestWidget.background#0c0a13
editorSuggestWidget.highlightForeground#b689ff
editorSuggestWidget.selectedBackground#12101d
editorWidget.background#0c0a13
editorWidget.border#976ecf7c
editorWidget.foreground#d8d8d8
focusBorder#916bcea9
gitDecoration.ignoredResourceForeground#3f4357
input.background#1f222a
input.foreground#d8d8d8
input.placeholderForeground#c2c2c2
list.activeSelectionBackground#12101d
list.activeSelectionForeground#b689ff
list.focusBackground#12101d
list.highlightForeground#b689ff
list.hoverBackground#12101d
list.inactiveFocusBackground#12101d
list.inactiveSelectionBackground#12101d
list.inactiveSelectionForeground#a47ce6
menu.background#0c0a13
panel.background#0c0a13
panel.border#815dbb
panelTitle.activeBorder#815dbb
scrollbar.shadow#06080b
scrollbarSlider.activeBackground#916bce7c
scrollbarSlider.background#916bcea6
scrollbarSlider.hoverBackground#916bce7c
sideBar.background#0c0a13
sideBar.border#06080b
sideBar.foreground#626984
sideBarSectionHeader.background#0f0c18
sideBarSectionHeader.border#202635
sideBarSectionHeader.foreground#626984
sideBarTitle.foreground#8f9ac5
statusBar.background#0c0a13
statusBar.border#06080b
tab.activeBorderTop#916bce
tab.border#06080b
tab.hoverForeground#916bce
tab.inactiveBackground#0c0a13
terminal.background#0c0a13
terminal.foreground#d8d8d8
terminalCursor.foreground#815dbb
titleBar.activeBackground#0c0a13
titleBar.border#0f111a
titleBar.inactiveBackground#0c0a13

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#62687c	italic
variable, string constant.other.placeholder	#d8d8d8	—
constant.other.color	#cb19d8	—
string.interpolated	#9ee67d	—
invalid, invalid.illegal	#f82f51	italic underline
keyword, storage.type, storage.modifier	#e96fb4	—
keyword.operator.new	#e96fb4	italic bold
keyword.control	#e96fb4	italic
punctuation.definition.tag	#d8d8d8	—
punctuation.definition.string.begin, punctuation.definition.string.end	#81da58	—
punctuation	#e96fb4	—
constant.other.color, meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#d8d8d8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fd5e5e
meta.function-call, support.function, variable.function, entity.name.function, keyword.other.special-method	#ec9a3c	—
meta.block variable.other	#e6edff	—
support.other.variable, string.other.link	#f07178	—
keyword.other.unit, keyword.other	#72a7e4	—
constant.language, support.constant, constant.character, constant.escape, constant.numeric	#72a7e4	—
variable.parameter	#72a7e4	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	#6dc743	—
support.class, entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#9d73d8	—
support.type	#9d73d8	italic
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	#9d73d8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#ffbf57	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffbf57	italic
entity.other.attribute-name.class	#ffbf57	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8b71d8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8b71d8
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	#8b71d8
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	#8b71d8
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	#8b71d8
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	#8b71d8
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	#8b71d8
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	#8b71d8
string	#9ee67d	—
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	#8b71d8
text.html.markdown, punctuation.definition.list_item.markdown	#d8d8d8	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#d8d8d8	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#d8d8d8	—

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