Umi
Publisher: Tobias TimmThemes in package: 2
Umi is an oceanic color based Visual Studio Code theme
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#000A24
- activityBar.foreground#D7DAE0
- activityBarBadge.background#15BDDB
- activityBarBadge.foreground#F8FAFD
- badge.background#282c34
- breadcrumb.activeSelectionForeground#15BDDB
- breadcrumb.focusForeground#dfe1e8
- breadcrumb.foreground#d4d4d4
- breadcrumbPicker.background#000A24
- button.background#15BDDB
- debugToolBar.background#21252b
- diffEditor.insertedTextBackground#15BDDB
- diffEditor.removedTextBackground#f1888e
- dropdown.background#000A24
- dropdown.border#02112B
- editor.background#02112B
- editor.findMatchHighlightBackground#314365
- editor.foreground#d4d4d4
- editor.lineHighlightBackground#67769630
- editor.selectionBackground#67769660
- editor.selectionHighlightBackground#ffffff10
- editor.wordHighlightBackground#314365
- editor.wordHighlightStrongBackground#abb2bf26
- editorCursor.background#ffffffc9
- editorCursor.foreground#b6bcc4
- editorError.foreground#f1888e
- editorGroup.background#161922
- editorGroup.border#161922
- editorGroup.dropBackground#000A24
- editorGroupHeader.tabsBackground#000A24
- editorGroupHeader.tabsBorder#02112B
- editorGutter.addedBackground#12D8C3
- editorGutter.background#02112B
- editorGutter.deletedBackground#f1888e
- editorGutter.modifiedBackground#15BDDB
- editorHoverWidget.background#02112B
- editorHoverWidget.border#161922
- editorIndentGuide.background#67769640
- editorLineNumber.foreground#67769660
- editorLink.activeForeground#12D8C3
- editorMarkerNavigation.background#21252b
- editorOverviewRuler.addedForeground#12D8C3
- editorOverviewRuler.deletedForeground#6F7899
- editorOverviewRuler.errorForeground#f1888e
- editorOverviewRuler.infoForeground#6f7899
- editorOverviewRuler.modifiedForeground#15BDDB
- editorOverviewRuler.warningForeground#ffedcb
- editorRuler.foreground#67769630
- editorSuggestWidget.background#21252B
- editorSuggestWidget.border#161922
- editorSuggestWidget.selectedBackground#2c313a
- editorUnnecessary.foreground#6F7899
- editorWarning.foreground#ffedcb
- editorWhitespace.foreground#67769640
- editorWidget.background#21252B
- extensionButton.prominentBackground#343d64
- extensionButton.prominentForeground#d4d4d4
- extensionButton.prominentHoverBackground#15BDDB
- focusBorder#15BDDB
- gitDecoration.addedResourceForgeround#12D8C3
- gitDecoration.conflictingResourceForeground#f1888e
- gitDecoration.deletedResourceForeground#6F7899
- gitDecoration.ignoredResourceForeground#64727f
- gitDecoration.modifiedResourceForeground#15BDDB
- gitDecoration.untrackedResourceForeground#f1888e
- input.background#000A24
- input.border#343d64
- list.activeSelectionBackground#67769640
- list.activeSelectionForeground#dfe1e8
- list.errorForeground#f1888e
- list.focusBackground#67769640
- list.focusForeground#dfe1e8
- list.highlightForeground#15BDDB
- list.hoverBackground#000A24
- list.hoverForeground#c0c5cd
- list.inactiveFocusBackground#67769640
- list.inactiveSelectionBackground#67769635
- list.inactiveSelectionForeground#dfe1e8
- list.warningForeground#ffedcb
- listWarning.foreground#ffedcb
- notificationCenterHeader.foreground#d4d4d4
- notifications.background#000A24
- notifications.foreground#d4d4d4
- panel.background#0A1933
- panel.border#0A1933
- peekView.border#314365
- peekViewEditor.matchHighlightBackground#29244b
- peekViewEditor.matchHighlightBorder#15BDDB
- peekViewTitle.background#000A24
- peekViewTitleDescription.foreground#d4d4d4
- peekViewTitleLabel.foreground#d4d4d4
- pickerGroup.border#15BDDB
- pickerGroup.foreground#15BDDB
- progressBar.background#15BDDB
- scrollbar.shadow#02112B
- scrollbarSlider.activeBackground#6d87b860
- scrollbarSlider.background#6d87b830
- scrollbarSlider.hoverBackground#6d87b830
- selection.background#15BDDB
- settings.dropdownBackground#000A24
- settings.dropdownBorder#02112B
- settings.headerForeground#c0c5cd
- settings.modifiedItemIndicator#15BDDB
- sideBar.background#000A24
- sideBar.border#02112B
- sideBar.foreground#97A5B2
- sideBarSectionHeader.background#000A24
- sideBarSectionHeader.foreground#c0c5cd
- statusBar.background#000A24
- statusBar.border#02112B
- statusBar.debuggingBackground#15BDDB
- statusBar.debuggingBorder#02112B
- statusBar.debuggingForeground#d4d4d4
- statusBar.foreground#97A5B2
- statusBar.noFolderBackground#000A24
- statusBarItem.hoverBackground#02112B
- tab.activeBackground#02112B
- tab.border#000A24
- tab.inactiveBackground#000A24
- terminal.ansiBlack#6F7899
- terminal.ansiBlue#15BDDB
- terminal.ansiBrightBlack#6F7899
- terminal.ansiBrightBlue#15BDDB
- terminal.ansiBrightCyan#d6e9ff
- terminal.ansiBrightGreen#12D8C3
- terminal.ansiBrightMagenta#9DA5E8
- terminal.ansiBrightRed#f1888e
- terminal.ansiBrightWhite#fff
- terminal.ansiBrightYellow#ffedcb
- terminal.ansiCyan#d6e9ff
- terminal.ansiGreen#12D8C3
- terminal.ansiMagenta#9DA5E8
- terminal.ansiRed#f1888e
- terminal.ansiWhite#fff
- terminal.ansiYellow#ffedcb
- terminal.foreground#d4d4d4
- terminal.selectionBackground#67769640
- terminalCursor.background#d6e9ff
- terminalCursor.foreground#15BDDB
- textLink.foreground#9DA5E8
- titleBar.activeBackground#000A24
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#000A24
- titleBar.inactiveForeground#6B717D
- widget.shadow#02112B
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6F7899 | — |
| 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 | #8892aa | — |
| punctuation.definition.blockquote | #ffffff13 | — |
| meta.separator.thematic-break | — | — |
| string, markup.inline.raw.string | #95BFF2 | — |
| constant.numeric | #95BFF2 | — |
| constant.numeric.line-number | #ffffff33 | — |
| constant.numeric.line-number.match | #ffedcb | — |
| constant.language | #12D8C3 | — |
| constant.character, constant.other | #15BDDB | — |
| variable.member | #12D8C3 | — |
| meta.selectionset.graphql meta.arguments.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql support.type.graphql, entity.name.type.module, meta.variables.graphql meta.type.list.graphql support.type.graphql | #d6e9ff | — |
| variable.language | #12D8C3 | — |
| variable.function, meta.selectionset.graphql variable.graphql, meta.type.interface.graphql meta.type.object.graphql variable.graphql | #d6e9ff | — |
| variable.annotation | #ffedcb | — |
| keyword, keyword.operator.word | #15BDDB | — |
| keyword.operator | #ffedcb | — |
| storage | #15BDDB | — |
| storage.type, storage.type.type | #15BDDB | — |
| storage.type.java, storage.type.object.array.java, storage.type.groovy | #12D8C3 | — |
| storage.type.primitive | #12D8C3 | — |
| 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 | #ffedcb | — |
| entity.name.variable | #d4d4d4 | — |
| entity.name, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, meta.type.interface.graphql support.type.graphql, meta.enum.graphql support.type.enum.graphql | #ffedcb | — |
| entity.name.function, meta.type.parameters entity.name.type | #d6e9ff | — |
| entity.name.type | #12D8C3 | — |
| entity.name.label | #d6e9ff | — |
| entity.other.inherited-class | #d6e9ff | — |
| entity.name.tag, support.class.component | #d6e9ff | — |
| entity.name.tag support.class.component, meta.tag.custom entity.name.tag | #12D8C3 | — |
| entity.other.attribute-name | #ffedcb | — |
| support.variable | #d6e9ff | — |
| support.variable.property.dom | #d4d4d4 | — |
| support.function | #d6e9ff | — |
| support.macro | #15BDDB | — |
| support.constant | #12D8C3 | — |
| support.type | #15BDDB | — |
| support.type.primitive, support.type.builtin.graphql, support.type.builtin | #12D8C3 | — |
| support.class | #12D8C3 | — |
| 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 | #ffedcb | — |
| invalid | #f1888e | — |
| invalid.deprecated | #12D8C3 | — |
| markup.error, message.error | #f1888e | — |
| markup.warning | #ffedcb | — |
| markup.info | #15BDDB | — |
| markup.ignored | #6F7899 | — |
| markup.untracked | #6F7899 | — |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.italic markup.bold, markup.bold markup.italic | — | bold italic |
| markup.heading, entity.name.section.markdown | #ffedcb | — |
| markup.underline.link, string.other.link | #9DA5E8 | — |
| string.other.link.title, string.other.link.description | #15BDDB | — |
| markup.list.numbered.bullet | #15BDDB | — |
| markup.quote | #d6e9ff | — |
| markup.raw | — | — |
| markup.raw.inline | — | — |
| meta.table.header.markdown, meta.table.header-separator.markdown, meta.table.markdown | — | — |
| support.type.property-name | #d6e9ff | — |
| support.type.custom-property.name | #15BDDB | — |
| entity.other.attribute-name.class.css | #12D8C3 | — |
| punctuation.definition.entity | #ffedcb | — |
| entity.other.attribute-name.id.css | #ffedcb | — |
| keyword.other.important | #d6e9ff | — |
| support.type.vendor-prefix | #ffedcb | — |
| entity.other.pseudo-class, entity.other.pseudo-element | #d6e9ff | — |
| 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, storage.modifier.import | #d6e9ff | — |
| keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.as, constant.language.import-export-all, keyword.control.new, variable.language.wildcard, keyword.other.import | #15BDDB | — |
| keyword.control.default, storage.modifier.async | #ffedcb | — |
| storage.modifier | #15BDDB | — |
| 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 | #d6e9ff | — |
| meta.brace.round, punctuation.definition, keyword.operator.ternary, meta.brace.curly.graphql, meta.brace.square, punctuation.operation.graphql, punctuation.colon.graphql | #8892aa | — |
| markup.inserted | #15BDDB | — |
| markup.deleted | #12D8C3 | — |
| markup.changed | #15BDDB | — |
| constant.numeric.line-number.find-in-files - match | #d6e9ff | — |
| entity.name.filename.find-in-files | #15BDDB | — |
| token.info-token | #15BDDB | — |
| token.warn-token | #ffedcb | — |
| token.error-token | #12D8C3 | — |
| token.debug-token | #0E4FFF | — |
| meta.template.expression | #d4d4d4 | — |
| meta.class.identifier storage.modifier | #15BDDB | — |
| storage.type.generic | #d6e9ff | — |
| meta.group.braces.curly keyword.control.loop, keyword.control.loop, keyword.operator.ternary, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, keyword.control.java | #ffedcb | — |
| keyword.control.loop | #ffedcb | — |
| keyword.control.flow | #ffedcb | — |
| constant.language.import-export-all | #d6e9ff | — |
| punctuation.decorator | #d6e9ff | — |
| source.json meta.structure.dictionary.json string.json support.type.property-name.json | #d6e9ff | — |
| meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #d6e9ff | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.json support.type.property-name.json | #15BDDB | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #15BDDB | — |
| 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 | #d6e9ff | — |
| meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql | #d6e9ff | — |
| meta.tag meta.tag.attributes keyword.operator.assignment | #d6e9ff | — |
| entity.name.function.directive.graphql | #ffedcb | — |
| keyword.other.unit | #ffedcb | — |
| 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, comment, punctuation.definition.comment, constant.language, variable.language, entity.other.attribute-name, support.macro, support.constant, keyword.control.default, storage.modifier.async, storage.modifier, meta.class.identifier storage.modifier, keyword.operator.expression, storage.type, storage.type.type | — | 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, entity.other.attribute-name.class, entity.other.attribute-name.id, storage.type.cs, storage.type.type.cs, punctuation.definition.entity | — | normal |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...