My Oceanic Theme
Publisher: ZAndyThemes in package: 1
Dark theme inspired by Material Oceanic with enhanced semantic highlighting for TypeScript, Vue, and CSS
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#3c3f41
- activityBar.foreground#dadee0
- activityBar.inactiveForeground#8A9199
- activityBarBadge.background#4A90A4
- activityBarBadge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#4A90A4
- breadcrumb.background#263238
- breadcrumb.focusForeground#dadee0
- breadcrumb.foreground#8A9199
- button.background#4A90A4
- button.foreground#FFFFFF
- button.hoverBackground#5FA4BA
- dropdown.background#2C3439
- dropdown.border#45494a
- dropdown.foreground#dadee0
- editor.background#263238
- editor.findMatchBackground#4A5F6A60
- editor.findMatchHighlightBackground#4A5F6A40
- editor.foreground#C3CEE3
- editor.lineHighlightBackground#1b2529
- editor.lineHighlightBorder#00000000
- editor.wordHighlightBackground#3A474D60
- editor.wordHighlightStrongBackground#3A474D90
- editorError.border#FF537040
- editorError.foreground#FF5370
- editorGroup.border#45494a
- editorGroupHeader.noTabsBackground#323436
- editorGroupHeader.tabsBackground#323436
- editorGutter.addedBackground#C3E88D
- editorGutter.background#263238
- editorGutter.deletedBackground#F07178
- editorGutter.modifiedBackground#80CBC4
- editorIndentGuide.activeBackground1#4A90A4
- editorIndentGuide.background1#37474F
- editorInfo.border#82AAFF40
- editorInfo.foreground#82AAFF
- editorLineNumber.activeForeground#B0BEC5
- editorLineNumber.foreground#546E7A
- editorRuler.foreground#37474F
- editorWarning.border#FFCB6B40
- editorWarning.foreground#FFCB6B
- focusBorder#4A90A4
- gitDecoration.addedResourceForeground#C3E88D
- gitDecoration.conflictingResourceForeground#FC9867
- gitDecoration.deletedResourceForeground#F07178
- gitDecoration.ignoredResourceForeground#AB7967
- gitDecoration.modifiedResourceForeground#80CBC4
- gitDecoration.untrackedResourceForeground#C3E88D
- input.background#2C3439
- input.border#45494a
- input.foreground#dadee0
- inputOption.activeBorder#4A90A4
- list.activeSelectionBackground#263238
- list.activeSelectionForeground#dadee0
- list.focusBackground#4A5762
- list.focusHighlightForeground#82AAFF
- list.highlightForeground#82AAFF
- list.hoverBackground#3A474D
- list.hoverForeground#dadee0
- list.inactiveSelectionBackground#2C3439
- list.inactiveSelectionForeground#dadee0
- panel.background#3c3f41
- panel.border#45494a
- scrollbarSlider.activeBackground#009688
- scrollbarSlider.background#1a676280
- scrollbarSlider.hoverBackground#009688
- sideBar.background#3c3f41
- sideBar.border#5a5f63
- sideBar.foreground#dadee0
- sideBarSectionHeader.background#3c3f41
- sideBarSectionHeader.foreground#dadee0
- sideBarTitle.foreground#dadee0
- statusBar.background#3c3f41
- statusBar.debuggingBackground#3c3f41
- statusBar.foreground#dadee0
- statusBar.noFolderBackground#3c3f41
- tab.activeBackground#263238
- tab.activeBorder#4A90A4
- tab.activeBorderTop#4A90A4
- tab.activeForeground#dadee0
- tab.border#45494a
- tab.inactiveBackground#3c3f41
- tab.inactiveForeground#8A9199
- terminal.ansiBlack#263238
- terminal.ansiBlue#82AAFF
- terminal.ansiBrightBlack#546E7A
- terminal.ansiBrightBlue#82AAFF
- terminal.ansiBrightCyan#89DDFF
- terminal.ansiBrightGreen#C3E88D
- terminal.ansiBrightMagenta#C792EA
- terminal.ansiBrightRed#FF5370
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD590
- terminal.ansiCyan#89DDFF
- terminal.ansiGreen#C3E88D
- terminal.ansiMagenta#C792EA
- terminal.ansiRed#F07178
- terminal.ansiWhite#C3CEE3
- terminal.ansiYellow#FFCB6B
- terminal.background#263238
- terminal.foreground#C3CEE3
- titleBar.activeBackground#3c3f41
- titleBar.activeForeground#dadee0
- titleBar.border#5a5f63
- titleBar.inactiveBackground#1A1F23
- titleBar.inactiveForeground#8A9199
- tree.inactiveIndentGuidesStroke#45494a
- tree.indentGuidesStroke#4A90A4
- tree.tableOddRowsBackground#3c3f4115
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, entity.name.tag.template.html.vue | #26bda4 | — |
| meta.template-tag.start entity.name.tag.template.html.vue | #F07178 | — |
| meta.tag.other.unrecognized.html.derivative entity.name.tag.html | #26bda4 | — |
| punctuation.definition.tag.begin.html.vue, punctuation.definition.tag.end.html.vue | #89DDFF | — |
| keyword.control.conditional.vue, keyword.control.loop.vue, meta.attribute.directive | #FFCB6B | italic |
| entity.name.tag.css | #F07178 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #C792EA | italic |
| variable.css, variable.argument.css | #FFCB6B | — |
| support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, meta.property-value.css | #F07178 | — |
| support.function.misc.css, support.function.transform.css, support.function.calc.css, support.function.gradient.css | #82AAFF | — |
| support.constant.vendored.property-value.css, keyword.other.unit.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.s.css, keyword.other.unit.ms.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css | #F07178 | |
| constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.css, keyword.other.unit.percentage.css | #89DDFF | — |
| constant.numeric.css | #F07178 | — |
| keyword.control.at-rule.keyframes.css | #C792EA | italic |
| variable.parameter.keyframe-list.css, entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css | #FFCB6B | — |
| variable.other.readwrite.alias | #EEFFE3 | — |
| variable.other.readwrite | #EEFFE3 | — |
| keyword, keyword.operator.new, storage.type, storage.modifier | #C792EA | italic |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.operator.expression.import | #C792EA | — |
| constant.language.import-export-all | #89DDFF | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #89DDFF | — |
| keyword.control.conditional, keyword.control.trycatch, keyword.control.flow | #C792EA | — |
| keyword.control.as, keyword.operator.expression.keyof, keyword.operator.expression.typeof, keyword.operator.expression.infer | #C792EA | — |
| keyword.operator.type | #89DDFF | — |
| keyword.operator, storage.type.function.arrow | #89DDFF | |
| punctuation.accessor, punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.typeparameters, meta.brace | #89DDFF | — |
| comment, comment.line, comment.block, punctuation.definition.comment | #546E7A | italic |
| storage.type.class.jsdoc, entity.name.type.instance.jsdoc | #C792EA | bold italic |
| string, string.quoted, string.regexp | #C3E88D | — |
| constant.character.escape, constant.other.placeholder | #89DDFF | — |
| constant.numeric | #F78C6C | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan | #C792EA | italic |
| variable.language.this, variable.language.super | #C792EA | — |
| support.type.primitive, support.type.builtin | #C792EA | — |
| entity.name.type.parameter | #FFCB6B | — |
| support.class.console | #FFCB6B | — |
| keyword.other.debugger | #F78C6C | — |
| entity.name.tag, punctuation.definition.tag | #F07178 | — |
| entity.other.attribute-name | #FFCB6B | italic |
| meta.decorator, punctuation.decorator | #82AAFF | — |
| support.type.property-name.json, meta.structure.dictionary.key.json | #C792EA | — |
| constant.language.json | #F78C6C | italic |
| support.type.property-name.css | #B2CCD6 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #FFCB6B | — |
| meta.function-call entity.name.function | #82AAFF | italic |
| meta.definition.method entity.name.function | #82AAFF | — |
| variable.other.object | #EEFFFF | — |
| variable.other.property | #b7bbbd | — |