Theme - Oceanic Reef
Publisher: pzuraqThemes in package: 2
Oceanic Reef theme for VSCode
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#19202b
- activityBar.dropBackground#399ef480
- activityBarBadge.background#399ef4
- debugToolBar.background#19202b
- dropdown.background#1c2431
- editor.background#12171f
- editor.foreground#efefef
- editor.lineHighlightBackground#1d3545
- editor.lineHighlightBorder#ffffff1a
- editor.rangeHighlightBackground#ffffff0d
- editor.selectionBackground#2e4553
- editorCursor.foreground#f8f8f0
- editorGroup.dropBackground#399ef480
- editorGroupHeader.tabsBackground#151b25
- editorHoverWidget.background#151b25
- editorLineNumber.foreground#ffffff4d
- editorMarkerNavigation.background#151b25
- editorWhitespace.foreground#234154
- editorWidget.background#151b25
- focusBorder#399ef4
- foreground#efefef
- input.background#1c2431
- inputOption.activeBorder#399ef4
- list.activeSelectionBackground#d05572
- list.dropBackground#399ef480
- list.focusBackground#399ef480
- list.hoverBackground#ffffff1a
- list.inactiveSelectionBackground#ffffff33
- panel.background#151b25
- panel.border#ffffff1a
- panelTitle.activeBorder#efefef80
- panelTitle.inactiveForeground#efefef80
- peekView.border#399ef4
- peekViewEditor.background#0e1218
- peekViewResult.background#151b25
- peekViewTitle.background#12171f
- pickerGroup.border#ffffff1a
- sideBar.background#151b25
- sideBarSectionHeader.background#19202b
- statusBar.background#0e1218
- statusBar.debuggingBackground#399ef4
- statusBar.noFolderBackground#0e1218
- statusBarItem.activeBackground#399ef480
- statusBarItem.hoverBackground#ffffff1a
- tab.border#151b25
- tab.inactiveBackground#151b25
- titleBar.activeBackground#0e1218
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #efefefff | — |
| comment, punctuation.definition.comment | #65737e | — |
| variable | #FCC672 | — |
| keyword | #E47D80 | — |
| storage.modifier | #D95757 | — |
| storage.type | #FFB266 | italic |
| keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #8AD6F2 | — |
| entity.name.tag, meta.tag.sgml | #92E89D | — |
| entity.other.attribute-name | #92E89D | — |
| punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #F7FCA2 | — |
| variable.parameter.handlebars | #FFFFFF | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level | #FF9DD1 | — |
| support.other.variable, string.other.link | #F2777A | — |
| constant.numeric | #78BDD6 | — |
| constant.language | #F99157 | — |
| support.constant | #FFB266 | — |
| constant.character | #56D1A7 | — |
| constant.other | #56D1A7 | — |
| variable.parameter | #FFD2A6 | italic |
| keyword.other.unit | #FFB266 | — |
| string, constant.other.symbol, constant.other.key | #8AD6F2 | normal |
| entity.other.inherited-class, markup.heading, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js | #F2AAEC | normal |
| entity.name.class, entity.name.type.class | #FFFFFF | — |
| support.type, support.class | #F7FCA2 | — |
| variable.language | #EC5F67 | italic |
| string.regexp | #8AD6F2 | — |
| constant.character.escape | #F2AAEC | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #6699CC | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #EC5F67 | italic |
| markup.inserted | #92E89D | — |
| markup.deleted | #E47D80 | — |
| markup.changed | #8AD6F2 | — |
| markup.deleted.git_gutter | #E47D80 | — |
| markup.inserted.git_gutter | #92E89D | — |
| markup.changed.git_gutter | #8AD6F2 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...