Night Owl Theme
Publisher: KongkiatThemes in package: 1
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.activeBackground#3F0957
- activityBar.activeBorder#3F0957
- activityBar.background#1F1F1F
- activityBar.border#494949
- activityBar.foreground#DDDDDD
- activityBar.inactiveForeground#A3A3A3
- activityBarBadge.background#FF0000
- badge.background#3F0957
- badge.foreground#DDDDDD
- breadcrumb.background#000000
- breadcrumb.focusForeground#DDDDDD
- breadcrumb.foreground#A3A3A3
- button.background#3F0957
- button.border#3F0957
- button.foreground#DDDDDD
- button.hoverBackground#31123E
- button.separator#DDDDDD
- contrastBorder#1F1F1F
- editor.background#000000
- editor.foreground#A3A3A3
- editorCodeLens.foreground#7B7B7B
- editorCursor.background#7B7B7B
- editorCursor.foreground#FF00FF
- editorGroupHeader.border#494949
- editorGroupHeader.tabsBackground#000000
- editorGroupHeader.tabsBorder#494949
- editorInlayHint.background#1E1E1E
- editorInlayHint.foreground#8F8F8F
- editorLineNumber.activeForeground#A3A3A3
- editorLineNumber.foreground#7B7B7B
- editorLink.activeForeground#9B59B6
- editorOverviewRuler.background#1F1F1F
- editorOverviewRuler.border#1F1F1F
- foreground#A3A3A3
- gitDecoration.ignoredResourceForeground#A3A3A3
- icon.foreground#A3A3A3
- input.foreground#DDDDDD
- input.placeholderForeground#7B7B7B
- list.activeSelectionBackground#1F1F1F
- list.focusAndSelectionOutline#1F1F1F
- list.hoverBackground#1F1F1F
- list.hoverForeground#A3A3A3
- list.inactiveFocusBackground#1F1F1F
- list.inactiveFocusOutline#1F1F1F
- list.inactiveSelectionBackground#1F1F1F
- list.inactiveSelectionForeground#FFFFFF
- menu.background#1F1F1F
- menu.border#494949
- menu.foreground#A3A3A3
- menu.selectionBackground#000000
- menu.selectionBorder#000000
- menu.selectionForeground#A3A3A3
- menubar.selectionBackground#000000
- menubar.selectionBorder#000000
- minimap.background#1F1F1F
- panel.background#000000
- panel.border#494949
- panelTitle.activeBorder#7B7B7B
- panelTitle.activeForeground#A3A3A3
- panelTitle.inactiveForeground#A3A3A3
- scrollbar.shadow#434343
- sideBar.background#000000
- sideBar.border#494949
- sideBar.foreground#A3A3A3
- sideBarSectionHeader.background#1F1F1F
- sideBarSectionHeader.border#494949
- sideBarSectionHeader.foreground#A3A3A3
- sideBarTitle.foreground#A3A3A3
- statusBar.background#3F0957
- statusBar.border#494949
- statusBar.foreground#DDDDDD
- statusBarItem.remoteBackground#250033
- statusBarItem.remoteForeground#FFFFFF
- statusBarItem.remoteHoverBackground#170020
- statusBarItem.remoteHoverForeground#FFFFFF
- tab.activeBackground#1F1F1F
- tab.activeBorder#3F0957
- tab.activeBorderTop#494949
- tab.activeForeground#FFFFFF
- tab.border#494949
- tab.unfocusedHoverBackground#1F1F1F
- tab.unfocusedHoverBorder#1F1F1F
- terminal.background#000000
- terminal.foreground#A3A3A3
- textLink.activeForeground#9B59B6
- textLink.foreground#9B59B6
- titleBar.activeBackground#333333
- titleBar.activeForeground#A3A3A3
- titleBar.border#1F1F1F
- titleBar.inactiveBackground#333333
- titleBar.inactiveForeground#A3A3A3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, punctuation.definition.comment | #00CC00 | italic |
| variable, string constant.other.placeholder | #EEFFFF | — |
| constant.other.color | #ffffff | — |
| invalid, invalid.illegal | #FF5370 | — |
| keyword, storage.type, storage.modifier | #C792EA | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #f07178 | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #82AAFF | — |
| meta.block variable.other | #f07178 | — |
| support.other.variable, string.other.link | #f07178 | — |
| constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other | #73C6B6 | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #C3E88D | — |
| entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #FFCB6B | — |
| support.type | #B2CCD6 | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #B2CCD6 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #FF5370 | — |
| variable.language | #FF5370 | italic |
| entity.name.method.js | #82AAFF | italic |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #82AAFF | — |
| entity.other.attribute-name, keyword.control.import.js, keyword.control.export.js, keyword.control.from.js | #C792EA | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #FFCB6B | italic |
| entity.other.attribute-name.class | #FFCB6B | — |
| source.sass keyword.control | #82AAFF | — |
| markup.inserted | #C3E88D | — |
| markup.deleted | #FF5370 | — |
| markup.changed | #C792EA | — |
| string.regexp | #89DDFF | — |
| constant.character.escape | #89DDFF | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82AAFF | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF5370 | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json | #AED6F1 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #D2B4DE | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #F5B7B1 | — |
| 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 support.type.property-name.json | #FAD7A0 | — |
| 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 support.type.property-name.json | #F9E79F | — |
| 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 support.type.property-name.json | #ABEBC6 | — |
| 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 support.type.property-name.json | #A2D9CE | — |
| 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 support.type.property-name.json | #CCCCFF | — |
| 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 support.type.property-name.json | #FFBFBB | — |
| text.html.markdown, punctuation.definition.list_item.markdown, meta.block variable.other, support.variable.property.js, meta.block.js, meta.function.expression.js | #EEFFFF | — |
| text.html.markdown markup.inline.raw.markdown | #C792EA | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #65737E | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #C3E88D | — |
| markup.italic | #f07178 | italic |
| markup.bold, markup.bold string | #f07178 | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | #f07178 | bold |
| markup.underline | #F78C6C | underline |
| markup.quote punctuation.definition.blockquote.markdown | #65737E | — |
| markup.quote | — | italic |
| string.other.link.title.markdown | #82AAFF | — |
| string.other.link.description.title.markdown | #C792EA | — |
| constant.other.reference.link.markdown | #FFCB6B | — |
| markup.raw.block | #C792EA | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #EEFFFF | — |
| variable.language.fenced.markdown | #65737E | — |
| meta.separator | #65737E | bold |
| markup.table | #EEFFFF | — |
| punctuation.terminator.expression.php, punctuation.separator.delimiter.php, keyword.operator.string.php, keyword.other, constant.language.php, keyword.other.phpdoc.php, keyword.other.new.php, variable.language.this.php | #C792EA | — |
| entity.name.type.class.php, support.class.php, entity.name.type.namespace.php, punctuation.separator.inheritance.php, support.other.namespace.php, support.class.builtin.php, entity.other.inherited-class.php, keyword.other.type.php, keyword.operator.logical.php, keyword.control.import.include.php, punctuation.definition.string.begin.php, punctuation.definition.string.end.php, keyword.control, support.class.exception.php, punctuation.section.embedded | #F07178 | — |
| entity.name.function | #FF88FF | — |
| variable.other.php, variable.other.global | #F5B7B1 | — |
| variable.other.property.php | #AED6F1 | — |
| constant.numeric.decimal.php | #C3E88D | — |
| string.quoted.single.php, string.quoted.double.php, constant.character.escape.php | #FADBD8 | — |
| keyword.operator.class.php | #A3A3A3 | — |
| punctuation.definition.character-class.php, keyword.operator.regexp.php, constant.character.escape.php | #7B7B7B | — |
| support.constant.ext.php, constant.other.class.php | #DDDDDD | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #F07178 | — |
| entity.name.tag.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #40E0D0 | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.other.attribute-name.html | #9FE2BF | — |
| string.quoted.double.html, string.quoted.single.html | #D1F2EB | — |
| text.html.derivative | #A3A3A3 | — |
| source.css | #EFBDEB | — |
| punctuation.separator.key-value.html | #DDDDDD | — |
| constant.language.json | #C792EA | — |
| constant.numeric.json | #C3E88D | — |
| string.quoted.double.json | #EBF5FB | — |
| entity.name.function.js, entity.name.function.js.jsx, support.function.js, support.function.js.jsx, entity.name.function.ts, entity.name.function.tsx, support.function.ts, support.function.tsx | #F9E79F | — |
| entity.name.tag.js, entity.name.tag.js.jsx, support.class.component.js, support.class.component.js.jsx, support.class.error.js, support.class.error.js.jsx, constant.language.boolean.js, constant.language.boolean.js.jsx, constant.language.boolean.true.js, constant.language.boolean.true.js.jsx, constant.language.boolean.false.js, constant.language.boolean.false.js.jsx, constant.language.null.js, constant.language.null.js.jsx, support.class.component.js, support.class.component.js.jsx, keyword.control.import.js, keyword.control.import.js.jsx, keyword.control.export.js, keyword.control.export.js.jsx, keyword.control.from.js, keyword.control.from.js.jsx, keyword.control.as.js, keyword.control.as.js.jsx, support.type.builtin.js, support.type.builtin.js.jsx, entity.name.tag.ts, entity.name.tag.tsx, support.class.component.ts, support.class.component.tsx, support.class.error.ts, support.class.error.tsx, constant.language.boolean.ts, constant.language.boolean.tsx, constant.language.boolean.true.ts, constant.language.boolean.true.tsx, constant.language.boolean.false.ts, constant.language.boolean.false.tsx, constant.language.null.ts, constant.language.null.tsx, support.class.component.ts, support.class.component.tsx, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.as.ts, keyword.control.as.tsx, support.type.builtin.ts, support.type.builtin.tsx | #AA83F3 | — |
| entity.other.attribute-name.js, entity.other.attribute-name.js.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx | #AAAAAA | — |
| entity.name.label.js, entity.name.label.js.jsx, variable.object.property.js, variable.object.property.js.jsx, variable.other.constant.js, variable.other.constant.js.jsx, variable.other.readwrite.js, variable.other.readwrite.js.jsx, variable.other.object.js, variable.other.object.js.jsx, variable.other.enummember.js, variable.other.enummember.js.jsx, variable.parameter.js, variable.parameter.js.jsx, entity.name.label.ts, entity.name.label.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.constant.ts, variable.other.constant.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.other.enummember.ts, variable.other.enummember.tsx, variable.parameter.ts, variable.parameter.tsx | #AED6F1 | — |
| storage.type.js, storage.type.js.jsx, storage.type.class.js, storage.type.class.js.jsx, storage.type.enum.js, storage.type.enum.js.jsx, storage.type.type.js, storage.type.type.js.jsx, storage.type.function.js, storage.type.function.js.jsx, storage.type.interface.js, storage.type.interface.js.jsx, storage.modifier.js, storage.modifier.js.jsx, punctuation.definition.string.begin.js, punctuation.definition.string.begin.js.jsx, punctuation.definition.string.end.js, punctuation.definition.string.end.js.jsx, punctuation.separator.key-value.js, punctuation.separator.key-value.js.jsx, keyword.control.default.js, keyword.control.default.js.jsx, keyword.operator.logical.js, keyword.operator.logical.js.jsx, keyword.operator.type.js, keyword.operator.type.js.jsx, keyword.operator.new.js, keyword.operator.new.js, support.variable.property.js, support.variable.property.js.jsx, keyword.operator.optional.js, keyword.operator.optional.js.jsx, punctuation.accessor.optional.js, punctuation.accessor.optional.js.jsx, keyword.operator.expression.void.js, keyword.operator.expression.void.js.jsx, support.class.error.js, support.class.error.js.jsx, storage.modifier.async.js, storage.modifier.async.js.jsx, keyword.control.as.js, keyword.control.as.js.jsx, storage.type.ts, storage.type.tsx, storage.type.class.ts, storage.type.class.tsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.function.ts, storage.type.function.tsx, storage.type.interface.ts, storage.type.interface.tsx, storage.modifier.ts, storage.modifier.tsx, punctuation.definition.string.begin.ts, punctuation.definition.string.begin.tsx, punctuation.definition.string.end.ts, punctuation.definition.string.end.tsx, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx, keyword.control.default.ts, keyword.control.default.tsx, keyword.operator.logical.ts, keyword.operator.logical.tsx, keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.new.ts, keyword.operator.new.ts, support.variable.property.ts, support.variable.property.tsx, keyword.operator.optional.ts, keyword.operator.optional.tsx, punctuation.accessor.optional.ts, punctuation.accessor.optional.tsx, keyword.operator.expression.void.ts, keyword.operator.expression.void.tsx, support.class.error.ts, support.class.error.tsx, storage.modifier.async.ts, storage.modifier.async.tsx, keyword.control.as.ts, keyword.control.as.tsx | #F07178 | — |
| entity.name.type.js, entity.name.type.js.jsx, entity.name.type.interface.js, entity.name.type.interface.js.jsx, entity.name.type.alias.js, entity.name.type.alias.js.jsx, entity.name.type.class.js, entity.name.type.class.js.jsx, entity.other.inherited-class.js, entity.other.inherited-class.js.jsx, entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.class.ts, entity.name.type.class.tsx, entity.other.inherited-class.ts, entity.other.inherited-class.tsx | #73C6B6 | — |
| entity.name.type.module.js, entity.name.type.module.js.jsx, support.type.primitive.js, support.type.primitive.js.jsx, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, entity.name.type.module.ts, entity.name.type.module.tsx, support.type.primitive.ts, support.type.primitive.tsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx | #FFFFFF | italic |
| string.quoted.single.js, string.quoted.single.js.jsx, string.quoted.single.ts, string.quoted.single.tsx | #FFC0CB | — |
| string.quoted.double.js, string.quoted.double.js.jsx, variable.other.property.js, variable.other.property.js.jsx, keyword.operator.spread.js, keyword.operator.spread.js.jsx, string.quoted.double.ts, string.quoted.double.tsx, variable.other.property.ts, variable.other.property.tsx, keyword.operator.spread.ts, keyword.operator.spread.tsx | #FFFFFF | — |
| constant.numeric.decimal.js, constant.numeric.decimal.js.jsx, constant.numeric.decimal.ts, constant.numeric.decimal.tsx | #C3E88D | — |
| punctuation.definition.string.template.begin.js, punctuation.definition.string.template.begin.js.jsx, punctuation.definition.string.template.end.js, punctuation.definition.string.template.end.js.jsx, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.begin.tsx, punctuation.definition.string.template.end.ts, punctuation.definition.string.template.end.tsx | #F07178 | — |
| string.template.js, string.template.js.jsx, string.template.ts, string.template.tsx | #FFC0CB | italic |
| punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.js.jsx, punctuation.definition.template-expression.end.js.jsx, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx | #FFFFFF | italic |
| keyword.operator.type.annotation.js, keyword.operator.type.annotation.js.jsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx | #FFFFFF | bold |
| meta.object-literal.key.js, meta.object-literal.key.js.jsx, meta.object-literal.key.ts, meta.object-literal.key.tsx | #EBCEFF | — |
| entity.name.type.instance.jsdoc | #F07178 | — |
| storage.type.class.jsdoc | #AA83F3 | — |