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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ffffff
activityBar.foreground#333333
activityBar.inactiveForeground#99999966
activityBarBadge.background#0066cc
activityBarBadge.foreground#ffffff
button.background#0066cc
button.foreground#ffffff
button.hoverBackground#0052a3
dropdown.background#ffffff
dropdown.border#cccccc
dropdown.foreground#333333
editor.background#f5f5f5
editor.foreground#333333
editor.lineHighlightBackground#f0f0f099
editor.selectionBackground#4f46e580
editor.selectionHighlightBackground#4f46e560
editorBracketMatch.background#e0e6ff66
editorBracketMatch.border#0066cc
editorCursor.foreground#0066cc
editorError.foreground#e91e63
editorIndentGuide.activeBackground1#999999
editorIndentGuide.background1#e0e0e055
editorLineNumber.activeForeground#333333
editorLineNumber.foreground#999999
editorWarning.foreground#f39c12
editorWhitespace.foreground#e0e0e055
editorWidget.background#f5f5f5
editorWidget.border#e0e6ff66
editorWidget.foreground#333333
input.background#ffffff
input.border#cccccc
input.foreground#333333
input.placeholderForeground#99999966
list.activeSelectionBackground#e0e6ff66
list.activeSelectionForeground#333333
list.focusBackground#e0e6ff66
list.focusForeground#333333
list.hoverBackground#e0e6ff66
list.hoverForeground#333333
list.inactiveSelectionBackground#e0e6ff66
list.inactiveSelectionForeground#333333
menu.background#ffffff
menu.foreground#333333
menu.selectionBackground#e0e6ff66
menu.selectionForeground#333333
menubar.selectionBackground#e0e6ff66
menubar.selectionForeground#333333
panel.background#f5f5f5
panel.border#e0e0e0
panelTitle.activeBorder#0066cc
panelTitle.activeForeground#333333
panelTitle.inactiveForeground#99999966
searchEditor.textInputBorder#e0e6ff66
sideBar.background#ffffff
sideBar.border#e0e0e0
sideBar.foreground#333333
sideBarSectionHeader.background#f5f5f5
sideBarSectionHeader.border#e0e0e0
sideBarSectionHeader.foreground#333333
statusBar.background#f5f5f5
statusBar.foreground#333333
statusBarItem.hoverBackground#e0e6ff66
tab.activeBackground#ffffff
tab.activeBorder#0066cc
tab.activeForeground#333333
tab.border#e0e0e0
tab.hoverBackground#e0e6ff66
tab.inactiveBackground#f5f5f5
tab.inactiveForeground#99999966
tab.unfocusedActiveBorder#cccccc
tab.unfocusedHoverBackground#e0e6ff66
terminal.ansiBlack#333333
terminal.ansiBlue#0066cc
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#0066cc
terminal.ansiBrightCyan#16a085
terminal.ansiBrightGreen#27ae60
terminal.ansiBrightMagenta#8e44ad
terminal.ansiBrightRed#e91e63
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f39c12
terminal.ansiCyan#16a085
terminal.ansiGreen#27ae60
terminal.ansiMagenta#8e44ad
terminal.ansiRed#e91e63
terminal.ansiWhite#f5f5f5
terminal.ansiYellow#f39c12
titleBar.activeBackground#ffffff
titleBar.activeForeground#333333
titleBar.inactiveBackground#f5f5f5
titleBar.inactiveForeground#99999966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle