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 - Dark

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0E1016
activityBar.activeBorder#AF6DC5
activityBar.background#070707
activityBar.border#06080b
activityBar.foreground#AF6DC5
activityBar.inactiveForeground#333333
activityBarBadge.background#AF6DC5
activityBarBadge.foreground#11151f
badge.background#AF6DC5
badge.foreground#06080b
breadcrumb.activeSelectionForeground#AF6DC5
breadcrumb.background#0d0d0d
breadcrumbPicker.background#0d0d0d
button.background#AF6DC5
button.foreground#0d0d0d
debugToolBar.background#06080b
dropdown.background#333333
editor.background#0d0d0d
editor.foreground#d8d8d8
editor.lineHighlightBackground#33333334
editor.selectionBackground#af6dc554
editorCursor.foreground#AF6DC5
editorGroupHeader.tabsBackground#070707
editorHoverWidget.background#070707
editorHoverWidget.border#c8a2d570
editorLineNumber.activeForeground#d8d8d8
editorSuggestWidget.background#0d0d0d
editorSuggestWidget.highlightForeground#c479dd
editorSuggestWidget.selectedBackground#af6dc523
editorWidget.background#0d0d0d
editorWidget.border#AF6DC570
editorWidget.foreground#d8d8d8
focusBorder#AF6DC5a9
gitDecoration.ignoredResourceForeground#3f4357
input.background#333333
input.foreground#d8d8d8
input.placeholderForeground#c2c2c2
list.activeSelectionBackground#af6dc554
list.activeSelectionForeground#D8D8D8
list.focusBackground#af6dc554
list.highlightForeground#D8D8D8
list.hoverBackground#0d0d0d
list.inactiveFocusBackground#0d0d0d
list.inactiveSelectionBackground#0d0d0d
list.inactiveSelectionForeground#d071f0
menu.background#111111
panel.background#070707
panel.border#AF6DC5
panelTitle.activeBorder#AF6DC5
scrollbar.shadow#06080b
scrollbarSlider.activeBackground#AF6DC57c
scrollbarSlider.background#AF6DC5a6
scrollbarSlider.hoverBackground#AF6DC57c
sideBar.background#070707
sideBar.border#06080b
sideBar.foreground#626984
sideBarSectionHeader.background#070707
sideBarSectionHeader.border#202635
sideBarSectionHeader.foreground#626984
sideBarTitle.foreground#8f9ac5
statusBar.background#070707
statusBar.border#06080b
tab.activeBorderTop#AF6DC5
tab.border#06080b
tab.hoverForeground#AF6DC5
tab.inactiveBackground#070707
terminal.background#070707
terminal.foreground#d8d8d8
terminalCursor.foreground#AF6DC5
titleBar.activeBackground#070707
titleBar.border#0d0d0d
titleBar.inactiveBackground#070707

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#484f6e	italic
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#6dd63d	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#88d4cd	—
punctuation.definition.group.capture.regexp	#d4c708	bold
variable, string constant.other.placeholder	#d8d8d8	—
constant.other.color	#cb19d8	—
string.interpolated	#9ee67d	—
invalid, invalid.illegal	#f82f51	italic underline
keyword, storage.type, storage.modifier	#d65dff	—
keyword.operator.new	#d65dff	bold
keyword.control	#d65dff	italic
punctuation.definition.tag	#d8d8d8	—
punctuation.definition.string.begin, punctuation.definition.string.end	#81da58	—
punctuation	#d65dff	—
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	#8b83fa
meta.block variable.other	#e6edff	—
support.other.variable, string.other.link	#f07178	—
keyword.other.unit, keyword.other	#ec9a3c	—
constant.language, support.constant, constant.character, constant.escape, constant.numeric	#ec9a3c	—
variable.parameter	#da8dfd	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	#f3a44a	—
support.type	#f3a44a	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	#B2CCD6
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	#cd7bee	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#d65dff	—
constant.character.escape	#d65dff	—
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}!`;
}