React Ocean Next Extended Theme
Publisher: Helder BertoldoThemes in package: 2
React Ocean Next Theme extended to Visual Studio Code workbench
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#2F333D
- activityBar.foreground#D7DAE0
- activityBarBadge.background#4D78CC
- activityBarBadge.foreground#F8FAFD
- badge.background#282d34
- button.background#404754
- debugToolBar.background#21252b
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#1d1f23
- dropdown.border#181A1F
- editor.background#282d34
- editor.editor.findMatchBackground#42557B
- editor.findMatchHighlightBackground#314365
- editor.lineHighlightBackground#14161b
- editor.selectionBackground#484e5b
- editor.selectionHighlightBackground#484e5b
- editor.wordHighlightBackground#484e5b
- editor.wordHighlightStrongBackground#abb2bf26
- editorCursor.foreground#f8f8f0
- editorError.foreground#c24038
- editorGroup.background#181A1F
- editorGroup.border#181A1F
- editorGroupHeader.tabsBackground#21252B
- editorHoverWidget.background#21252B
- editorHoverWidget.border#181A1F
- editorIndentGuide.background#3B4048
- editorLineNumber.foreground#495162
- editorMarkerNavigation.background#21252b
- editorRuler.foreground#abb2bf26
- editorSuggestWidget.background#21252B
- editorSuggestWidget.border#181A1F
- editorSuggestWidget.selectedBackground#2c313a
- editorWhitespace.foreground#3B4048
- editorWidget.background#21252B
- input.background#1d1f23
- list.activeSelectionBackground#2c313a
- list.activeSelectionForeground#d7dae0
- list.focusBackground#383E4A
- list.highlightForeground#C5C5C5
- list.hoverBackground#292d35
- list.inactiveSelectionBackground#2c313a
- list.inactiveSelectionForeground#d7dae0
- notification.background#21252b
- peekViewEditor.matchHighlightBackground#29244b
- scrollbarSlider.activeBackground#747D9180
- scrollbarSlider.background#4E566680
- scrollbarSlider.hoverBackground#5A637580
- sideBar.background#21252b
- sideBarSectionHeader.background#282d34
- statusBar.background#21252B
- statusBar.debuggingBackground#7e0097
- statusBar.debuggingBorder#66017a
- statusBar.debuggingForeground#d4d4d4
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#21252B
- statusBarItem.hoverBackground#2c313a
- tab.activeBackground#2c313a
- tab.border#181A1F
- tab.inactiveBackground#21252B
- terminal.ansiBlack#2D3139
- terminal.ansiBlue#2e8ccf
- terminal.ansiGreen#98c379ff
- terminal.ansiYellow#B4881D
- terminal.foreground#C8C8C8
- titleBar.activeBackground#282d34
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#282d34
- titleBar.inactiveForeground#6B717D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #D4D4D4 | — |
| comment, punctuation.definition.comment | #7f7f7f | italic |
| variable.language | #c5a5c5 | — |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #79b6f2 | — |
| source.js constant.other.object.key.js string.unquoted.label.js | #E15A60 | — |
| variable-meta.export.default, variable.parameter, variable.other.readwrite-meta.export.default | #D4D4D4 | — |
| keyword-meta.tag.attributes, keyword.operator.new, storage.type, storage.modifier, keyword.control | #c5a5c5 | — |
| constant.other.color, meta.tag - meta.tag.without-attributes, keyword.other.template, keyword.other.substitution | #5FB3B3 | — |
| meta.tag.attributes - meta.embedded.expression | #cecece | — |
| punctuation - punctuation.definition.string.begin, punctuation.separator.key-value-punctuation.separator.key-value.css, punctuation.definition.block, punctuation.definition.parameters, punctuation.terminator.statement, punctuation.separator.comma, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, punctuation.separator.inheritance.php | #5FB3B3 | — |
| keyword.operator - keyword.operator.assignment | #c5a5c5 | — |
| keyword.operator.assignment - meta.tag.attributes, keyword.operator.arithmetic, punctuation.separator.key-value.css | #d7deea | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #fc929e | — |
| meta.tag.without-attributes, meta.embedded.expression, meta.jsx.children | #d4d4d4 | — |
| entity.name.function, support.function, variable.function, keyword.other.special-method, meta.block-level | #79b6f2 | — |
| variable.other.object | #79b6f2 | — |
| meta.export.default | #79b6f2 | — |
| meta.export.default | #79b6f2 | — |
| variable.other.object.property, support.variable.property.dom | #d7deea | — |
| meta.object-literal.key | #d4d4d4 | — |
| meta.function-call.js - support.variable.dom.js | #79b6f2 | — |
| support.variable.dom.js | #d4d4d4 | — |
| support.function.dom.js | #79b6f2 | — |
| support.other.variable, string.other.link | #F2777A | — |
| constant.numeric, constant.language, support.constant, constant.character, keyword.other.unit | #5a9bcf | — |
| string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #8dc891 | — |
| entity.name.class, entity.other.inherited-class, entity.name.type, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter | #FAC863 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #E15A60 | — |
| entity.name.method.js | #D8DEE9 | — |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #D8DEE9 | — |
| entity.other.attribute-name | #c5a5c5 | — |
| markup.inserted | #8dc891 | — |
| markup.deleted | #E15A60 | — |
| markup.changed | #BB80B3 | — |
| string.regexp | #5FB3B3 | — |
| constant.character.escape | #5FB3B3 | — |
| *url*, *link*, *uri* | — | underline |
| constant.numeric.line-number.find-in-files - match | #AB7967 | — |
| entity.name.filename.find-in-files | #8dc891 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
| meta.brace.round | #5fb3b3 | — |
| meta.definition.variable-entity.name.function | #d4d4d4 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...