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#050A16
- activityBar.foreground#EAF6FF
- activityBar.inactiveForeground#6C7A89
- activityBarItem.background#050A16
- activityBarItem.border#6C7A8940
- activityBarItem.foreground#EAF6FF
- button.hoverBackground#101624
- dropdown.background#030509
- dropdown.foreground#EAF6FF
- dropdown.listBackground#030509
- editor.background#050A16
- editor.foreground#EAF6FF
- editor.inactiveSelectionBackground#10162488
- editor.lineHighlightBackground#101624
- editor.selectionBackground#B388FF33
- editor.snippetFinalTabstopHighlightBackground#050A16
- editor.snippetFinalTabstopHighlightBorder#B388FF
- editor.snippetTabstopHighlightBackground#050A16
- editor.snippetTabstopHighlightBorder#B388FF
- editorCursor.foreground#B388FF
- editorError.background#050A16
- editorError.border#FF8AB6
- editorError.foreground#EAF6FF
- editorGroupHeader.tabsBackground#050A16
- editorIndentGuide.activeBackground1#B388FF
- editorIndentGuide.background1#101624
- editorInfo.background#050A16
- editorInfo.border#B388FF
- editorInfo.foreground#EAF6FF
- editorSuggestWidget.background#050A16
- editorSuggestWidget.border#6C7A8940
- editorSuggestWidget.foreground#EAF6FF
- editorWarning.background#050A16
- editorWarning.border#FFE176
- editorWarning.foreground#EAF6FF
- focusBorder#3A506640
- input.background#050A16
- input.border#101624
- input.foreground#EAF6FF
- input.placeholderForeground#3A5066
- inputOption.activeBackground#101624
- inputOption.activeBorder#3A506640
- inputOption.hoverBackground#101624
- list.activeSelectionBackground#101624
- list.activeSelectionForeground#FFFFFF
- list.focusOutline#3A506640
- list.inactiveSelectionBackground#050A16
- list.inactiveSelectionForeground#EAF6FF
- menu.background#050A16
- menu.foreground#EAF6FF
- menu.selectionBackground#101624
- menu.selectionForeground#E0E0E0
- menubar.selectionBackground#101624
- menubar.selectionForeground#E0E0E0
- notification.background#050A16
- notification.border#B388FF
- notification.foreground#EAF6FF
- notificationToast.background#050A16
- notificationToast.border#B388FF
- notificationToast.foreground#EAF6FF
- panel.background#101624
- panel.border#6C7A8940
- quickInput.background#050A16
- quickInput.foreground#EAF6FF
- quickInputList.focusBackground#101624
- quickInputList.focusForeground#FFFFFF
- sideBar.background#050A16
- statusBar.background#050A16
- statusBar.border#6C7A8940
- statusBar.foreground#EAF6FF
- statusBarItem.background#050A16
- statusBarItem.border#6C7A8940
- statusBarItem.foreground#EAF6FF
- tab.activeBackground#101624
- tab.hoverBackground#101624
- tab.inactiveBackground#050A16
- terminal.background#050A16
- terminal.foreground#EAF6FF
- terminal.selectionBackground#101624
- terminalCursor.background#EAF6FF
- terminalCursor.foreground#B388FF
- titleBar.activeBackground#050A16
- 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 | #FF8AB6 | — |
| variable, identifier | #C3A8FF | — |
| keyword, storage.type, import, support.type | #4AD8E9 | bold |
| constant.numeric, constant.language | #FFE176 | — |
| entity.name.function, support.function, meta.function-call, variable.function | #4DEB99 | — |
| entity.name.class, support.class, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #C3A8FF | — |
| entity.name.tag, support.class.component.html | #9B59B6 | — |
| entity.other.attribute-name, attribute.name | #E67E22 | — |
| support.type.property-name.css, meta.property-name.css | #3498DB | — |
| support.constant.property-value.css, constant.other.color.rgb-value.css, constant.numeric.css | #E74C3C | — |
| constant.language.boolean, constant.language.null | #FFE176 | — |
| variable.parameter, meta.parameter | #C3A8FF | — |
| entity.name.type, entity.name.interface, support.type | #4AD8E9 | — |
| variable.other.property | #FFE176 | — |
| keyword.control, storage.type.function, keyword.function | #FF8A9A | — |
| storage.type, storage.modifier | #E5C07B | — |