White on White

Name: White on White
Author: Cyrus Yip

Publisher: Cyrus YipThemes in package: 1

White on white colour theme!

Open in VS Code GitHub

VS Code preview

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

White on White — White on 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.background#fff
activityBar.border#fff
activityBar.dropBackground#fff
activityBar.foreground#fff
activityBarBadge.background#fff
activityBarBadge.foreground#fff
badge.background#fff
badge.foreground#fff
button.background#fff
button.foreground#fff
button.hoverBackground#fff
contrastActiveBorder#fff
contrastBorder#fff
debugExceptionWidget.background#fff
debugExceptionWidget.border#fff
debugToolBar.background#fff
descriptionForeground#fff
diffEditor.insertedTextBackground#fff
diffEditor.insertedTextBorder#fff
diffEditor.removedTextBackground#fff
diffEditor.removedTextBorder#fff
dropdown.background#fff
dropdown.border#fff
dropdown.foreground#fff
dropdown.listBackground#fff
editor.background#fff
editor.findMatchBackground#fff
editor.findMatchBorder#fff
editor.findMatchHighlightBackground#fff
editor.findMatchHighlightBorder#fff
editor.findRangeHighlightBackground#fff
editor.foreground#fff
editor.hoverHighlightBackground#fff
editor.inactiveSelectionBackground#fff
editor.lineHighlightBackground#fff
editor.lineHighlightBorder#fff
editor.rangeHighlightBackground#fff
editor.rangeHighlightBorder#fff
editor.selectionBackground#fff
editor.selectionForeground#fff
editor.selectionHighlightBackground#fff
editor.selectionHighlightBorder#fff
editor.wordHighlightBackground#fff
editor.wordHighlightBorder#fff
editor.wordHighlightStrongBorder#fff
editorBracketMatch.background#fff
editorBracketMatch.border#fff
editorCodeLens.foreground#fff
editorCursor.background#fff
editorCursor.foreground#fff
editorError.border#fff
editorError.foreground#fff
editorGroup.border#fff
editorGroup.dropBackground#fff
editorGroupHeader.noTabsBackground#fff
editorGroupHeader.tabsBackground#fff
editorGroupHeader.tabsBorder#fff
editorGutter.addedBackground#fff
editorGutter.background#fff
editorGutter.deletedBackground#fff
editorGutter.modifiedBackground#fff
editorHint.border#fff
editorHint.foreground#fff
editorHoverWidget.background#fff
editorHoverWidget.border#fff
editorIndentGuide.background#fff
editorInfo.border#fff
editorInfo.foreground#fff
editorLineNumber.activeForeground#fff
editorLineNumber.foreground#fff
editorLink.activeForeground#fff
editorMarkerNavigation.background#fff
editorMarkerNavigationError.background#fff
editorMarkerNavigationInfo.background#fff
editorMarkerNavigationWarning.background#fff
editorOverviewRuler.addedForeground#fff
editorOverviewRuler.border#fff
editorOverviewRuler.commonContentForeground#fff
editorOverviewRuler.deletedForeground#fff
editorOverviewRuler.errorForeground#fff
editorOverviewRuler.findMatchForeground#fff
editorOverviewRuler.infoForeground#fff
editorOverviewRuler.modifiedForeground#fff
editorOverviewRuler.rangeHighlightForeground#fff
editorOverviewRuler.selectionHighlightForeground#fff
editorOverviewRuler.warningForeground#fff
editorOverviewRuler.wordHighlightForeground#fff
editorOverviewRuler.wordHighlightStrongForeground#fff
editorRuler.foreground#fff
editorSuggestWidget.background#fff
editorSuggestWidget.border#fff
editorSuggestWidget.foreground#fff
editorSuggestWidget.highlightForeground#fff
editorSuggestWidget.selectedBackground#fff
editorWarning.border#fff
editorWarning.foreground#fff
editorWhitespace.foreground#fff
editorWidget.background#fff
editorWidget.border#fff
errorForeground#fff
extensionButton.prominentBackground#fff
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#fff
focusBorder#fff
foreground#fff
gitDecoration.conflictingResourceForeground#fff
gitDecoration.deletedResourceForeground#fff
gitDecoration.ignoredResourceForeground#fff
gitDecoration.modifiedResourceForeground#fff
gitDecoration.untrackedResourceForeground#fff
input.background#fff
input.border#fff
input.foreground#fff
input.placeholderForeground#fff
inputOption.activeBorder#fff
inputValidation.errorBackground#fff
inputValidation.errorBorder#fff
inputValidation.infoBackground#fff
inputValidation.infoBorder#fff
inputValidation.warningBackground#fff
inputValidation.warningBorder#fff
list.activeSelectionBackground#fff
list.activeSelectionForeground#fff
list.dropBackground#fff
list.focusBackground#fff
list.focusForeground#fff
list.highlightForeground#fff
list.hoverBackground#fff
list.hoverForeground#fff
list.inactiveFocusBackground#fff
list.inactiveSelectionBackground#fff
list.inactiveSelectionForeground#fff
list.invalidItemForeground#fff
merge.border#fff
merge.commonContentBackground#fff
merge.commonHeaderBackground#fff
merge.currentContentBackground#fff
merge.currentHeaderBackground#fff
merge.incomingContentBackground#fff
merge.incomingHeaderBackground#fff
notificationCenter.border#fff
notificationCenterHeader.background#fff
notificationCenterHeader.foreground#fff
notificationLink.foreground#fff
notifications.background#fff
notifications.border#fff
notifications.foreground#fff
notificationToast.border#fff
panel.background#fff
panel.border#fff
panel.dropBackground#fff
panelTitle.activeBorder#fff
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#fff
peekView.border#fff
peekViewEditor.background#fff
peekViewEditor.matchHighlightBackground#fff
peekViewEditorGutter.background#fff
peekViewResult.background#fff
peekViewResult.fileForeground#fff
peekViewResult.lineForeground#fff
peekViewResult.matchHighlightBackground#fff
peekViewResult.selectionBackground#fff
peekViewResult.selectionForeground#fff
peekViewTitle.background#fff
peekViewTitleDescription.foreground#fff
peekViewTitleLabel.foreground#fff
pickerGroup.border#fff
pickerGroup.foreground#fff
progressBar.background#fff
scrollbar.shadow#fff
scrollbarSlider.activeBackground#fff
scrollbarSlider.background#fff
scrollbarSlider.hoverBackground#fff
selection.background#fff
sideBar.background#fff
sideBar.border#fff
sideBar.dropBackground#fff
sideBar.foreground#fff
sideBarSectionHeader.background#fff
sideBarSectionHeader.foreground#fff
sideBarTitle.foreground#fff
statusBar.background#fff
statusBar.border#fff
statusBar.debuggingBackground#fff
statusBar.debuggingBorder#fff
statusBar.debuggingForeground#fff
statusBar.foreground#fff
statusBar.noFolderBackground#fff
statusBar.noFolderBorder#fff
statusBar.noFolderForeground#fff
statusBarItem.activeBackground#fff
statusBarItem.hoverBackground#fff
statusBarItem.prominentBackground#fff
statusBarItem.prominentHoverBackground#fff
tab.activeBackground#fff
tab.activeBorder#fff
tab.activeForeground#fff
tab.border#fff
tab.hoverBackground#fff
tab.hoverBorder#fff
tab.inactiveBackground#fff
tab.inactiveForeground#fff
tab.unfocusedActiveBorder#fff
tab.unfocusedActiveForeground#fff
tab.unfocusedHoverBackground#fff
tab.unfocusedHoverBorder#fff
tab.unfocusedInactiveForeground#fff
terminal.ansiBlack#fff
terminal.ansiBlue#fff
terminal.ansiBrightBlack#fff
terminal.ansiBrightBlue#fff
terminal.ansiBrightCyan#fff
terminal.ansiBrightGreen#fff
terminal.ansiBrightMagenta#fff
terminal.ansiBrightRed#fff
terminal.ansiBrightWhite#fff
terminal.ansiBrightYellow#fff
terminal.ansiCyan#fff
terminal.ansiGreen#fff
terminal.ansiMagenta#fff
terminal.ansiRed#fff
terminal.ansiWhite#fff
terminal.ansiYellow#fff
terminal.background#fff
terminal.foreground#fff
terminal.selectionBackground#fff
terminalCursor.background#fff
terminalCursor.foreground#fff
textBlockQuote.background#fff
textBlockQuote.border#fff
textCodeBlock.background#fff
textLink.activeForeground#fff
textLink.foreground#fff
textPreformat.foreground#fff
textSeparator.foreground#fff
titleBar.activeBackground#fff
titleBar.activeForeground#fff
titleBar.border#fff
titleBar.inactiveBackground#fff
titleBar.inactiveForeground#fff
walkThrough.embeddedEditorBackground#fff
welcomePage.buttonBackground#fff
welcomePage.buttonHoverBackground#fff
widget.shadow#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

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