White Omarchy

Name: White Omarchy
Author: Bjarne

Publisher: BjarneThemes in package: 1

A monochromatic light theme with luminance-based hierarchy

Open in VS Code GitHub

VS Code preview

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

White Omarchy — White

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#000000
activityBar.background#ffffff
activityBar.border#e8e8e8
activityBar.foreground#000000
activityBar.inactiveForeground#808080
activityBarBadge.background#2e2e2e
activityBarBadge.foreground#ffffff
badge.background#2e2e2e
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#000000
breadcrumb.focusForeground#000000
breadcrumb.foreground#808080
breadcrumbPicker.background#f5f5f5
button.background#1a1a1a
button.foreground#ffffff
button.hoverBackground#2e2e2e
button.secondaryBackground#e8e8e8
button.secondaryForeground#000000
button.secondaryHoverBackground#d9d9d9
checkbox.background#ffffff
checkbox.border#c0c0c0
checkbox.foreground#000000
commandCenter.activeBackground#f5f5f5
commandCenter.activeBorder#d9d9d9
commandCenter.activeForeground#000000
commandCenter.background#ffffff
commandCenter.border#e8e8e8
commandCenter.foreground#000000
debugConsole.errorForeground#000000
debugConsole.infoForeground#3a3a3a
debugConsole.sourceForeground#4a4a4a
debugConsole.warningForeground#1a1a1a
debugIcon.breakpointDisabledForeground#c0c0c0
debugIcon.breakpointForeground#000000
debugIcon.pauseForeground#1a1a1a
debugIcon.restartForeground#2e2e2e
debugIcon.startForeground#2e2e2e
debugIcon.stepIntoForeground#1a1a1a
debugIcon.stepOutForeground#1a1a1a
debugIcon.stepOverForeground#1a1a1a
debugIcon.stopForeground#000000
debugToolBar.background#f5f5f5
debugToolBar.border#e8e8e8
descriptionForeground#6e6e6e
diffEditor.diagonalFill#e8e8e8
diffEditor.insertedTextBackground#00000008
diffEditor.removedTextBackground#00000012
dropdown.background#ffffff
dropdown.border#d9d9d9
dropdown.foreground#000000
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#b0b0b0
editor.findMatchBorder#808080
editor.findMatchHighlightBackground#d9d9d980
editor.foldBackground#f5f5f540
editor.foreground#000000
editor.hoverHighlightBackground#e8e8e850
editor.lineHighlightBackground#f2f2f2
editor.linkedEditingBackground#e8e8e850
editor.rangeHighlightBackground#f0f0f0
editor.selectionBackground#e0e0e0
editor.selectionHighlightBackground#e8e8e880
editor.wordHighlightBackground#e8e8e8
editor.wordHighlightStrongBackground#d9d9d9
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#2e2e2e
editorBracketHighlight.foreground3#4a4a4a
editorBracketHighlight.foreground4#1a1a1a
editorBracketHighlight.foreground5#3a3a3a
editorBracketHighlight.foreground6#5a5a5a
editorBracketHighlight.unexpectedBracket.foreground#808080
editorBracketMatch.background#e8e8e8
editorBracketMatch.border#c0c0c0
editorCursor.foreground#000000
editorError.foreground#000000
editorGhostText.foreground#c0c0c0
editorGroup.border#e8e8e8
editorGroup.dropBackground#e0e0e080
editorGroupHeader.noTabsBackground#ffffff
editorGroupHeader.tabsBackground#f5f5f5
editorGroupHeader.tabsBorder#e8e8e8
editorGutter.addedBackground#2e2e2e
editorGutter.background#ffffff
editorGutter.deletedBackground#000000
editorGutter.foldingControlForeground#c0c0c0
editorGutter.modifiedBackground#3a3a3a
editorHint.foreground#5a5a5a
editorHoverWidget.background#f5f5f5
editorHoverWidget.border#e8e8e8
editorHoverWidget.foreground#000000
editorIndentGuide.activeBackground#c0c0c0
editorIndentGuide.background#e8e8e8
editorInfo.foreground#3a3a3a
editorInlayHint.background#f5f5f5
editorInlayHint.foreground#a0a0a0
editorLineNumber.activeForeground#3a3a3a
editorLineNumber.foreground#c0c0c0
editorLink.activeForeground#000000
editorOverviewRuler.addedForeground#2e2e2e
editorOverviewRuler.border#e8e8e8
editorOverviewRuler.bracketMatchForeground#c0c0c0
editorOverviewRuler.deletedForeground#000000
editorOverviewRuler.errorForeground#000000
editorOverviewRuler.findMatchForeground#b0b0b0
editorOverviewRuler.infoForeground#3a3a3a
editorOverviewRuler.modifiedForeground#3a3a3a
editorOverviewRuler.warningForeground#1a1a1a
editorOverviewRuler.wordHighlightForeground#d9d9d9
editorRuler.foreground#e8e8e8
editorStickyScroll.background#f5f5f5
editorStickyScrollHover.background#e8e8e8
editorSuggestWidget.background#f5f5f5
editorSuggestWidget.border#e8e8e8
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#e0e0e0
editorWarning.foreground#1a1a1a
editorWhitespace.foreground#e8e8e8
editorWidget.background#f5f5f5
editorWidget.border#e8e8e8
editorWidget.foreground#000000
errorForeground#000000
focusBorder#2e2e2e
foreground#000000
gitDecoration.addedResourceForeground#2e2e2e
gitDecoration.conflictingResourceForeground#1a1a1a
gitDecoration.deletedResourceForeground#000000
gitDecoration.ignoredResourceForeground#a0a0a0
gitDecoration.modifiedResourceForeground#3a3a3a
gitDecoration.renamedResourceForeground#3a3a3a
gitDecoration.stageDeletedResourceForeground#000000
gitDecoration.stageModifiedResourceForeground#1a1a1a
gitDecoration.submoduleResourceForeground#5a5a5a
gitDecoration.untrackedResourceForeground#3a3a3a
icon.foreground#4a4a4a
input.background#ffffff
input.border#d9d9d9
input.foreground#000000
input.placeholderForeground#a0a0a0
inputOption.activeBackground#2e2e2e20
inputOption.activeBorder#2e2e2e
inputOption.activeForeground#000000
inputValidation.errorBackground#f5f5f5
inputValidation.errorBorder#000000
inputValidation.infoBackground#f5f5f5
inputValidation.infoBorder#3a3a3a
inputValidation.warningBackground#f5f5f5
inputValidation.warningBorder#1a1a1a
keybindingLabel.background#f0f0f0
keybindingLabel.border#d9d9d9
keybindingLabel.bottomBorder#c0c0c0
keybindingLabel.foreground#000000
list.activeSelectionBackground#e0e0e0
list.activeSelectionForeground#000000
list.dropBackground#e0e0e0
list.errorForeground#000000
list.focusBackground#e0e0e0
list.focusForeground#000000
list.highlightForeground#000000
list.hoverBackground#f0f0f0
list.hoverForeground#000000
list.inactiveSelectionBackground#e8e8e8
list.inactiveSelectionForeground#000000
list.warningForeground#1a1a1a
merge.border#c0c0c0
merge.currentContentBackground#f0f0f0
merge.currentHeaderBackground#e8e8e8
merge.incomingContentBackground#ececec
merge.incomingHeaderBackground#d9d9d9
minimap.background#ffffff
minimap.findMatchHighlight#b0b0b0
minimap.selectionHighlight#c0c0c080
minimapGutter.addedBackground#2e2e2e
minimapGutter.deletedBackground#000000
minimapGutter.modifiedBackground#3a3a3a
minimapSlider.activeBackground#00000030
minimapSlider.background#00000010
minimapSlider.hoverBackground#00000020
notificationCenter.border#e8e8e8
notificationLink.foreground#1a1a1a
notifications.background#ffffff
notifications.border#e8e8e8
notifications.foreground#000000
notificationsErrorIcon.foreground#000000
notificationsInfoIcon.foreground#3a3a3a
notificationsWarningIcon.foreground#1a1a1a
panel.background#ffffff
panel.border#e8e8e8
panelInput.border#d9d9d9
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#808080
peekView.border#c0c0c0
peekViewEditor.background#f5f5f5
peekViewEditor.matchHighlightBackground#d9d9d9
peekViewResult.background#f5f5f5
peekViewResult.fileForeground#000000
peekViewResult.lineForeground#4a4a4a
peekViewResult.matchHighlightBackground#d9d9d9
peekViewResult.selectionBackground#e0e0e0
peekViewResult.selectionForeground#000000
peekViewTitle.background#f5f5f5
peekViewTitleDescription.foreground#808080
peekViewTitleLabel.foreground#000000
progressBar.background#000000
quickInput.background#ffffff
quickInput.foreground#000000
quickInputList.focusBackground#e8e8e8
quickInputList.focusForeground#000000
quickInputTitle.background#f5f5f5
scrollbar.shadow#00000010
scrollbarSlider.activeBackground#00000035
scrollbarSlider.background#00000015
scrollbarSlider.hoverBackground#00000025
selection.background#d9d9d9
settings.focusedRowBackground#f0f0f0
settings.headerForeground#000000
settings.modifiedItemIndicator#2e2e2e
sideBar.background#ffffff
sideBar.border#e8e8e8
sideBar.foreground#000000
sideBarSectionHeader.background#f5f5f5
sideBarSectionHeader.border#e8e8e8
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#f5f5f5
statusBar.border#e8e8e8
statusBar.debuggingBackground#1a1a1a
statusBar.debuggingBorder#1a1a1a
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#f5f5f5
statusBar.noFolderForeground#000000
statusBarItem.activeBackground#00000020
statusBarItem.hoverBackground#00000010
statusBarItem.prominentBackground#e8e8e8
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#d9d9d9
statusBarItem.remoteBackground#2e2e2e
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#4a4a4a
symbolIcon.booleanForeground#3a3a3a
symbolIcon.classForeground#1a1a1a
symbolIcon.constantForeground#000000
symbolIcon.constructorForeground#2e2e2e
symbolIcon.enumeratorForeground#1a1a1a
symbolIcon.enumeratorMemberForeground#000000
symbolIcon.fieldForeground#2e2e2e
symbolIcon.functionForeground#000000
symbolIcon.interfaceForeground#1a1a1a
symbolIcon.keyForeground#3a3a3a
symbolIcon.keywordForeground#000000
symbolIcon.methodForeground#000000
symbolIcon.moduleForeground#1a1a1a
symbolIcon.namespaceForeground#1a1a1a
symbolIcon.numberForeground#3a3a3a
symbolIcon.objectForeground#1a1a1a
symbolIcon.packageForeground#1a1a1a
symbolIcon.propertyForeground#2e2e2e
symbolIcon.stringForeground#3a3a3a
symbolIcon.typeParameterForeground#1a1a1a
symbolIcon.variableForeground#2e2e2e
tab.activeBackground#ffffff
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.border#e8e8e8
tab.hoverBackground#ffffff
tab.inactiveBackground#f5f5f5
tab.inactiveForeground#808080
tab.unfocusedActiveBorderTop#c0c0c0
tab.unfocusedActiveForeground#808080
tab.unfocusedInactiveForeground#a0a0a0
terminal.ansiBlack#ffffff
terminal.ansiBlue#1a1a1a
terminal.ansiBrightBlack#c0c0c0
terminal.ansiBrightBlue#1a1a1a
terminal.ansiBrightCyan#3e3e3e
terminal.ansiBrightGreen#3a3a3a
terminal.ansiBrightMagenta#2e2e2e
terminal.ansiBrightRed#2a2a2a
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#4a4a4a
terminal.ansiCyan#3e3e3e
terminal.ansiGreen#3a3a3a
terminal.ansiMagenta#2e2e2e
terminal.ansiRed#2a2a2a
terminal.ansiWhite#000000
terminal.ansiYellow#4a4a4a
terminal.background#ffffff
terminal.foreground#000000
terminal.selectionBackground#1a1a1a
terminal.selectionForeground#ffffff
terminalCursor.foreground#000000
testing.iconErrored#000000
testing.iconFailed#000000
testing.iconPassed#3a3a3a
testing.iconQueued#808080
testing.iconSkipped#c0c0c0
testing.iconUnset#a0a0a0
textBlockQuote.background#f5f5f5
textBlockQuote.border#e8e8e8
textLink.activeForeground#000000
textLink.foreground#1a1a1a
textPreformat.foreground#3a3a3a
textSeparator.foreground#e8e8e8
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#e8e8e8
titleBar.inactiveBackground#f5f5f5
titleBar.inactiveForeground#808080
tree.indentGuidesStroke#e8e8e8
walkThrough.embeddedEditorBackground#f5f5f5
welcomePage.tileBackground#f5f5f5
welcomePage.tileBorder#e8e8e8
welcomePage.tileHoverBackground#e8e8e8
widget.shadow#00000010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6e6e6e	italic
keyword, keyword.control, keyword.other, storage.modifier	#000000	bold
storage.type, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#1a1a1a	—
entity.name.function, support.function, meta.function-call	#000000	bold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.struct, entity.name.enum, entity.name.interface, entity.name.union, support.type, support.class	#1a1a1a	bold
entity.name.type.parameter	#1a1a1a	—
variable, variable.other, variable.other.readwrite, variable.other.object	#2e2e2e	—
variable.parameter, variable.other.jsdoc	#1a1a1a	—
variable.other.property, variable.other.object.property, variable.other.constant.property, support.variable.property, meta.object-literal.key	#2e2e2e	—
variable.other.constant, constant.language, support.constant, variable.language	#000000	—
string, string.quoted, string.template	#3a3a3a	—
constant.character.escape	#2e2e2e	—
string.regexp	#3e3e3e	—
constant.numeric, constant.language.boolean	#3a3a3a	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type	#4a4a4a
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.typeparameters, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section, meta.brace	#4a4a4a	—
punctuation.definition.string, punctuation.definition.template-expression	#3a3a3a	—
entity.name.tag, support.class.component	#1a1a1a	—
entity.other.attribute-name	#2e2e2e	—
punctuation.definition.tag	#4a4a4a	—
entity.name.function.preprocessor, meta.preprocessor, keyword.control.directive, punctuation.definition.directive	#3e3e3e	—
meta.decorator, punctuation.decorator, meta.annotation	#3e3e3e	—
entity.name.function.constructor, support.class.constructor	#2e2e2e	—
support.function.builtin, support.variable, support.type.builtin	#3e3e3e	—
entity.name.label	#1a1a1a	—
storage.type.class.jsdoc, keyword.other.documentation, variable.other.jsdoc	#1a1a1a	—
markup.heading, entity.name.section	#000000	bold
markup.bold	#000000	bold
markup.italic	—	italic
markup.underline.link	#5a5a5a	—
markup.inline.raw, markup.fenced_code, markup.raw	#3a3a3a	—
markup.list, punctuation.definition.list	#4a4a4a	—
markup.quote	#6e6e6e	italic
markup.inserted	#2e2e2e	—
markup.deleted	#000000	—
markup.changed	#3a3a3a	—
invalid, invalid.illegal	#000000	underline
support.type.property-name.css, support.type.vendored.property-name.css	#2e2e2e	—
support.constant.property-value.css, support.constant.color.css, constant.other.color.rgb-value.css	#3a3a3a	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#1a1a1a	—
entity.name.tag.css, entity.name.tag.wildcard.css	#1a1a1a	—
support.function.css, support.constant.font-name.css	#3e3e3e	—
support.type.property-name.json	#1a1a1a	—
entity.name.tag.yaml	#1a1a1a	—
support.type.property-name.toml, entity.name.tag.toml	#1a1a1a	—
entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml	#000000	bold
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell	#2e2e2e	—
entity.name.function.target.makefile	#000000	bold
keyword.other.DML.sql, keyword.other.DDL.sql	#000000	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}!`;
}