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 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#f0b04e
activityBar.border#e0a838
activityBar.foreground#4a3a1e
activityBar.inactiveForeground#00000066
activityBarBadge.background#c65e00
activityBarBadge.foreground#fff4dd
badge.background#c65e00
badge.foreground#fff4dd
button.background#c65e00
button.foreground#fff4dd
button.hoverBackground#c65e00
contrastBorder#e0a838
diffEditor.insertedTextBackground#4a6a1c22
diffEditor.removedTextBackground#b03a1a22
dropdown.background#f6bd58
dropdown.border#e0a838
editor.background#fec95c
editor.foreground#4a3a1e
editor.lineHighlightBackground#00000010
editor.selectionBackground#c98a2e55
editor.selectionHighlightBackground#0000000d
editor.wordHighlightBackground#0000000d
editorBracketMatch.background#00000012
editorBracketMatch.border#c65e00
editorCursor.foreground#c65e00
editorError.foreground#b03a1a
editorGroupHeader.tabsBackground#f9c157
editorGroupHeader.tabsBorder#e0a838
editorGutter.addedBackground#4a6a1c
editorGutter.deletedBackground#b03a1a
editorGutter.modifiedBackground#3e535a
editorHoverWidget.background#f6bd58
editorHoverWidget.border#e0a838
editorIndentGuide.activeBackground1#c65e00
editorIndentGuide.background1#00000014
editorInfo.foreground#3e535a
editorLineNumber.activeForeground#8a5a28
editorLineNumber.foreground#d9a24a
editorSuggestWidget.background#f6bd58
editorSuggestWidget.selectedBackground#db9c47
editorWarning.foreground#9c6a1f
editorWhitespace.foreground#0000001a
editorWidget.background#f6bd58
editorWidget.border#e0a838
errorForeground#b03a1a
focusBorder#c65e00
foreground#4a3a1e
gitDecoration.conflictingResourceForeground#c65e00
gitDecoration.deletedResourceForeground#b03a1a
gitDecoration.ignoredResourceForeground#00000055
gitDecoration.modifiedResourceForeground#9c6a1f
gitDecoration.untrackedResourceForeground#4a6a1c
input.background#f6bd58
input.border#e0a838
input.foreground#4a3a1e
input.placeholderForeground#00000066
list.activeSelectionBackground#db9c47
list.activeSelectionForeground#4a3a1e
list.focusBackground#db9c47
list.highlightForeground#c65e00
list.hoverBackground#f6bd5866
list.inactiveSelectionBackground#f6bd5866
minimap.background#fec95c
minimapSlider.background#00000014
panel.background#f3b754
panel.border#e0a838
panelTitle.activeBorder#c65e00
panelTitle.activeForeground#4a3a1e
peekViewEditor.background#f9c157
peekViewResult.background#f3b754
progressBar.background#c65e00
scrollbarSlider.activeBackground#00000044
scrollbarSlider.background#00000020
scrollbarSlider.hoverBackground#00000033
selection.background#c98a2e55
sideBar.background#f3b754
sideBar.border#e0a838
sideBar.foreground#4a3a1e
sideBarSectionHeader.background#f9c157
sideBarTitle.foreground#4a3a1e
statusBar.background#f2b652
statusBar.border#e0a838
statusBar.debuggingBackground#c65e00
statusBar.debuggingForeground#fff4dd
statusBar.foreground#4a3a1e
statusBar.noFolderBackground#f2b652
tab.activeBackground#fec95c
tab.activeBorderTop#c65e00
tab.activeForeground#4a3a1e
tab.border#e0a838
tab.inactiveBackground#f3b754
tab.inactiveForeground#00000099
terminal.ansiBlack#4a3a1e
terminal.ansiBlue#3e535a
terminal.ansiBrightBlack#6e5a2a
terminal.ansiBrightBlue#3e535a
terminal.ansiBrightCyan#3e535a
terminal.ansiBrightGreen#4a6a1c
terminal.ansiBrightMagenta#8a5a28
terminal.ansiBrightRed#b03a1a
terminal.ansiBrightWhite#3a2c14
terminal.ansiBrightYellow#c65e00
terminal.ansiCyan#3e535a
terminal.ansiGreen#4a6a1c
terminal.ansiMagenta#8a5a28
terminal.ansiRed#b03a1a
terminal.ansiWhite#4a3a1e
terminal.ansiYellow#9c6a1f
terminal.background#fec95c
terminal.foreground#4a3a1e
textLink.activeForeground#c65e00
textLink.foreground#3e535a
titleBar.activeBackground#f0b04e
titleBar.activeForeground#4a3a1e
titleBar.border#e0a838
titleBar.inactiveBackground#f0b04e

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	#c65e00	—
string, string.quoted, string.template, string.interpolated, string.regexp, constant.other.symbol, constant.other.symbol.ruby, punctuation.definition.string	#4a6a1c	—
entity.name.function, entity.name.method, support.function, meta.function-call, variable.function, meta.definition.method	#3e535a	—
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	#8a5a28	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, support.constant, variable.other.constant	#9c6a1f	—
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	#5e4a26	—
comment, punctuation.definition.comment, string.comment	#8a8060	italic
punctuation, meta.brace, keyword.operator, punctuation.separator, punctuation.terminator, punctuation.definition.template-expression	#4a3a1e	—