Ocean Dive Themes
Publisher: CodetownThemes in package: 6
Beautiful ocean-themed dark and light themes with Material Design Ocean backgrounds and harmonious color palettes
Color themes
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#0B1120
- activityBar.foreground#EAF6FF
- activityBar.inactiveForeground#6C7A89
- activityBarItem.background#0B1120
- activityBarItem.border#6C7A8940
- activityBarItem.foreground#EAF6FF
- button.hoverBackground#162040
- dropdown.background#030509
- dropdown.foreground#EAF6FF
- dropdown.listBackground#030509
- editor.background#0B1120
- editor.foreground#EAF6FF
- editor.inactiveSelectionBackground#16204088
- editor.lineHighlightBackground#162040
- editor.selectionBackground#F4A6CD33
- editor.snippetFinalTabstopHighlightBackground#0B1120
- editor.snippetFinalTabstopHighlightBorder#F4A6CD
- editor.snippetTabstopHighlightBackground#0B1120
- editor.snippetTabstopHighlightBorder#F4A6CD
- editorCursor.foreground#F4A6CD
- editorError.background#0B1120
- editorError.border#E06C75
- editorError.foreground#EAF6FF
- editorGroupHeader.tabsBackground#0B1120
- editorIndentGuide.activeBackground1#F4A6CD
- editorIndentGuide.background1#162040
- editorInfo.background#0B1120
- editorInfo.border#F4A6CD
- editorInfo.foreground#EAF6FF
- editorSuggestWidget.background#0B1120
- editorSuggestWidget.border#6C7A8940
- editorSuggestWidget.foreground#EAF6FF
- editorWarning.background#0B1120
- editorWarning.border#E5C07B
- editorWarning.foreground#EAF6FF
- focusBorder#6C7A8940
- input.background#0B1120
- input.border#162040
- input.foreground#EAF6FF
- input.placeholderForeground#6C7A89
- inputOption.activeBackground#162040
- inputOption.activeBorder#6C7A8940
- inputOption.hoverBackground#162040
- list.activeSelectionBackground#162040
- list.activeSelectionForeground#FFFFFF
- list.focusOutline#6C7A8940
- list.inactiveSelectionBackground#0B1120
- list.inactiveSelectionForeground#EAF6FF
- menu.background#0B1120
- menu.foreground#EAF6FF
- menu.selectionBackground#162040
- menu.selectionForeground#E0E0E0
- menubar.selectionBackground#162040
- menubar.selectionForeground#E0E0E0
- notification.background#0B1120
- notification.border#F4A6CD
- notification.foreground#EAF6FF
- notificationToast.background#0B1120
- notificationToast.border#F4A6CD
- notificationToast.foreground#EAF6FF
- panel.background#162040
- panel.border#6C7A8940
- quickInput.background#0B1120
- quickInput.foreground#EAF6FF
- quickInputList.focusBackground#162040
- quickInputList.focusForeground#E0E0E0
- sideBar.background#0B1120
- statusBar.background#0B1120
- statusBar.border#6C7A8940
- statusBar.foreground#EAF6FF
- statusBarItem.background#0B1120
- statusBarItem.border#6C7A8940
- statusBarItem.foreground#EAF6FF
- tab.activeBackground#162040
- tab.hoverBackground#162040
- tab.inactiveBackground#0B1120
- terminal.background#0B1120
- terminal.foreground#EAF6FF
- terminal.selectionBackground#162040
- terminalCursor.background#EAF6FF
- terminalCursor.foreground#F4A6CD
- titleBar.activeBackground#0B1120
- titleBar.activeForeground#EAF6FF
- titleBar.border#6C7A8940
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4A6076 | italic |
| string, constant.other.symbol | #E06C75 | — |
| variable, identifier | #E5C07B | — |
| keyword, storage.type, import, support.type | #B8E6B8 | bold |
| storage.type, storage.modifier | #B8E6B8 | — |
| constant.numeric, constant.language | #D19A66 | — |
| entity.name.function | #F4A6CD | — |
| meta.function-call, variable.function | #F4A6CD | — |
| entity.name.class, support.class, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #E6B8AF | — |
| entity.name.tag, support.class.component.html | #B8E6B8 | — |
| entity.other.attribute-name, attribute.name | #F4A6CD | — |
| support.type.property-name.css, meta.property-name.css | #E6B8AF | — |
| support.constant.property-value.css, constant.other.color.rgb-value.css, constant.numeric.css | #D4A5A5 | — |
| constant.language.boolean, constant.language.null | #F4A6CD | — |
| variable.parameter, meta.parameter | #E5C07B | — |
| entity.name.type, entity.name.interface, support.type | #B8E6B8 | — |
| variable.other.property | #D19A66 | — |