Sceanic
Publisher: Tobias TimmThemes in package: 3
Spacegray meets Oceanic Next
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#161B23
- activityBar.foreground#65737F
- activityBarBadge.background#6699CC
- activityBarBadge.foreground#F8FAFD
- badge.background#282c34
- breadcrumb.activeSelectionForeground#ec5f66
- breadcrumb.focusForeground#dfe1e8
- breadcrumb.foreground#ced4de
- breadcrumbPicker.background#161B23
- button.background#404754
- debugToolBar.background#21252b
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#1d1f23
- dropdown.border#1E232E
- editor.background#1E232E
- editor.findMatchHighlightBackground#fbdd8390
- editor.foreground#ced4de
- editor.lineHighlightBackground#66747f30
- editor.selectionBackground#67769660
- editor.selectionHighlightBackground#ffffff10
- editor.wordHighlightBackground#ffffff40
- editor.wordHighlightStrongBackground#abb2bf26
- editorCursor.background#ffffffc9
- editorCursor.foreground#b6bcc4
- editorError.foreground#ec5f66
- editorGroup.background#181A1F
- editorGroup.border#181A1F
- editorGroupHeader.tabsBackground#161B23
- editorGroupHeader.tabsBorder#1E232E
- editorGutter.addedBackground#99C794
- editorGutter.background#1E232E
- editorGutter.deletedBackground#ec5f66
- editorGutter.foreground#ffffff33
- editorGutter.modifiedBackground#6699CC
- editorHoverWidget.background#21252B
- editorHoverWidget.border#181A1F
- editorIndentGuide.background#ffffff1a
- editorLineNumber.foreground#495162
- editorLink.activeForeground#64727f
- editorMarkerNavigation.background#21252b
- editorOverviewRuler.addedForeground#99C794
- editorOverviewRuler.bracketMatchForeground#343d46
- editorOverviewRuler.deletedForeground#ec5f66
- editorOverviewRuler.errorForeground#ec5f66
- editorOverviewRuler.infoForeground#6796e6
- editorOverviewRuler.modifiedForeground#6699CC
- editorOverviewRuler.warningForeground#cd9731
- editorRuler.foreground#abb2bf26
- editorSuggestWidget.background#21252B
- editorSuggestWidget.border#181A1F
- editorSuggestWidget.selectedBackground#2c313a
- editorUnnecessary.foreground#7F7F7F
- editorWhitespace.foreground#3B4048
- editorWidget.background#21252B
- extensionButton.prominentBackground#343d46
- extensionButton.prominentForeground#ced4de
- extensionButton.prominentHoverBackground#64727f
- focusBorder#343d46
- gitDecoration.conflictingResourceForeground#ec5f66
- gitDecoration.deletedResourceForeground#ec5f66
- gitDecoration.ignoredResourceForeground#5b6771
- gitDecoration.modifiedResourceForeground#6699CC
- gitDecoration.untrackedResourceForeground#5b6771
- input.background#1d1f23
- list.activeSelectionBackground#343d46
- list.activeSelectionForeground#dfe1e8
- list.focusBackground#343d46
- list.focusForeground#a7adba
- list.highlightForeground#C5C5C5
- list.hoverBackground#161B23
- list.hoverForeground#c0c5cd
- list.inactiveSelectionBackground#343d46
- list.inactiveSelectionForeground#dfe1e8
- notificationCenterHeader.foreground#ced4de
- notifications.background#282c35
- notifications.foreground#ced4de
- panel.background#161B23
- panel.border#1E232B
- peekView.border#343d46
- peekViewEditor.matchHighlightBackground#29244b
- peekViewEditor.matchHighlightBorder#343d46
- peekViewTitle.background#161B23
- peekViewTitleDescription.foreground#ced4de
- peekViewTitleLabel.foreground#ced4de
- pickerGroup.border#343d46
- pickerGroup.foreground#c0c5cd
- progressBar.background#343d46
- scrollbar.shadow#282c35
- scrollbarSlider.activeBackground#495162
- scrollbarSlider.background#4951629F
- scrollbarSlider.hoverBackground#495162
- sideBar.background#161B23
- sideBar.border#1E232B
- sideBar.foreground#65737F
- sideBarSectionHeader.background#282c34
- sideBarSectionHeader.foreground#4f5b66
- statusBar.background#161B23
- statusBar.debuggingBackground#ec5f66
- statusBar.debuggingBorder#ec5f66
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#4f5b66
- statusBar.noFolderBackground#21252B
- statusBarItem.hoverBackground#2c313a
- tab.activeBackground#1E232E
- tab.border#1E232B
- tab.inactiveBackground#161B23
- terminal.ansiBlack#7F7F7F
- terminal.ansiBlue#6699CC
- terminal.ansiBrightBlack#7F7F7F
- terminal.ansiBrightBlue#6699CC
- terminal.ansiBrightCyan#5FB3B3
- terminal.ansiBrightGreen#99C794
- terminal.ansiBrightMagenta#C594C5
- terminal.ansiBrightRed#ec5f66
- terminal.ansiBrightWhite#ced4de
- terminal.ansiBrightYellow#ffe2a9
- terminal.ansiCyan#5FB3B3
- terminal.ansiGreen#99C794
- terminal.ansiMagenta#C594C5
- terminal.ansiRed#ec5f66
- terminal.ansiWhite#ced4de
- terminal.ansiYellow#ffe2a9
- titleBar.activeBackground#161B23
- titleBar.activeForeground#a7adba
- titleBar.inactiveBackground#161B23
- titleBar.inactiveForeground#6B717D
- widget.shadow#1E232E
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #66747f | italic |
| punctuation.definition, punctuation.definition.annotation, punctuation.definition.heading, punctuation.definition.list_item, punctuation.definition.thematic-break, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end | #808e99 | — |
| punctuation.definition.blockquote | #ffffff13 | — |
| meta.separator.thematic-break | — | — |
| string, markup.inline.raw.string | #99c794 | — |
| constant.numeric | #f99058 | — |
| constant.numeric.line-number | #ffffff33 | — |
| constant.numeric.line-number.match | #fac761 | — |
| constant.language | #ec5f66 | italic |
| constant.character, constant.other | #c695c6 | — |
| variable.member | #ec5f66 | — |
| variable.parameter, meta.selectionset.graphql meta.arguments.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql support.type.graphql, support.variable.property.dom, entity.name.type.module, meta.variables.graphql meta.type.list.graphql support.type.graphql, entity.name.function.directive.graphql | #ced4de | — |
| variable.language | #ec5f66 | italic |
| variable.function, meta.selectionset.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql variable.graphql | #6699cc | — |
| variable.annotation | #6699cc | — |
| keyword, keyword.operator.word | #c695c6 | — |
| keyword.operator | #fab05c | — |
| storage | #ec5f66 | — |
| storage.type, storage.type.type | #c695c6 | italic |
| storage.type.function.arrow, keyword.operator.type.annotation, meta.interface meta.field.declaration meta.type.annotation keyword.operator.type.annotation, meta.type.declaration meta.object.type meta.field.declaration meta.type.annotation keyword.operator.type.annotation, meta.interface meta.method.declaration meta.return.type keyword.operator.type.annotation, meta.type.declaration meta.object.type meta.method.declaration meta.return.type keyword.operator.type.annotation, punctuation.accessor, punctuation.separator.period | #fab05c | — |
| entity.name.variable | #ced4de | — |
| entity.name, entity.name.type.class, meta.type.interface.graphql support.type.graphql, meta.enum.graphql support.type.enum.graphql | #fac761 | — |
| entity.name.function, entity.name.type | #6699cc | — |
| entity.name.label | #6699cc | — |
| entity.other.inherited-class | #ced4deff | — |
| entity.name.tag, support.class.component | #ec5f66 | — |
| entity.name.tag support.class.component | #fac761 | — |
| entity.other.attribute-name | #c695c6 | italic |
| support.variable | #6699cc | italic |
| support.function | #6699cc | italic |
| support.macro | #6699cc | italic |
| support.constant | #f99058 | italic |
| support.type | #6699cc | italic |
| support.type.primitive, support.type.builtin.graphql, support.type.builtin | #c695c6 | normal |
| support.class | #6699cc | italic |
| meta.var.expr punctuation.definition.string.template.begin string.template, meta.var.expr punctuation.definition.string.template.end string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #c695c6 | — |
| invalid | #f1888e | — |
| invalid.deprecated | #faae85 | — |
| markup.error, message.error | #ec5f66 | — |
| markup.warning | #fac761 | — |
| markup.info | #6699cc | — |
| markup.ignored | #5b6771 | — |
| markup.untracked | #5b6771 | — |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.italic markup.bold, markup.bold markup.italic | — | bold italic |
| markup.heading, entity.name.section.markdown | #ec5f66 | — |
| markup.underline.link, string.other.link | #6699cc | — |
| string.other.link.description | #99c794 | — |
| markup.list.numbered.bullet | #808e99 | — |
| markup.quote | #8e9aa4 | — |
| markup.raw | — | — |
| markup.raw.inline | — | — |
| meta.table.header.markdown, meta.table.header-separator.markdown, meta.table.markdown | — | — |
| support.type.property-name | #ced4de | normal |
| support.type.custom-property.name | #ced4de | normal |
| entity.other.attribute-name.class.css | #c695c6 | normal |
| entity.other.attribute-name.id.css | #fac761 | normal |
| keyword.other.important | #ec5f66 | — |
| support.type.vendor-prefix | #808e99 | — |
| entity.other.pseudo-class | #aab4bb | — |
| entity.other.pseudo-element | #aab4bb | — |
| source.json meta.structure.dictionary.json string.json support.type.property-name.json | #c695c6 | — |
| meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #99c794 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #fac761 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #fac761 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.array.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #6699cc | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #6699cc | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #f99058 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #f99058 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #ec5f66 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #ec5f66 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #c695c6 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #c695c6 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #fac761 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #fac761 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #6699cc | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #6699cc | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #f99058 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #f99058 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #99c794 | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #99c794 | — |
| meta.interface meta.method.declaration meta.definition.method entity.name.function, meta.type.declaration meta.object.type meta.method.declaration meta.definition.method entity.name.function, meta.interface meta.field.declaration meta.definition.property entity.name.function, meta.type.declaration meta.object.type meta.field.declaration meta.definition.property entity.name.function, entity.name.type.alias, entity.name.type.interface, storage.modifier.import | #ced4deff | — |
| keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as, constant.language.import-export-all, keyword.operator.ternary, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, keyword.control.new, variable.language.wildcard, keyword.other.import | #fab05c | — |
| keyword.control.default, storage.modifier.async | #c695c6 | italic |
| storage.modifier | #ec5f66 | italic |
| meta.object-literal.key, meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql, meta.type.interface.graphql meta.type.object.graphql meta.variables.graphql variable.parameter.graphql, meta.enum.graphql meta.type.object.graphql constant.character.enum.graphql | #99c794 | — |
| meta.brace.round, punctuation.definition, keyword.operator.ternary, meta.brace.curly.graphql, meta.brace.square, punctuation.operation.graphql, punctuation.colon.graphql | #808e99 | — |
| markup.inserted | #99C794 | — |
| markup.deleted | #ec5f66 | — |
| markup.changed | #6699cc | — |
| constant.numeric.line-number.find-in-files - match | #AB7967 | — |
| entity.name.filename.find-in-files | #99C794 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #ec5f66 | — |
| token.debug-token | #b267e6 | — |
| meta.template.expression | #ced4de | — |
| meta.class.identifier storage.modifier | #c695c6 | italic |
| storage.type.generic | #6796e6 | — |
| entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.sgml.doctype.html, markup.italic.markdown, markup.quote.markdown, entity.other.attribute-name, entity.name.tag.custom, source.js entity.other.attribute-name.js, source.js.jsx entity.other.attribute-name.js, ext.html.basic entity.other.attribute-name.html, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.type.annotation, assignment.coffee, italic, quote, type .function, type.function, storage.modifier, storage.type.class, modifier, keyword.control.flow, source.shell keyword.control.shell, keyword.control.default, keyword.control.switch, this, variable.language.this.php, keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as, keyword.control, keyword.other.import | — | italic |
| meta.interface.ts variable.object.property, meta.interface.tsx variable.object.property, meta.type.declaration.ts variable.object.property, meta.type.declaration.tsx variable.object.property, meta.function.parameter.typehinted.php storage.type.php, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, source.js meta.group.braces.curly.js keyword.other.substitution, source.js.jsx meta.group.braces.curly.js.jsx keyword.other.substitution, keyword.operator.type.annotation, keyword.operator.type, keyword.operator.logical, source.php keyword.operator, variable.object.property.ts, variable.object.property.tsx, keyword.operator.class.php, support.function.basic_functions.php, keyword.operator.flowtype.other.js, keyword.operator.flowtype.other.js.jsx, source.shell keyword.operator, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, source.js meta.group.regexp keyword.operator, source.js.jsx meta.group.regexp keyword.operator, source.ts meta.group.regexp keyword.operator, source.tsx meta.group.regexp keyword.operator, string.regexp.js keyword.control.anchor.regexp, string.regexp.js.jsx keyword.control.anchor.regexp, string.regexp.ts keyword.control.anchor.regexp, string.regexp.tsx keyword.control.anchor.regexp, keyword.operator.other.elixir, keyword.operator.assignment.go, support.type.builtin, support.class.component, meta.type.interface.graphql support.type.graphql, meta.type.interface.graphql meta.type.object.graphql support.type.graphql, meta.enum.graphql support.type.enum.graphql, support.variable.property.dom, storage.type.primitive.java, storage.type.object.java, storage.type.object.array.java, storage.type.java, storage.type.generic.java, storage.modifier.import.java, meta.variables.graphql meta.type.list.graphql support.type.graphql | — | normal |