Orange&Black

Name: Orange&Black
Author: PNiewiarowski

Publisher: PNiewiarowskiThemes in package: 2

Orange&Black and Orange&White Visual Studio theme. Light and dark theme with orange accents.

Open in VS Code GitHub

Color themes

VS Code preview

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

Orange&Black — Orange&Black

fetchUser.ts

index.ts

README.md

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#15151500
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#151515
activityBar.border#000000
activityBar.dropBorder#e67e22
activityBar.foreground#e67e22
activityBar.inactiveForeground#ffeeee
activityBarBadge.background#e67e22
activityBarBadge.foreground#ffeeee
breadcrumb.activeSelectionForeground#e67e22
breadcrumb.background#151515
breadcrumb.focusForeground#e67e22
breadcrumb.foreground#ffeeee
breadcrumbPicker.background#151515
button.background#00000000
button.border#e67e22
button.foreground#e67e22
button.hoverBackground#00000000
button.secondaryBackground#e67e22
button.secondaryForeground#ffeeee
button.secondaryHoverBackground#e67e22aa
debugIcon.breakpointCurrentStackframeForeground#2237cc
debugIcon.breakpointForeground#cc2237
debugIcon.pauseForeground#2237cc
debugIcon.restartForeground#22cc37
debugIcon.startForeground#ffeeee
debugIcon.stepBackForeground#ffeeee
debugIcon.stepIntoForeground#ffeeee
debugIcon.stepOutForeground#ffeeee
debugIcon.stepOverForeground#ffeeee
debugIcon.stopForeground#cc2237
descriptionForeground#ffeeee
editor.background#222222
editor.foreground#ffeeee
editor.lineHighlightBackground#111111
editor.lineHighlightBorder#00000000
editorCursor.foreground#e67e22
editorError.border#00000000
editorError.foreground#cc2237
editorGroupHeader.border#000000
editorGroupHeader.tabsBackground#151515
editorGroupHeader.tabsBorder#000000
editorHint.border#00000000
editorLineNumber.activeForeground#e67e22
editorLineNumber.foreground#777777
editorWidget.background#151515
editorWidget.border#000000
focusBorder#e67e22
foreground#f8dcba
gitDecoration.addedResourceForeground#22cc37
gitDecoration.conflictingResourceForeground#cc2237
gitDecoration.deletedResourceForeground#cc2237
gitDecoration.ignoredResourceForeground#ffeeee
gitDecoration.modifiedResourceForeground#cccc37
gitDecoration.renamedResourceForeground#cccc37
gitDecoration.stageDeletedResourceForeground#cc2237
gitDecoration.untrackedResourceForeground#cccc37
icon.foreground#ffeeee
input.background#222222
input.border#000000
input.foreground#ffeeee
input.placeholderForeground#777777
list.activeSelectionBackground#151515
list.activeSelectionForeground#e67e22
list.dropBackground#e67e22
list.errorForeground#ff2237
list.focusBackground#000000
list.focusForeground#e67e22
list.highlightForeground#e67e22
list.hoverBackground#151515
list.hoverForeground#e67e22
list.inactiveFocusBackground#151515
list.inactiveSelectionBackground#151515
list.inactiveSelectionForeground#ffeeee
list.warningForeground#2237ff
menu.background#151515
menu.border#000000
menu.foreground#ffeeee
menu.selectionBackground#e67e22
menu.selectionBorder#e67e22
menu.selectionForeground#ffeeee
menu.separatorBackground#000000
menubar.selectionBackground#151515
menubar.selectionBorder#00000000
menubar.selectionForeground#e67e22
minimap.background#222222
minimapSlider.activeBackground#11111155
minimapSlider.background#000000aa
minimapSlider.hoverBackground#00000055
notificationCenter.border#000000
notificationCenterHeader.background#151515
notificationCenterHeader.foreground#e67e22
notificationLink.foreground#5555ff
notifications.background#151515
notifications.border#000000
notifications.foreground#ffeeee
notificationsErrorIcon.foreground#ff2237
notificationsInfoIcon.foreground#ffeeee
notificationsWarningIcon.foreground#e67e22
notificationToast.border#000000
panel.background#151515
panel.border#000000
panel.dropBorder#000000
panelInput.border#000000
panelSectionHeader.border#000000
panelTitle.activeBorder#e67e22
panelTitle.activeForeground#e67e22
panelTitle.inactiveForeground#e67e22
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#050505
scrollbarSlider.background#151515
scrollbarSlider.hoverBackground#111111
settings.checkboxBackground#151515
settings.checkboxBorder#e67e22
settings.checkboxForeground#e67e22
settings.dropdownBackground#151515
settings.dropdownBorder#000000
settings.dropdownForeground#ffeeee
settings.dropdownListBorder#000000
settings.focusedRowBackground#151515
settings.headerForeground#e67e22
settings.numberInputBackground#151515
settings.numberInputBorder#000000
settings.numberInputForeground#ffeeee
settings.textInputBackground#151515
settings.textInputBorder#000000
settings.textInputForeground#ffeeee
sideBar.background#151515
sideBar.border#000000
sideBar.foreground#ffeeee
sideBarSectionHeader.background#151515
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#ffeeee
sideBarTitle.foreground#e67e22
statusBar.background#e67e22
statusBar.border#000000
statusBar.debuggingBackground#e67e22
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#151515
statusBar.foreground#ffeeee
tab.activeBackground#151515
tab.activeBorder#e67e22
tab.activeBorderTop#e67e22
tab.activeForeground#ffeeee
tab.border#151515
tab.hoverBackground#151515
tab.hoverBorder#e67e22
tab.hoverForeground#e67e22
tab.inactiveBackground#151515
tab.inactiveForeground#ffeeee
terminal.background#151515
terminal.border#000000
terminal.foreground#ffeeee
terminalCursor.foreground#e67e22
textLink.activeForeground#e67e22aa
textLink.foreground#e67e22
titleBar.activeBackground#151515
titleBar.activeForeground#ffeeee
titleBar.border#000000
titleBar.inactiveBackground#151515
titleBar.inactiveForeground#ffeeee
window.activeBorder#000000
window.inactiveBorder#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#777777	bold
constant.other.placeholder, entity.name.import, meta.template.expression	#f8dcba	bold
keyword, support.type, storage.type, variable.language.this, entity.name.tag	#e67e22	bold
support.function, entity.name.function, variable.other.property	#f1c40f	bold
string	#ccfd44	bold
constant	#f377f3	bold
entity.name.import.go, variable, storage.modifier, entity.other.attribute-name	#ffbd6c	bold

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}!`;
}