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#1A1625
- activityBar.foreground#EAF6FF
- activityBar.inactiveForeground#6C7A89
- activityBarItem.background#1A1625
- activityBarItem.border#6C7A8940
- activityBarItem.foreground#F8E8FF
- button.hoverBackground#2A1F35
- dropdown.background#030509
- dropdown.foreground#F8E8FF
- dropdown.listBackground#030509
- editor.background#1A1625
- editor.foreground#F8E8FF
- editor.inactiveSelectionBackground#2A1F3588
- editor.lineHighlightBackground#1A1625
- editor.selectionBackground#FF8FA333
- editor.snippetFinalTabstopHighlightBackground#1A1625
- editor.snippetFinalTabstopHighlightBorder#FF8FA3
- editor.snippetTabstopHighlightBackground#1A1625
- editor.snippetTabstopHighlightBorder#FF8FA3
- editorCursor.foreground#FF8FA3
- editorError.background#1A1625
- editorError.border#E06C75
- editorError.foreground#F8E8FF
- editorGroup.background#1A1625
- editorGroupHeader.tabsBackground#1A1625
- editorIndentGuide.activeBackground#FF8FA3
- editorIndentGuide.background#2A1F35
- editorInfo.background#1A1625
- editorInfo.border#FF8FA3
- editorInfo.foreground#F8E8FF
- editorSuggestWidget.background#1A1625
- editorSuggestWidget.border#6C7A8940
- editorSuggestWidget.foreground#F8E8FF
- editorWarning.background#1A1625
- editorWarning.border#E5C07B
- editorWarning.foreground#F8E8FF
- focusBorder#A08FB040
- input.background#1A1625
- input.border#2A1F35
- input.foreground#F8E8FF
- input.placeholderForeground#A08FB0
- inputOption.activeBackground#2A1F35
- inputOption.activeBorder#A08FB040
- inputOption.hoverBackground#2A1F35
- list.activeSelectionBackground#2A1F35
- list.activeSelectionForeground#FFFFFF
- list.background#1A1625
- list.focusOutline#A08FB040
- list.foreground#F8E8FF
- list.hoverBackground#2A1F35
- list.inactiveSelectionBackground#1A1625
- list.inactiveSelectionForeground#F8E8FF
- menu.background#1A1625
- menu.foreground#F8E8FF
- menu.selectionBackground#FF8FA3
- menu.selectionForeground#1A1625
- menubar.selectionBackground#FF8FA3
- menubar.selectionForeground#1A1625
- notification.background#1A1625
- notification.border#FF8FA3
- notification.foreground#F8E8FF
- notificationToast.background#1A1625
- notificationToast.border#FF8FA3
- notificationToast.foreground#F8E8FF
- panel.background#2A1F35
- panel.border#6C7A8940
- quickInput.background#1A1625
- quickInput.foreground#F8E8FF
- quickInputList.focusBackground#FF8FA3
- quickInputList.focusForeground#FFFFFF
- sideBar.background#1A1625
- statusBar.background#1A1625
- statusBar.border#6C7A8940
- statusBar.foreground#F8E8FF
- statusBarItem.background#1A1625
- statusBarItem.border#6C7A8940
- statusBarItem.foreground#F8E8FF
- tab.activeBackground#2A1F35
- tab.hoverBackground#2A1F35
- tab.inactiveBackground#1A1625
- terminal.background#1A1625
- terminal.foreground#F8E8FF
- terminal.selectionBackground#FF8FA333
- terminalCursor.background#F8E8FF
- terminalCursor.foreground#FF8FA3
- titleBar.activeBackground#1A1625
- titleBar.activeForeground#F8E8FF
- titleBar.border#6C7A8940
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #A08FB0 | italic |
| string, constant.other.symbol | #E06C75 | — |
| variable, identifier | #E5C07B | — |
| keyword, storage.type, import, support.type | #C678DD | bold |
| storage.type, storage.modifier | #C678DD | — |
| constant.numeric, constant.language | #D19A66 | — |
| entity.name.function, support.function, meta.function-call, variable.function | #61AFEF | — |
| entity.name.class, support.class, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #E5C07B | — |
| entity.name.tag, support.class.component.html | #56B6C2 | — |
| entity.other.attribute-name, attribute.name | #98C379 | — |
| support.type.property-name.css, meta.property-name.css | #61AFEF | — |
| support.constant.property-value.css, constant.other.color.rgb-value.css, constant.numeric.css | #E06C75 | — |
| constant.language.boolean, constant.language.null | #56B6C2 | — |
| variable.parameter, meta.parameter | #C678DD | — |
| entity.name.type, entity.name.interface, support.type | #98C379 | — |
| variable.other.property | #D19A66 | — |
| support.function, meta.function-call | #61AFEF | — |