Wise Owl Material Theme

Name: Wise Owl Material Theme
Author: WaseemAkhter

Publisher: WaseemAkhterThemes in package: 4

A custom theme combining Night Owl background colors with Material foreground colors

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Wise Owl Material Theme — Wise Owl Material

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#011627
activityBar.border#01162700
activityBar.foreground#d6deeb
activityBar.inactiveForeground#464e5799
activityBarBadge.background#82aaff
activityBarBadge.foreground#011627
breadcrumb.activeSelectionForeground#d6deeb
breadcrumb.background#011627
breadcrumb.focusForeground#d6deeb
breadcrumb.foreground#464e5799
button.background#82aaff
button.foreground#011627
button.hoverBackground#5f7cc4
dropdown.background#011627
dropdown.border#1e293366
dropdown.foreground#d6deeb
editor.background#011627
editor.foreground#d6deeb
editor.lineHighlightBackground#1e293399
editor.selectionBackground#82aaff40
editor.selectionHighlightBackground#82aaff30
editorBracketMatch.background#1e293366
editorBracketMatch.border#80a4c2
editorCursor.foreground#80a4c2
editorError.foreground#ff5874
editorGroup.border#01162700
editorGroupHeader.border#01162700
editorGroupHeader.tabsBackground#011627
editorGroupHeader.tabsBorder#01162700
editorIndentGuide.activeBackground1#464e57
editorIndentGuide.background1#464e5755
editorLineNumber.activeForeground#d6deeb
editorLineNumber.foreground#464e57
editorWarning.foreground#ecc48d
editorWhitespace.foreground#464e5755
editorWidget.background#011627
editorWidget.border#1e293366
editorWidget.foreground#d6deeb
input.background#011627
input.border#1e293366
input.foreground#d6deeb
input.placeholderForeground#464e5799
inputOption.activeBackground#1e293366
inputOption.activeBorder#82aaff
list.activeSelectionBackground#1e293366
list.activeSelectionForeground#d6deeb
list.focusBackground#1e293366
list.focusForeground#d6deeb
list.hoverBackground#1e293366
list.hoverForeground#d6deeb
list.inactiveSelectionBackground#1e293366
list.inactiveSelectionForeground#d6deeb
menu.background#011627
menu.border#01162700
menu.foreground#d6deeb
menu.selectionBackground#1e293366
menu.selectionForeground#d6deeb
menubar.selectionBackground#1e293366
menubar.selectionForeground#d6deeb
panel.background#011627
panel.border#01162700
panelTitle.activeBorder#82aaff
panelTitle.activeForeground#d6deeb
panelTitle.inactiveForeground#464e5799
searchEditor.textInputBorder#1e293366
sideBar.background#011627
sideBar.border#01162700
sideBar.foreground#d6deeb
sideBarSectionHeader.background#011627
sideBarSectionHeader.border#01162700
sideBarSectionHeader.foreground#d6deeb
sideBarTitle.foreground#d6deeb
statusBar.background#011627
statusBar.border#01162700
statusBar.debuggingBackground#011627
statusBar.foreground#d6deeb
statusBar.noFolderBackground#011627
statusBarItem.hoverBackground#1e293366
tab.activeBackground#011627
tab.activeBorder#00000000
tab.activeBorderTop#82aaff
tab.activeForeground#d6deeb
tab.border#01162700
tab.hoverBackground#1e293366
tab.inactiveBackground#011627
tab.inactiveForeground#464e5799
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#464e5799
tab.unfocusedHoverBackground#1e293366
terminal.ansiBlack#011627
terminal.ansiBlue#82aaff
terminal.ansiBrightBlack#464e57
terminal.ansiBrightBlue#82aaff
terminal.ansiBrightCyan#7fdbca
terminal.ansiBrightGreen#22da6f
terminal.ansiBrightMagenta#c792ea
terminal.ansiBrightRed#ff5874
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ecc48d
terminal.ansiCyan#7fdbca
terminal.ansiGreen#22da6f
terminal.ansiMagenta#c792ea
terminal.ansiRed#ff5874
terminal.ansiWhite#d6deeb
terminal.ansiYellow#ecc48d
terminal.background#011627
terminal.foreground#d6deeb
titleBar.activeBackground#011627
titleBar.activeForeground#d6deeb
titleBar.border#01162700
titleBar.inactiveBackground#011627
titleBar.inactiveForeground#464e5799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, punctuation.definition.dictionary, punctuation.separator.dictionary.pair, variable.other, variable.assignment, entity.name.type.instance, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.constant.css, constant.other.color, support.constant.color, meta.property-name.css, meta.property-value.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.end.bracket.curly.css, punctuation.separator.list.comma.css, meta.paragraph.markdown, text.html.markdown, text.html.basic, punctuation.definition.variable.less, variable.other.object, text.jade, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, variable.interpolation.scss, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, string.other.link.description.title.markdown, constant.language.import-export-all.js, constant.language.import-export-all.ts, constant.language.import-export-all.tsx, meta.parameters.js, punctuation.separator.comma.js	#EEFFFF	—
punctuation, keyword.operator, meta.brace, support.constant, support.type.object.module.js, meta.group.regexp, string.regexp.js, source.js-ignored-vscode	#89DDF3	—
support.type.property-name, string.quoted, meta.object-literal.key, source.coffee.embedded.source, entity.name.section.markdown, punctuation.definition.heading.markdown, string.unquoted.plain.out.yaml, string.template.js, string.interpolated.jade, support.type.builtin.graphql	#C3E88D	—
constant.numeric, variable.parameter.function, keyword.other.unit	#F78C6A	—
constant.language, entity.name.tag.html, entity.name.tag.structure.any.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, constant.other.table-name.sql, constant.other.database-name.sql, entity.name.tag.xml, entity.name.tag.localname.xml, entity.name.tag.yaml, entity.name.tag.style.html, entity.name.tag.other.html, support.variable.property.js, entity.name.tag.jade, constant.name.attribute.tag.jade, entity.name.tag.js, entity.name.tag.ts, entity.name.tag.tsx, support.class.component.js, support.class.component.ts, support.class.component.tsx, support.class.component.html	#F07178	—
comment, punctuation.definition.comment	#4f6875	italic
storage.type, keyword.control, keyword.other.important.css, punctuation.definition.keyword, punctuation.definition.directive, storage.modifier.cs, keyword.other.class.cs, keyword.type.cs, markup.italic.markdown, punctuation.definition.italic.markdown, keyword.package.go, keyword.import.go, keyword.function.go, keyword.var.go, keyword.const.go, meta.tag.sgml.doctype.html, storage.modifier.java, punctuation.definition.storage.type.objc, storage.modifier.perl, keyword.other.DML.sql, keyword.other.alias.sql, storage.modifier.async.js, support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, keyword.other.definition.ini, punctuation.definition.block.tag.jsdoc, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, keyword.type.graphql, keyword.other.default	#C792EA	—
markup.italic.markdown, punctuation.definition.italic.markdown	#C792EA	italic
entity.name.function, support.function, variable.other.property, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown, meta.function-call.generic.python, keyword.other.special-method.ruby, entity.name.type.js, variable.other.object.property.js, entity.name.section.group-title.ini, support.variable.property.dom.js, support.variable.property.dom.ts, entity.name.type.ts, entity.name.type.tsx, variable.graphql	#82AAFF	—
markup.quote.markdown	#82AAFF	italic
support.class, entity.name.type.class, constant.numeric.css, entity.other.attribute-name, support.variable.object.node.js, support.variable.object.process.js, support.variable.property.process.js, support.variable.dom.js, support.constant.json.js, entity.other.inherited-class, support.variable.dom.ts, support.type.primitive.ts, entity.name.type.interface.ts, entity.name.type.module.js, entity.name.type.module.ts, entity.name.type.module.tsx, support.variable.dom.tsx, support.type.graphql	#FFCB6B	—
markup.bold.markdown, punctuation.definition.bold.markdown	#FFCB6B	bold
variable.language.super, punctuation.definition.metadata.markdown, variable.language.special.self.python, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, variable.language.this.js, variable.language.this.ts	#FF5370	—
entity.name.tag	#B2CCD6	—
support.type.property-name.css, support.type.property-name.media.css, support.constant.parity.css, meta.object-literal.key.js, meta.object-literal.key.ts	#73d1c8	—
markup.underline.link.image.markdown, markup.underline.link.markdown	#ff869a	—