Oro Theme

Name: Oro Theme
Author: Deimonn

Publisher: DeimonnThemes in package: 4

Dark mode theme that aims to be both functional and aesthetically pleasing

Open in VS Code GitHub

Color themes

VS Code preview

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

Oro Theme — Oro Theme (Italics)

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#1C1C1C
activityBar.activeBorder#70C2E7
activityBar.activeFocusBorder#70C2E7
activityBar.background#161616
activityBar.dropBorder#70C2E7
activityBar.inactiveForeground#B9B9B9
activityBarBadge.background#3A6375
activityBarBadge.foreground#FFFFFF
badge.background#3A6375
badge.foreground#FFFFFF
button.background#3A6375
button.foreground#DDDDDD
button.hoverBackground#4F88A0
checkbox.background#303030
diffEditor.insertedLineBackground#63DBC119
diffEditor.insertedTextBackground#63DBC133
diffEditor.removedLineBackground#E0444433
diffEditor.removedTextBackground#E0444433
dropdown.background#202020
dropdown.border#2E505F
editor.background#161616
editor.findMatchBorder#4482FF
editor.findMatchHighlightBackground#4482FF40
editor.foldBackground#5F5F5F57
editor.foreground#DDDDDD
editor.lineHighlightBackground#161616
editor.lineHighlightBorder#5F5F5F80
editor.selectionBackground#70C2E733
editor.selectionHighlightBorder#70C2E766
editorBracketMatch.background#00000000
editorBracketMatch.border#A0A0A0
editorCursor.background#161616
editorCursor.foreground#DDDDDD
editorError.background#E0444480
editorError.border#E04444
editorError.foreground#E04444
editorGroup.border#5F5F5F
editorGroup.dropBackground#5F5F5F40
editorGroupHeader.noTabsBackground#1C1C1C
editorGroupHeader.tabsBackground#1C1C1C
editorGutter.addedBackground#63DBC1
editorGutter.deletedBackground#E04444
editorGutter.modifiedBackground#E0CD78
editorHoverWidget.background#202020
editorHoverWidget.border#404040
editorIndentGuide.activeBackground1#5D5D5D
editorIndentGuide.activeBackground2#6D6D6D
editorIndentGuide.activeBackground3#7D7D7D
editorIndentGuide.activeBackground4#8D8D8D
editorIndentGuide.activeBackground5#9D9D9D
editorIndentGuide.activeBackground6#ADADAD
editorIndentGuide.background1#303030
editorIndentGuide.background2#404040
editorIndentGuide.background3#505050
editorIndentGuide.background4#606060
editorIndentGuide.background5#707070
editorIndentGuide.background6#808080
editorInfo.background#77D4D440
editorInfo.border#77D4D4
editorInfo.foreground#77D4D4
editorLineNumber.activeForeground#B9B9B9
editorLineNumber.foreground#5F5F5F
editorLink.activeForeground#4EB3E2
editorMarkerNavigation.background#202020
editorMarkerNavigationError.background#E04444
editorMarkerNavigationInfo.background#77D4D4
editorMarkerNavigationWarning.background#E0A243
editorOverviewRuler.addedForeground#63DBC180
editorOverviewRuler.border#161616
editorOverviewRuler.bracketMatchForeground#A0A0A0
editorOverviewRuler.deletedForeground#E0444480
editorOverviewRuler.errorForeground#E04444
editorOverviewRuler.findMatchForeground#4482FF80
editorOverviewRuler.infoForeground#77D4D4
editorOverviewRuler.modifiedForeground#E0CD7880
editorOverviewRuler.selectionHighlightForeground#70C2E766
editorOverviewRuler.warningForeground#E0A243
editorPane.background#121212
editorRuler.foreground#5F5F5F
editorSuggestWidget.background#202020
editorSuggestWidget.border#404040
editorSuggestWidget.highlightForeground#70C2E7
editorWarning.background#E0A24380
editorWarning.border#E0A243
editorWarning.foreground#E0A243
editorWhitespace.foreground#5F5F5F
editorWidget.background#202020
editorWidget.resizeBorder#404040
errorForeground#E04444
errorLens.errorBackground#E0444419
errorLens.errorForeground#E04444
errorLens.errorMessageBackground#E0444419
errorLens.errorRangeBackground#00000000
errorLens.hintBackground#78787819
errorLens.hintForeground#787878
errorLens.hintMessageBackground#78787819
errorLens.hintRangeBackground#00000000
errorLens.infoBackground#77D4D419
errorLens.infoForeground#77D4D4
errorLens.infoMessageBackground#77D4D419
errorLens.infoRangeBackground#00000000
errorLens.warningBackground#E0A24319
errorLens.warningForeground#E0A243
errorLens.warningMessageBackground#E0A24319
errorLens.warningRangeBackground#00000000
focusBorder#70C2E7
foreground#DDDDDD
gitDecoration.addedResourceForeground#63DBC1
gitDecoration.deletedResourceForeground#E04444
gitDecoration.ignoredResourceForeground#787878
gitDecoration.modifiedResourceForeground#E0CD78
gitDecoration.stageDeletedResourceForeground#E04444
gitDecoration.stageModifiedResourceForeground#E0CD78
gitDecoration.untrackedResourceForeground#63DBC1
input.background#202020
input.border#2E505F
inputValidation.errorBackground#3F0A0A
inputValidation.errorBorder#E04444
inputValidation.errorForeground#EA8383
inputValidation.infoBackground#143F3F
inputValidation.infoBorder#77D4D4
inputValidation.infoForeground#B6E8E8
inputValidation.warningBackground#3E2A0A
inputValidation.warningBorder#E0A243
inputValidation.warningForeground#EAC181
list.activeSelectionBackground#70C2E740
list.dropBackground#5F5F5F40
list.errorForeground#E04444
list.focusBackground#70C2E740
list.highlightForeground#70C2E7
list.hoverBackground#70C2E719
list.inactiveSelectionBackground#70C2E733
list.warningForeground#E0A243
menu.background#202020
menu.foreground#DDDDDD
menu.selectionBackground#70C2E7
menu.selectionForeground#161616
menu.separatorBackground#404040
minimap.background#161616
minimap.errorHighlight#E04444
minimap.findMatchHighlight#4482FF80
minimap.selectionHighlight#70C2E766
minimap.warningHighlight#E0A243
minimapGutter.addedBackground#63DBC1
minimapGutter.deletedBackground#E04444
minimapGutter.modifiedBackground#E0CD78
minimapSlider.activeBackground#B9B9B966
minimapSlider.background#5F5F5F66
minimapSlider.hoverBackground#5F5F5F66
notifications.background#202020
notifications.border#404040
notificationsErrorIcon.foreground#E04444
notificationsInfoIcon.foreground#77D4D4
notificationsWarningIcon.foreground#E0A243
panel.dropBorder#70C2E7
panelSection.dropBackground#5F5F5F40
panelTitle.activeBorder#70C2E7
peekView.border#70C2E7
peekViewEditor.background#202020
peekViewEditor.matchHighlightBackground#70C2E761
peekViewEditorGutter.background#202020
peekViewResult.background#1C1C1C
peekViewResult.matchHighlightBackground#70C2E761
peekViewTitle.background#0C3649
ports.iconRunningProcessForeground#68E09E
problemsErrorIcon.foreground#E04444
problemsInfoIcon.foreground#77D4D4
problemsWarningIcon.foreground#E0A243
progressBar.background#70C2E7
scrollbarSlider.activeBackground#B9B9B960
scrollbarSlider.background#5F5F5F60
scrollbarSlider.hoverBackground#5F5F5F60
selection.background#70C2E733
settings.modifiedItemIndicator#E0CD78
sideBar.background#1C1C1C
sideBar.dropBackground#5F5F5F40
sideBarSectionHeader.background#1C1C1C
statusBar.background#3A6375
statusBar.debuggingBackground#812D2A
statusBar.focusBorder#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#98753C
statusBarItem.remoteBackground#DDDDDD
statusBarItem.remoteForeground#161616
statusBarItem.remoteHoverBackground#6F6F6F
statusBarItem.remoteHoverForeground#DDDDDD
tab.activeBackground#161616
tab.activeBorder#00000000
tab.activeBorderTop#70C2E7
tab.border#00000000
tab.hoverBackground#232323
tab.inactiveBackground#1C1C1C
tab.lastPinnedBorder#5F5F5F
terminal.dropBackground#5F5F5F40
terminal.selectionBackground#70C2E733
terminalCursor.background#161616
terminalCursor.foreground#DDDDDD
textLink.activeForeground#4EB3E2
textLink.foreground#70C2E7
textPreformat.foreground#FFFFFF
textSeparator.foreground#161616
titleBar.activeBackground#1C1C1C
titleBar.inactiveBackground#1C1C1C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid.illegal	#E04444FF
entity.name.type, entity.name.type.class, entity.name.type.struct	#63DBC1FF
storage.type.builtin, storage.type.built-in, storage.type.primitive, support.type.builtin, support.type.built-in, support.type.primitive, keyword.type	#70C2E7FF	italic
entity.name.type.interface, entity.name.type.parameter	#E4C693FF
entity.name.type.enum	#8FDB8FFF
variable.other.enummember	#77D4D4FF
entity.name.type.namespace, entity.name.namespace	#D5CCBAFF
keyword, storage, variable.language	#E0CD78FF	italic
keyword.operator	#E0CD78FF
entity.name.function.preprocessor	#E0CD78FF
entity.name.function	#DDDDDDFF
variable, entity.name.variable, entity.name.type.module	#BCD3D6FF
constant	#77D4D4FF
constant.language	#77D4D4FF	italic
comment, punctuation.definition.comment	#787878FF
string	#68E09EFF
constant.character.escape	#A8DBBFFF
constant.numeric	#CEC7A8FF
punctuation	#A0A0A0FF
entity.name.tag	#77D4D4FF
support.type.property-name	#DDDDDDFF
markup.heading, entity.name.section	#E0CD78FF	italic
markup.bold	—	bold
markup.italic	—	italic
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.raw, markup.inline.raw, fenced_code.block.language	#A0A0A0FF
markup.quote	#A0A0A0FF
markup.list.bullet	#A0A0A0FF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}