The Ocean
Publisher: Kieran PottsThemes in package: 1
A family of minimalist themes inspired by the ocean - WIP.
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.
- actionBar.toggledBackground#dddddd
- activityBar.activeBackground#6b72801a
- activityBar.activeBorder#00000000
- activityBar.background#e4e7eb
- activityBar.border#00000000
- activityBar.foreground#6b7280
- activityBar.inactiveForeground#6b7280
- activityBarBadge.background#6b7280
- activityBarBadge.foreground#f2f4f8
- activityBarTop.activeBackground#6b72801a
- activityBarTop.activeBorder#00000000
- activityBarTop.background#e4e7eb
- activityBarTop.foreground#6b7280
- activityBarTop.inactiveForeground#6b7280
- badge.background#6b7280
- badge.foreground#f2f4f8
- breadcrumb.activeSelectionForeground#a1a7b2
- breadcrumb.background#f2f4f8
- breadcrumb.focusForeground#a1a7b2
- breadcrumb.foreground#a1a7b2
- breadcrumbPicker.background#e4e7eb
- button.background#2b303b
- button.border#00000000
- button.foreground#f2f4f8
- button.hoverBackground#2b303b
- button.secondaryBackground#a1a7b2
- button.secondaryForeground#f2f4f8
- button.secondaryHoverBackground#a1a7b2
- chat.slashCommandBackground#bfcdde
- chat.slashCommandForeground#364d68
- checkbox.background#f2f4f8
- checkbox.border#00000000
- checkbox.foreground#2b303b
- contrastActiveBorder#00000000
- contrastBorder#00000000
- debugConsole.errorForeground#bf616a
- debugConsole.infoForeground#a1a7b2
- debugConsole.sourceForeground#2b303b
- debugConsole.warningForeground#7e5b16
- debugConsoleInputIcon.foreground#6b7280
- debugIcon.breakpointForeground#bf616a
- debugTokenExpression.boolean#2b303b
- debugTokenExpression.error#2b303b
- debugTokenExpression.name#2b303b
- debugTokenExpression.number#2b303b
- debugTokenExpression.string#2b303b
- debugTokenExpression.value#2b303b
- debugToolBar.background#e4e7eb
- debugToolBar.border#c7ccd1
- descriptionForeground#a1a7b2
- diffEditor.insertedLineBackground#82a76333
- diffEditor.insertedTextBackground#82a76333
- diffEditor.removedLineBackground#a3424c33
- diffEditor.removedTextBackground#a3424c33
- diffEditor.unchangedRegionBackground#00000000
- diffEditorGutter.insertedLineBackground#00000000
- diffEditorGutter.removedLineBackground#00000000
- diffEditorOverview.insertedForeground#82a76333
- diffEditorOverview.removedForeground#a3424c33
- dropdown.background#f2f4f8
- dropdown.border#00000000
- dropdown.foreground#2b303b
- dropdown.listBackground#f2f4f8
- editor.background#f2f4f8
- editor.findMatchBackground#6b728026
- editor.findMatchHighlightBackground#6b72800d
- editor.focusedStackFrameHighlightBackground#6b72801a
- editor.foldBackground#6b72801a
- editor.foreground#2b303b
- editor.inactiveSelectionBackground#6b728026
- editor.lineHighlightBackground#6b72801a
- editor.linkedEditingBackground#6b72801a
- editor.selectionBackground#6b728026
- editor.selectionHighlightBackground#6b728026
- editor.stackFrameHighlightBackground#6b72801a
- editor.wordHighlightBackground#6b72801a
- editor.wordHighlightStrongBackground#6b72801a
- editorBracketHighlight.foreground1#a1a7b2
- editorBracketHighlight.foreground2#a1a7b2
- editorBracketHighlight.foreground3#a1a7b2
- editorBracketHighlight.foreground4#a1a7b2
- editorBracketHighlight.foreground5#a1a7b2
- editorBracketHighlight.foreground6#a1a7b2
- editorBracketHighlight.unexpectedBracket.foreground#bf616a
- editorBracketMatch.background#00000000
- editorBracketMatch.border#00000000
- editorBracketPairGuide.activeBackground1#00000000
- editorBracketPairGuide.activeBackground2#00000000
- editorBracketPairGuide.activeBackground3#00000000
- editorBracketPairGuide.activeBackground4#00000000
- editorBracketPairGuide.activeBackground5#00000000
- editorBracketPairGuide.activeBackground6#00000000
- editorBracketPairGuide.background1#00000000
- editorBracketPairGuide.background2#00000000
- editorBracketPairGuide.background3#00000000
- editorBracketPairGuide.background4#00000000
- editorBracketPairGuide.background5#00000000
- editorBracketPairGuide.background6#00000000
- editorCommentsWidget.rangeActiveBackground#ff0000
- editorCommentsWidget.rangeBackground#ff0000
- editorCommentsWidget.replyInputBackground#f2f4f8
- editorCommentsWidget.resolvedBorder#a3be8c
- editorCommentsWidget.unresolvedBorder#bf616a
- editorCursor.foreground#2b303b
- editorGroup.border#e4e7eb
- editorGroup.dropBackground#6b728040
- editorGroupHeader.tabsBackground#e4e7eb
- editorGroupHeader.tabsBorder#00000000
- editorGutter.addedBackground#00000000
- editorGutter.background#00000000
- editorGutter.commentGlyphForeground#2b303b
- editorGutter.commentRangeForeground#e4e7eb
- editorGutter.commentUnresolvedGlyphForeground#bf616a
- editorGutter.deletedBackground#00000000
- editorGutter.foldingControlForeground#a1a7b2
- editorGutter.modifiedBackground#00000000
- editorIndentGuide.activeBackground#d8dbdf
- editorIndentGuide.activeBackground1#d8dbdf
- editorIndentGuide.activeBackground2#d8dbdf
- editorIndentGuide.activeBackground3#d8dbdf
- editorIndentGuide.activeBackground4#d8dbdf
- editorIndentGuide.activeBackground5#d8dbdf
- editorIndentGuide.activeBackground6#d8dbdf
- editorIndentGuide.background#d8dbdf
- editorIndentGuide.background1#d8dbdf
- editorIndentGuide.background2#d8dbdf
- editorIndentGuide.background3#d8dbdf
- editorIndentGuide.background4#d8dbdf
- editorIndentGuide.background5#d8dbdf
- editorIndentGuide.background6#d8dbdf
- editorInlayHint.background#00000000
- editorInlayHint.foreground#a1a7b2
- editorInlayHint.paramBackground#00000000
- editorInlayHint.paramForeground#a1a7b2
- editorInlayHint.typeBackground#00000000
- editorInlayHint.typeForeground#a1a7b2
- editorLineNumber.activeForeground#2b303b
- editorLineNumber.foreground#a1a7b2
- editorOverviewRuler.addedForeground#00000000
- editorOverviewRuler.background#00000000
- editorOverviewRuler.border#00000000
- editorOverviewRuler.bracketMatchForeground#00000000
- editorOverviewRuler.deletedForeground#00000000
- editorOverviewRuler.errorForeground#bf616a
- editorOverviewRuler.findMatchForeground#00000000
- editorOverviewRuler.infoForeground#00000000
- editorOverviewRuler.inlineChatInserted#00000000
- editorOverviewRuler.inlineChatRemoved#00000000
- editorOverviewRuler.modifiedForeground#00000000
- editorOverviewRuler.rangeHighlightForeground#00000000
- editorOverviewRuler.selectionHighlightForeground#00000000
- editorOverviewRuler.warningForeground#7e5b16
- editorOverviewRuler.wordHighlightForeground#00000000
- editorOverviewRuler.wordHighlightStrongForeground#00000000
- editorOverviewRuler.wordHighlightTextForeground#00000000
- editorPane.background#e4e7eb
- editorStickyScroll.background#f2f4f8
- editorStickyScroll.border#d8dbdf
- editorStickyScroll.shadow#00000000
- editorStickyScrollHover.background#e4e7eb
- editorSuggestWidget.background#e4e7eb
- editorWhitespace.foreground#d8dbdf
- editorWidget.background#e4e7eb
- editorWidget.foreground#2b303b
- errorForeground#bf616a
- focusBorder#00000000
- foreground#2b303b
- gitDecoration.addedResourceForeground#2b303b
- gitDecoration.conflictingResourceForeground#2b303b
- gitDecoration.deletedResourceForeground#2b303b
- gitDecoration.ignoredResourceForeground#a1a7b2
- gitDecoration.modifiedResourceForeground#2b303b
- gitDecoration.renamedResourceForeground#2b303b
- gitDecoration.stageDeletedResourceForeground#2b303b
- gitDecoration.stageModifiedResourceForeground#2b303b
- gitDecoration.submoduleResourceForeground#2b303b
- gitDecoration.untrackedResourceForeground#2b303b
- icon.foreground#6b7280
- input.background#f2f4f8
- input.border#e4e7eb
- input.foreground#2b303b
- input.placeholderForeground#a1a7b2
- inputOption.activeBackground#6b72801a
- inputOption.activeBorder#00000000
- inputOption.activeForeground#2b303b
- keybindingLabel.foreground#2b303b
- list.activeSelectionBackground#6b728026
- list.activeSelectionForeground#2b303b
- list.activeSelectionIconForeground#2b303b
- list.dropBackground#6b728040
- list.errorForeground#bf616a
- list.focusAndSelectionOutline#6b728026
- list.focusBackground#6b72801a
- list.focusForeground#2b303b
- list.highlightForeground#2b303b
- list.hoverBackground#6b72801a
- list.hoverForeground#2b303b
- list.inactiveFocusBackground#6b72801a
- list.inactiveSelectionBackground#6b728026
- list.inactiveSelectionForeground#2b303b
- list.warningForeground#7e5b16
- menu.background#e4e7eb
- menu.border#c7ccd1
- menu.foreground#2b303b
- menu.selectionBackground#6b72801a
- menu.selectionBorder#00000000
- menu.selectionForeground#2b303b
- menu.separatorBackground#d8dbdf
- menubar.selectionBackground#6b72801a
- menubar.selectionBorder#00000000
- menubar.selectionForeground#2b303b
- minimap.errorHighlight#00000000
- minimap.findMatchHighlight#00000000
- minimap.foregroundOpacity#00000066
- minimap.infoHighlight#00000000
- minimap.selectionHighlight#00000000
- minimap.selectionOccurrenceHighlight#00000000
- minimap.warningHighlight#00000000
- minimapGutter.addedBackground#00000000
- minimapGutter.deletedBackground#00000000
- minimapGutter.modifiedBackground#00000000
- minimapSlider.activeBackground#a1a7b240
- minimapSlider.background#a1a7b240
- minimapSlider.hoverBackground#a1a7b240
- notebook.cellBorderColor#e4e7eb
- notebook.selectedCellBackground#f2f4f8
- notificationCenter.border#c7ccd1
- notificationCenterHeader.background#e4e7eb
- notificationCenterHeader.foreground#2b303b
- notificationLink.foreground#5e81ac
- notifications.background#e4e7eb
- notifications.border#c7ccd1
- notifications.foreground#2b303b
- notificationsErrorIcon.foreground#6b7280
- notificationsInfoIcon.foreground#6b7280
- notificationsWarningIcon.foreground#6b7280
- notificationToast.border#c7ccd1
- panel.background#e4e7eb
- panel.border#00000000
- panelInput.border#e4e7eb
- panelSection.dropBackground#6b728040
- panelTitle.activeBorder#00000000
- panelTitle.activeForeground#2b303b
- panelTitle.inactiveForeground#2b303b
- peekView.border#d8dbdf
- peekViewEditor.background#f2f4f8
- peekViewEditor.matchHighlightBackground#6b728040
- peekViewEditor.matchHighlightBorder#00000000
- peekViewEditorGutter.background#f2f4f8
- peekViewEditorStickyScroll.background#a1a7b240
- peekViewResult.background#ebeef2
- peekViewResult.fileForeground#2b303b
- peekViewResult.lineForeground#d8dbdf
- peekViewResult.matchHighlightBackground#6b728040
- peekViewResult.selectionBackground#6b728026
- peekViewResult.selectionForeground#2b303b
- peekViewTitle.background#e4e7eb
- peekViewTitleDescription.foreground#2b303b
- peekViewTitleLabel.foreground#a1a7b2
- pickerGroup.border#c7ccd1
- pickerGroup.foreground#2b303b
- ports.iconRunningProcessForeground#627f48
- progressBar.background#627f48
- quickInput.background#e4e7eb
- quickInput.foreground#2b303b
- quickInputList.focusBackground#6b72801a
- quickInputList.focusForeground#2b303b
- quickInputList.focusIconForeground#6b7280
- quickInputTitle.background#e4e7eb
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#a1a7b240
- scrollbarSlider.background#a1a7b240
- scrollbarSlider.hoverBackground#a1a7b240
- searchEditor.textInputBorder#e4e7eb
- selection.background#6b728026
- settings.dropdownBackground#f2f4f8
- settings.dropdownBorder#e4e7eb
- settings.headerForeground#2b303b
- settings.modifiedItemIndicator#7e5b16
- settings.numberInputBorder#e4e7eb
- settings.textInputBorder#e4e7eb
- sideBar.background#e4e7eb
- sideBar.border#00000000
- sideBar.dropBackground#6b728040
- sideBar.foreground#2b303b
- sideBarActivityBarTop.border#00000000
- sideBarSectionHeader.background#e4e7eb
- sideBarSectionHeader.border#d8dbdf
- sideBarSectionHeader.foreground#2b303b
- sideBarTitle.background#e4e7eb
- sideBarTitle.foreground#2b303b
- sideBySideEditor.horizontalBorder#c7ccd1
- sideBySideEditor.verticalBorder#c7ccd1
- statusBar.background#e4e7eb
- statusBar.border#d8dbdf
- statusBar.debuggingBackground#ebcb8b
- statusBar.debuggingForeground#2b303b
- statusBar.focusBorder#00000000
- statusBar.foreground#2b303b
- statusBar.noFolderBackground#e4e7eb
- statusBar.noFolderForeground#2b303b
- statusBarItem.activeBackground#6b72801a
- statusBarItem.errorBackground#6b728040
- statusBarItem.focusBorder#00000000
- statusBarItem.hoverBackground#6b72801a
- statusBarItem.prominentBackground#6b728040
- statusBarItem.remoteBackground#2b303b
- statusBarItem.remoteForeground#f2f4f8
- statusBarItem.remoteHoverBackground#2b303b
- statusBarItem.remoteHoverForeground#f2f4f8
- symbolIcon.arrayForeground#6b7280
- symbolIcon.booleanForeground#6b7280
- symbolIcon.classForeground#6b7280
- symbolIcon.colorForeground#6b7280
- symbolIcon.constantForeground#6b7280
- symbolIcon.constructorForeground#6b7280
- symbolIcon.enumeratorForeground#6b7280
- symbolIcon.enumeratorMemberForeground#6b7280
- symbolIcon.eventForeground#6b7280
- symbolIcon.fieldForeground#6b7280
- symbolIcon.fileForeground#6b7280
- symbolIcon.folderForeground#6b7280
- symbolIcon.functionForeground#6b7280
- symbolIcon.interfaceForeground#6b7280
- symbolIcon.keyForeground#6b7280
- symbolIcon.keywordForeground#6b7280
- symbolIcon.methodForeground#6b7280
- symbolIcon.moduleForeground#6b7280
- symbolIcon.namespaceForeground#6b7280
- symbolIcon.nullForeground#6b7280
- symbolIcon.numberForeground#6b7280
- symbolIcon.objectForeground#6b7280
- symbolIcon.operatorForeground#6b7280
- symbolIcon.packageForeground#6b7280
- symbolIcon.propertyForeground#6b7280
- symbolIcon.referenceForeground#6b7280
- symbolIcon.snippetForeground#6b7280
- symbolIcon.stringForeground#6b7280
- symbolIcon.structForeground#6b7280
- symbolIcon.textForeground#6b7280
- symbolIcon.typeParameterForeground#6b7280
- symbolIcon.unitForeground#6b7280
- symbolIcon.variableForeground#6b7280
- tab.activeBackground#f2f4f8
- tab.activeBorder#00000000
- tab.activeBorderTop#00000000
- tab.activeForeground#2b303b
- tab.border#00000000
- tab.inactiveBackground#e4e7eb
- tab.inactiveForeground#2b303b
- tab.lastPinnedBorder#00000000
- tab.selectedBackground#f2f4f8
- tab.selectedBorderTop#00000000
- tab.selectedForeground#2b303b
- tab.unfocusedActiveBackground#f2f4f8
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#00000000
- tab.unfocusedActiveForeground#2b303b
- tab.unfocusedInactiveBackground#e4e7eb
- tab.unfocusedInactiveForeground#2b303b
- terminal.ansiBlack#2b303b
- terminal.ansiBlue#5e81ac
- terminal.ansiBrightBlack#6b7280
- terminal.ansiBrightBlue#9db3cd
- terminal.ansiBrightCyan#c0d3d2
- terminal.ansiBrightGreen#c8d8bb
- terminal.ansiBrightMagenta#d2bcce
- terminal.ansiBrightRed#d9a1a6
- terminal.ansiBrightWhite#c7ccd1
- terminal.ansiBrightYellow#f3e0b9
- terminal.ansiCyan#96b5b4
- terminal.ansiGreen#a3be8c
- terminal.ansiMagenta#b48ead
- terminal.ansiRed#bf616a
- terminal.ansiWhite#c7ccd1
- terminal.ansiYellow#ebcb8b
- terminal.background#2b303b
- terminal.border#4b5563
- terminal.dropBackground#6b728040
- terminal.findMatchBackground#6b7280d9
- terminal.findMatchBorder#00000000
- terminal.findMatchHighlightBackground#6b7280f2
- terminal.findMatchHighlightBorder#00000000
- terminal.foreground#c7ccd1
- terminal.inactiveSelectionBackground#3C444F
- terminal.selectionBackground#3C444F
- terminal.tab.activeBorderundefined
- terminalCursor.background#00000000
- terminalCursor.foreground#c7ccd1
- textBlockQuote.background#00000000
- textBlockQuote.border#a1a7b2
- textCodeBlock.background#6b72801a
- textLink.activeForeground#5e81ac
- textLink.foreground#5e81ac
- textPreformat.background#6b72801a
- textPreformat.foreground#2b303b
- textSeparator.foreground#a1a7b2
- titleBar.activeBackground#e4e7eb
- titleBar.activeForeground#2b303b
- titleBar.border#00000000
- titleBar.inactiveBackground#e4e7eb
- titleBar.inactiveForeground#2b303b
- tree.indentGuidesStroke#c7ccd1
- welcomePage.buttonBackground#2b303b
- welcomePage.buttonHoverBackground#2b303b
- welcomePage.tileBackground#e4e7eb
- widget.border#c7ccd1
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #a1a7b2 | — |
| constant.other.placeholder, constant.character | #bf616a | — |
| constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity | #5e81ac | — |
| entity.name, meta.export.default, meta.definition.variable | #96b5b4 | — |
| variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression | #2b303b | — |
| entity.name.function | #b48ead | — |
| entity.name.tag, support.class.component | #a3be8c | — |
| keyword | #bf616a | — |
| storage, storage.type | #bf616a | — |
| storage.modifier.package, storage.modifier.import, storage.type.java | #2b303b | — |
| string, string punctuation.section.embedded source | #243447 | — |
| support | #5e81ac | — |
| meta.property-name | #5e81ac | — |
| variable | #96b5b4 | — |
| variable.other | #2b303b | — |
| invalid.broken | #7b3239 | italic |
| invalid.deprecated | #7b3239 | italic |
| invalid.illegal | #7b3239 | italic |
| invalid.unimplemented | #7b3239 | italic |
| carriage-return | #e4e7eb | italic underline |
| message.error | #7b3239 | — |
| string variable | #5e81ac | — |
| source.regexp, string.regexp | #243447 | — |
| string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition | #243447 | — |
| string.regexp constant.character.escape | #a3be8c | bold |
| support.constant | #5e81ac | — |
| support.variable | #5e81ac | — |
| support.type.property-name.json | #a3be8c | — |
| meta.module-reference | #5e81ac | — |
| punctuation.definition.list.begin.markdown | #96b5b4 | — |
| markup.heading, markup.heading entity.name | #5e81ac | bold |
| markup.quote | #a3be8c | — |
| markup.italic | #2b303b | italic |
| markup.bold | #2b303b | bold |
| markup.underline | — | underline |
| markup.strikethrough | — | strikethrough |
| markup.inline.raw | #5e81ac | — |
| markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted | #7b3239 | — |
| punctuation.section.embedded | #bf616a | — |
| markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted | #a3be8c | — |
| markup.changed, punctuation.definition.changed | #96b5b4 | — |
| markup.ignored, markup.untracked | #dde5ee | — |
| meta.diff.range | #b48ead | bold |
| meta.diff.header | #5e81ac | — |
| meta.separator | #5e81ac | bold |
| meta.output | #5e81ac | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #6b7280 | — |
| brackethighlighter.unmatched | #7b3239 | — |
| constant.other.reference.link, string.other.link | #243447 | — |