Skip to main content
Coding Theme

Black Ocean

Publisher: zamerickThemes in package: 1

Black Ocean is a dark theme for vscode with blues and greens. Heavily inspired by / based on Dayle Rees's work on Rainglow.

VS Code preview

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

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#0c0e10
  • activityBar.foreground#dfdfdf
  • activityBarBadge.background#007aae8e
  • activityBarBadge.foreground#dfdfdf
  • badge.background#007aae8e
  • badge.foreground#dfdfdf
  • button.background#8a9daf
  • button.foreground#dfdfdf
  • dropdown.background#0c0e10
  • dropdown.border#0c0e10
  • dropdown.foreground#dfdfdf
  • editor.background#101316
  • editor.foreground#dfdfdf
  • editor.hoverHighlightBackground#007aae8e
  • editor.lineHighlightBackground#1b2025
  • editor.selectionBackground#007aae8e
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorBracketMatch.background#007aae8e
  • editorBracketMatch.border#8a9daf
  • editorCursor.foreground#dfdfdf
  • editorGroup.border#3b4651
  • editorGroupHeader.tabsBackground#1b2025
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#0c0e10
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.activeBackground#dfdfdf
  • editorIndentGuide.background#3b4651
  • editorLineNumber.activeForeground#dfdfdf
  • editorLineNumber.foreground#3b4651
  • editorLink.activeForeground#007aae8e
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#8a9daf
  • editorOverviewRuler.infoForeground#dfdfdf
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#101316
  • editorSuggestWidget.foreground#dfdfdf
  • editorSuggestWidget.highlightForeground#007aae8e
  • editorSuggestWidget.selectedBackground#3b4651
  • editorWhitespace.foreground#3b4651
  • editorWidget.background#101316
  • editorWidget.border#3b4651
  • extensionButton.prominentBackground#007aae8e
  • extensionButton.prominentForeground#dfdfdf
  • extensionButton.prominentHoverBackground#edce72
  • focusBorder#007aae8e
  • foreground#dfdfdf
  • gitDecoration.conflictingResourceForeground#dfdfdf
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#3b4651
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.background#0c0e10
  • input.border#3b4651
  • input.foreground#dfdfdf
  • input.placeholderForeground#3b4651
  • inputOption.activeBorder#8a9daf
  • list.activeSelectionBackground#8a9daf
  • list.activeSelectionForeground#101316
  • list.focusBackground#3b4651
  • list.hoverBackground#1b2025
  • list.inactiveSelectionBackground#242b31
  • notifications.background#1b2025
  • notifications.foreground#dfdfdf
  • panel.background#0c0e10
  • panel.border#3b4651
  • panelTitle.activeBorder#007aae8e
  • panelTitle.inactiveForeground#60778c
  • peekView.border#007aae8e
  • peekViewEditor.background#07090a
  • peekViewEditor.matchHighlightBackground#8a9daf
  • peekViewEditorGutter.background#0c0e10
  • peekViewResult.background#1b2025
  • peekViewResult.fileForeground#dfdfdf
  • peekViewResult.lineForeground#8a9daf
  • peekViewResult.matchHighlightBackground#8a9daf
  • peekViewResult.selectionBackground#101316
  • peekViewResult.selectionForeground#dfdfdf
  • peekViewTitle.background#0c0e10
  • peekViewTitleDescription.foreground#dfdfdf
  • peekViewTitleLabel.foreground#dfdfdf
  • progressBar.background#dfdfdf
  • scrollbar.shadow#0c0e10
  • scrollbarSlider.activeBackground#007aae8e
  • scrollbarSlider.background#3b4651
  • scrollbarSlider.hoverBackground#007aae8e
  • sideBar.background#101316
  • sideBar.foreground#dfdfdf
  • sideBarSectionHeader.background#0c0e10
  • sideBarSectionHeader.foreground#dfdfdf
  • statusBar.background#007aae8e
  • statusBar.foreground#dfdfdf
  • statusBar.noFolderBackground#8a9daf
  • tab.activeBackground#007aae8e
  • tab.inactiveBackground#1b2025
  • tab.inactiveForeground#60778c
  • terminal.ansiBlack#1b2025
  • terminal.ansiBlue#007aae8e
  • terminal.ansiBrightBlack#3b4651
  • terminal.ansiBrightBlue#dfdfdf
  • terminal.ansiBrightCyan#00eeff
  • terminal.ansiBrightGreen#00c200
  • terminal.ansiBrightMagenta#edce72
  • terminal.ansiBrightRed#e61f44
  • terminal.ansiBrightWhite#dfdfdf
  • terminal.ansiBrightYellow#dfdfdf
  • terminal.ansiCyan#0490a0
  • terminal.ansiGreen#019d76
  • terminal.ansiMagenta#9100ae
  • terminal.ansiRed#e61f44
  • terminal.ansiWhite#dfdfdf
  • terminal.ansiYellow#a7da1e
  • terminal.background#0c0e10
  • terminal.foreground#dfdfdf
  • titleBar.activeBackground#07090a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#60778c
string#7ebea0
constant.numeric#15b8ae
constant.language#019d76
constant.character, constant.other#019d76
variable#019d76
keyword#007aae
storage#019d76italic
storage.type#007aae
entity.name.class#019d76underline
entity.other.inherited-class#019d76
entity.name.function#15b8ae
variable.parameter#dfdfdf
entity.name.tag#007aae
entity.other.attribute-name#019d76
support.function#019d76
support.constant#019d76
support.type, support.class#019d76
support.other.variable
invalid#e61f44
invalid.deprecated#e61f44
meta.structure.dictionary.json string.quoted.double.json#15b8ae
meta.diff, meta.diff.header#60778c
markup.deleted#e61f44
markup.inserted#a7da1e
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#a7da1e
entity.name.filename.find-in-files#edce72
keyword.other#8a9daf
meta.property-value, support.constant.property-value, constant.other.color#15b8ae
meta.structure.dictionary.json string.quoted.double.json#019d76
meta.structure.dictionary.value.json string.quoted.double.json#15b8ae
meta.property-name support.type.property-nameitalic
meta.property-value punctuation.separator.key-value#dfdfdf
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#007aae
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#007aae
variable.other#dfdfdf
variable.parameter.function.coffee#15b8ae
entity.name.section.markdown#019d76
punctuation.definition.heading.markdown#007aae
markup.raw.inline.markdown#15b8ae
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#007aae
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#007aae
punctuation.definition.metadata.markdown#007aae
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#007aae
markup.bold.markdown, markup.italic.markdown#007aae
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#0490a0
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#dfdfdf

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Black Ocean - Coding Theme