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#1A263988
- editor.lineHighlightBackground#1A2639
- editor.selectionBackground#00B4D822
- editor.snippetFinalTabstopHighlightBackground#0B1120
- editor.snippetFinalTabstopHighlightBorder#00B4D8
- editor.snippetTabstopHighlightBackground#0B1120
- editor.snippetTabstopHighlightBorder#00B4D8
- editorCursor.foreground#00B4D8
- editorError.background#0B1120
- editorError.border#FF3F33
- editorError.foreground#EAF6FF
- editorGroupHeader.tabsBackground#0B1120
- editorIndentGuide.activeBackground1#00B4D8
- editorIndentGuide.background1#1A2639
- editorInfo.background#0B1120
- editorInfo.border#00B4D8
- editorInfo.foreground#EAF6FF
- editorSuggestWidget.background#0B1120
- editorSuggestWidget.border#6C7A8940
- editorSuggestWidget.foreground#EAF6FF
- editorWarning.background#0B1120
- editorWarning.border#FFC320
- 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#EAF6FF
- list.focusOutline#6C7A8940
- list.hoverBackground#162040
- list.inactiveSelectionBackground#0B1120
- list.inactiveSelectionForeground#EAF6FF
- menu.background#0B1120
- menu.foreground#EAF6FF
- menu.selectionBackground#162040
- menu.selectionForeground#EAF6FF
- menubar.selectionBackground#162040
- menubar.selectionForeground#EAF6FF
- notification.background#0B1120
- notification.border#00B4D8
- notification.foreground#EAF6FF
- notificationToast.background#0B1120
- notificationToast.border#00B4D8
- notificationToast.foreground#EAF6FF
- panel.background#1A2639
- panel.border#6C7A8940
- quickInput.background#0B1120
- quickInput.foreground#EAF6FF
- quickInputList.focusBackground#162040
- quickInputList.focusForeground#EAF6FF
- sideBar.background#0B1120
- statusBar.background#0B1120
- statusBar.border#6C7A8940
- statusBar.foreground#EAF6FF
- statusBarItem.background#0B1120
- statusBarItem.border#6C7A8940
- statusBarItem.foreground#EAF6FF
- tab.activeBackground#1B2A41
- tab.hoverBackground#162040
- tab.inactiveBackground#14213D
- terminal.background#0B1120
- terminal.foreground#EAF6FF
- terminal.selectionBackground#162040
- terminalCursor.background#EAF6FF
- terminalCursor.foreground#00B4D8
- 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 | #7C8A99 | italic |
| string, constant.other.symbol | #B3F7CF | — |
| variable, identifier | #B19CD1 | — |
| keyword, storage.type | #4AD4E8 | bold |
| keyword.control, storage.type.function, keyword.function | #FFC320 | — |
| constant.numeric, constant.language | #FFE176 | — |
| entity.name.function | #4DEB99 | — |
| meta.function-call, variable.function | #4AD4E8 | — |
| variable.other.property | #FFE176 | — |
| support.type.object, entity.name.type, support.type | #6DE0F1 | — |
| entity.name.class, support.class | #8BA9DC | — |
| entity.name.tag, support.class.component.html | #E8B4B8 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name, attribute.name | #B8D4E3 | — |
| support.type.property-name.css, meta.property-name.css | #A8D8B9 | — |
| support.constant.property-value.css, constant.other.color.rgb-value.css, constant.numeric.css | #D4A5A5 | — |
| constant.language.boolean, constant.language.null | #F4A79E | — |
| variable.parameter, meta.parameter | #FF8A9A | — |
| storage.type, storage.modifier | #FF3F33 | — |