Oriole Themes

Name: Oriole Themes
Author: ZushiH

Publisher: ZushiHThemes in package: 4

Warm amber/honey theme family — Light, Light Contrast, Night, Honey. Tuned for Ruby/Rails, Vue, JS and Svelte.

Open in VS Code GitHub

Color themes

VS Code preview

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

Oriole Themes — Oriole Night

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.background#141414
activityBar.border#2a2a2a
activityBar.foreground#dcd6ca
activityBar.inactiveForeground#ffffff66
activityBarBadge.background#e8873a
activityBarBadge.foreground#1e1e1e
badge.background#e8873a
badge.foreground#1e1e1e
button.background#e8873a
button.foreground#1e1e1e
button.hoverBackground#e8873a
contrastBorder#2a2a2a
diffEditor.insertedTextBackground#a9c05a22
diffEditor.removedTextBackground#e2694a22
dropdown.background#252525
dropdown.border#2a2a2a
editor.background#1e1e1e
editor.foreground#dcd6ca
editor.lineHighlightBackground#ffffff0d
editor.selectionBackground#ffce5e33
editor.selectionHighlightBackground#ffffff14
editor.wordHighlightBackground#ffffff10
editorBracketMatch.background#ffffff14
editorBracketMatch.border#e8873a
editorCursor.foreground#e8873a
editorError.foreground#e2694a
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2a2a2a
editorGutter.addedBackground#a9c05a
editorGutter.deletedBackground#e2694a
editorGutter.modifiedBackground#8fb3c4
editorHoverWidget.background#252525
editorHoverWidget.border#2a2a2a
editorIndentGuide.activeBackground1#e8873a
editorIndentGuide.background1#ffffff14
editorInfo.foreground#8fb3c4
editorLineNumber.activeForeground#e8873a
editorLineNumber.foreground#5a5a5a
editorSuggestWidget.background#252525
editorSuggestWidget.selectedBackground#2c2c2c
editorWarning.foreground#d99a4e
editorWhitespace.foreground#ffffff1a
editorWidget.background#252525
editorWidget.border#2a2a2a
errorForeground#e2694a
focusBorder#e8873a
foreground#dcd6ca
gitDecoration.conflictingResourceForeground#e8873a
gitDecoration.deletedResourceForeground#e2694a
gitDecoration.ignoredResourceForeground#ffffff55
gitDecoration.modifiedResourceForeground#d99a4e
gitDecoration.untrackedResourceForeground#a9c05a
input.background#252525
input.border#2a2a2a
input.foreground#dcd6ca
input.placeholderForeground#ffffff66
list.activeSelectionBackground#2c2c2c
list.activeSelectionForeground#dcd6ca
list.focusBackground#2c2c2c
list.highlightForeground#e8873a
list.hoverBackground#ffffff0a
list.inactiveSelectionBackground#ffffff0a
minimap.background#1e1e1e
minimapSlider.background#ffffff14
panel.background#181818
panel.border#2a2a2a
panelTitle.activeBorder#e8873a
panelTitle.activeForeground#dcd6ca
peekViewEditor.background#181818
peekViewResult.background#181818
progressBar.background#e8873a
scrollbarSlider.activeBackground#ffffff44
scrollbarSlider.background#ffffff20
scrollbarSlider.hoverBackground#ffffff33
selection.background#ffce5e33
sideBar.background#181818
sideBar.border#2a2a2a
sideBar.foreground#dcd6ca
sideBarSectionHeader.background#181818
sideBarTitle.foreground#dcd6ca
statusBar.background#141414
statusBar.border#2a2a2a
statusBar.debuggingBackground#e8873a
statusBar.debuggingForeground#1e1e1e
statusBar.foreground#dcd6ca
statusBar.noFolderBackground#141414
tab.activeBackground#1e1e1e
tab.activeBorderTop#e8873a
tab.activeForeground#dcd6ca
tab.border#2a2a2a
tab.inactiveBackground#181818
tab.inactiveForeground#ffffff99
terminal.ansiBlack#2a2a2a
terminal.ansiBlue#8fb3c4
terminal.ansiBrightBlack#5a5a5a
terminal.ansiBrightBlue#8fb3c4
terminal.ansiBrightCyan#8fb3c4
terminal.ansiBrightGreen#a9c05a
terminal.ansiBrightMagenta#e0b06a
terminal.ansiBrightRed#e2694a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e8873a
terminal.ansiCyan#8fb3c4
terminal.ansiGreen#a9c05a
terminal.ansiMagenta#e0b06a
terminal.ansiRed#e2694a
terminal.ansiWhite#dcd6ca
terminal.ansiYellow#d99a4e
terminal.background#1e1e1e
terminal.foreground#dcd6ca
textLink.activeForeground#e8873a
textLink.foreground#8fb3c4
titleBar.activeBackground#181818
titleBar.activeForeground#dcd6ca
titleBar.border#2a2a2a
titleBar.inactiveBackground#181818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, variable.language, keyword.other.special-method, keyword.control.directive, entity.name.tag, meta.tag.sgml, punctuation.definition.tag, keyword.control.svelte, entity.other.keyword.directive, punctuation.section.embedded	#e8873a	—
string, string.quoted, string.template, string.interpolated, string.regexp, constant.other.symbol, constant.other.symbol.ruby, punctuation.definition.string	#a9c05a	—
entity.name.function, entity.name.method, support.function, meta.function-call, variable.function, meta.definition.method	#8fb3c4	—
entity.name.type, entity.name.class, entity.name.type.class, entity.other.inherited-class, support.class, support.type, entity.name.namespace, entity.name.type.module, variable.other.constant.ruby, entity.name.tag.component	#e0b06a	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, support.constant, variable.other.constant	#d99a4e	—
variable, variable.other, variable.parameter, variable.other.readwrite, variable.other.property, variable.other.object.property, variable.other.readwrite.instance.ruby, meta.object-literal.key, entity.other.attribute-name, support.type.property-name	#cfc4a8	—
comment, punctuation.definition.comment, string.comment	#948e74	italic
punctuation, meta.brace, keyword.operator, punctuation.separator, punctuation.terminator, punctuation.definition.template-expression	#dcd6ca	—