Onoyama Extensions

Name: Onoyama Extensions
Author: OnoyamaNeko

Publisher: OnoyamaNekoThemes in package: 2

Light font color with dark background makes writing code easier and more comfortable for the eyes. Snippets Support for HTML/Css

Open in VS Code GitHub

Color themes

VS Code preview

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

Onoyama Extensions — Midnight Themes - Onoyama

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ffffff07
activityBar.activeBorder#e372ff
activityBar.activeFocusBorder#e372ff
activityBar.background#141414
activityBar.foreground#e372ff
activityBar.inactiveForeground#e372ff75
activityBarBadge.background#e372ff
activityBarBadge.foreground#ffffff
badge.background#e372ff
badge.foreground#FFFFFF
breadcrumb.background#1a1919
breadcrumb.focusForeground#e372ff
breadcrumb.foreground#FFF
breadcrumbPicker.background#1a1919
button.background#e372ff1c
button.border#e372ff
button.foreground#FFF
button.hoverBackground#e372ffa2
button.secondaryBackground#e372ff1c
button.secondaryForeground#FFF
button.secondaryHoverBackground#e372ff
contrastActiveBorder#e372ff
descriptionForeground#ffffff59
disabledForeground#e372ff60
editor.background#141414
editor.findMatchBackground#e372ff31
editor.findMatchHighlightBackground#e372ff31
editor.findRangeHighlightBackground#e372ff56
editor.foreground#ffffff
editor.hoverHighlightBackground#e372ff2f
editor.lineHighlightBackground#e372ff13
editor.lineHighlightBorder#e372ff36
editor.selectionBackground#e372ff1c
editor.selectionHighlightBackground#e372ff75
editor.selectionHighlightBorder#e372ff
editorBracketHighlight.foreground1#e372ff
editorBracketHighlight.foreground2#e372ff
editorBracketHighlight.foreground3#e372ff
editorBracketHighlight.foreground4#e372ff
editorBracketHighlight.foreground5#e372ff
editorBracketHighlight.foreground6#e372ff
editorBracketMatch.background#e372ff31
editorBracketMatch.border#e372ff
editorBracketPairGuide.activeBackground1#e372ff
editorBracketPairGuide.activeBackground2#e372ff
editorBracketPairGuide.activeBackground3#e372ff
editorBracketPairGuide.activeBackground4#e372ff
editorBracketPairGuide.activeBackground5#e372ff
editorBracketPairGuide.activeBackground6#e372ff
editorBracketPairGuide.background1#e372ff2f
editorBracketPairGuide.background2#e372ff2f
editorBracketPairGuide.background3#e372ff2f
editorBracketPairGuide.background4#e372ff2f
editorBracketPairGuide.background5#e372ff2f
editorBracketPairGuide.background6#e372ff2f
editorCursor.foreground#e372ff
editorError.background#e372ff56
editorError.foreground#e372ff
editorGhostText.foreground#e372ff
editorGroup.dropBackground#e372ff1c
editorGroupHeader.tabsBackground#1a1919
editorGutter.foldingControlForeground#e372ff
editorHoverWidget.background#1a1919
editorHoverWidget.foreground#e372ff
editorLineNumber.activeForeground#e372ff
editorLineNumber.foreground#e372ff60
editorSuggestWidget.background#1a1919
editorSuggestWidget.focusHighlightForeground#e372ff
editorSuggestWidget.foreground#FFF
editorSuggestWidget.highlightForeground#e372ff
editorSuggestWidget.selectedBackground#1a1919
editorSuggestWidget.selectedForeground#e372ff
editorSuggestWidget.selectedIconForeground#e372ff
editorWidget.background#1a1919
extensionIcon.preReleaseForeground#e372ff56
extensionIcon.starForeground#e372ff
extensionIcon.verifiedForeground#e372ff
focusBorder#e372ff
foreground#e372ff
icon.foreground#e372ff
input.background#e372ff1c
input.foreground#FFF
input.placeholderForeground#e372ff
keybindingLabel.background#e372ff31
keybindingLabel.foreground#FFF
list.activeSelectionBackground#141414
list.activeSelectionForeground#e372ff
list.activeSelectionIconForeground#e372ff
list.focusAndSelectionOutline#e372ff
list.focusOutline#e372ff
list.hoverBackground#1a1919
list.hoverForeground#e372ff
list.inactiveSelectionBackground#141414
list.inactiveSelectionForeground#e372ff
list.inactiveSelectionIconForeground#e372ff
menu.background#141414
menu.foreground#ffffff
menu.selectionBackground#e372ff1c
menu.selectionForeground#e372ff
menu.separatorBackground#e372ff
menubar.selectionBackground#e372ff1c
menubar.selectionForeground#e372ff
minimap.background#141414
minimap.errorHighlight#c300ff
minimap.findMatchHighlight#e372ff
minimap.foregroundOpacity#000000
minimap.selectionHighlight#e372ff56
minimapSlider.activeBackground#e372ff1c
minimapSlider.background#e372ff1c
minimapSlider.hoverBackground#e372ff1c
pickerGroup.border#e372ff
pickerGroup.foreground#fff
ports.iconRunningProcessForeground#e372ff
progressBar.background#e372ff
quickInput.background#1a1919
quickInput.foreground#fff
quickInputList.focusBackground#e372ff31
scrollbar.shadow#e372ff
scrollbarSlider.activeBackground#e372ff
scrollbarSlider.background#e372ff
scrollbarSlider.hoverBackground#e372ff
selection.background#e372ff93
settings.checkboxForeground#e372ff
settings.dropdownBackground#141414
settings.dropdownForeground#e372ff
settings.focusedRowBackground#e372ff1c
settings.headerForeground#e372ff
settings.modifiedItemIndicator#e372ff
settings.numberInputForeground#e372ff
settings.rowHoverBackground#e372ff1c
settings.settingsHeaderHoverForeground#e372ff
settings.textInputForeground#e372ff
sideBar.background#141414
sideBar.foreground#fff
sideBarSectionHeader.background#ffffff07
sideBarSectionHeader.border#e372ff
sideBarSectionHeader.foreground#e372ff
sideBarTitle.foreground#e372ff
statusBar.background#1a1919
statusBar.focusBorder#e372ff
statusBar.foreground#FFF
statusBarItem.hoverBackground#e372ff1c
tab.activeBackground#1a1919
tab.activeBorder#e372ff
tab.activeBorderTop#e372ff
tab.activeForeground#e372ff
tab.hoverBackground#1a1919
tab.hoverBorder#e372ff
tab.inactiveBackground#e372ff1c
tab.inactiveForeground#FFF
terminalCursor.foreground#e372ff
textLink.activeForeground#e372ff75
textLink.foreground#FFF
titleBar.activeBackground#1a1919
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#1a1919
titleBar.inactiveForeground#ffffff
welcomePage.background#141414
welcomePage.progress.background#e372ff75
welcomePage.progress.foreground#e064ff
welcomePage.tileBackground#141414
welcomePage.tileHoverBackground#e372ff75
widget.shadow#e372ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
text.html.derivative	#ffffff
comment.block.html	#e372ff65	italic strikethrough
entity.other.attribute-name.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#e372ff
string.quoted.double.html	#BFACE2	italic bold
entity.name.tag.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html	#ff00ff	bold
support.constant.property-value.css, constant.numeric.css, constant.other.color.rgb-value.hex.css, keyword, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#ffffff
support.function.url.css, support.function.misc.css, support.function.transform.css, variable.parameter.keyframe-list.css, variable.css, support.function.calc.css, support.function.gradient.css, variable.argument.css, string.quoted.single.css, invalid.deprecated.color.system.css	#645CBB	italic bold
meta.property-list.css	#BFACE2
support.type.property-name.css, string.unquoted.attribute-value.css	#BFACE2	italic
comment.block.css	#e372ff65	italic
entity.other.attribute-name.pseudo-element.css, punctuation.separator.list.comma.css, entity.other.attribute-name.pseudo-class.css, meta.attribute-selector.css, entity.other.attribute-name	#e372ff
keyword.control.at-rule.font-face.css, keyword.control.at-rule.keyframes.css, entity.name.tag.css, entity.name.tag.wildcard.css, entity.other.attribute-name.class.css, keyword.control.at-rule.media.css, entity.other.attribute-name.id.css	#ff00ff	bold
support.constant.font-name.css	#645CBB
comment.line.double-slash.js	#e372ff65	italic
string.quoted.double.js, string.quoted.single.js, string.quoted.double.json.comments	#645CBB	italic bold
string.quoted.double.js, string.quoted.single.js, variable.other.readwrite.js, variable.other.constant, variable	#645CBB	italic bold
support.type.property-name.json.comments, meta.definition.variable.js, variable.other.constant.js, storage.type.function.js	#ff00ff	italic bold
storage.type.js, variable.other.object.js, entity.name.function, meta.object.member.js	#BFACE2	italic
support.constant.property	#e372ff	italic bold
constant.numeric.decimal.js, keyword.operator.arithmetic.js, keyword.operator.increment.js, keyword.operator.decrement.js, keyword.operator.relational.js, keyword.operator.comparison.js, variable.parameter	#e372ff	italic