Pure White Theme

Name: Pure White Theme
Author: Ashwin Gopalsamy

Publisher: Ashwin GopalsamyThemes in package: 1

Absolute White Theme that's bright and nice on the eye during the day's work.

Open in VS Code GitHub

VS Code preview

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

Pure White Theme — Pure White Theme

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.activeBackground#ffffff
activityBar.activeBorder#000000
activityBar.background#ffffff
activityBar.border#ffffff
activityBar.foreground#007aff
activityBar.inactiveForeground#686969
activityBarBadge.background#447aff
badge.background#447aff
badge.foreground#ffffff
button.background#447aff
button.foreground#ffffff
button.hoverBackground#007aff
descriptionForeground#2e2e2e
dropdown.background#ffffff
dropdown.border#bfbfbf
dropdown.foreground#222222
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#a8ac94
editor.findMatchHighlightBackground#447aff44
editor.findRangeHighlightBackground#b4b4b44d
editor.foreground#000000
editor.lineHighlightBackground#0000002d
editor.lineHighlightBorder#0000001f
editor.selectionBackground#b5d5ff
editorCursor.foreground#000000
editorGroup.border#e1e2e2
editorGroup.dropBackground#0369d922
editorGroup.emptyBackground#f7f7f6
editorGroupHeader.border#ffffff
editorGroupHeader.noTabsBackground#e9e9e8
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#ffffff
editorIndentGuide.activeBackground#d7d8d7
editorIndentGuide.background#e5e5e5
editorLineNumber.activeForeground#666666
editorLineNumber.foreground#bbbbbb
editorWhitespace.foreground#bfbfbf
editorWidget.background#f2f2f2
errorForeground#ff0000
focusBorder#ffffff
foreground#434343
input.background#ffffff
input.border#bfbfbf
input.foreground#222222
inputOption.activeBackground#e7e7e7
list.activeSelectionBackground#cedeef
list.activeSelectionForeground#007aff
list.activeSelectionIconForeground#fff
list.dropBackground#dedcde
list.errorForeground#2e2e2e
list.focusBackground#dedcdeaa
list.focusForeground#000000
list.highlightForeground#2e2e2e
list.hoverForeground#007aff
list.inactiveFocusBackground#dbdbdb
list.inactiveSelectionBackground#dbdbdb
list.inactiveSelectionForeground#007aff
list.invalidItemForeground#2e2e2e
list.warningForeground#2e2e2e
menu.background#ffffff
menu.selectionBackground#007aff
menu.selectionForeground#ffffff
menubar.selectionBackground#007aff
menubar.selectionForeground#ffffff
panel.background#ffffff
panelTitle.activeBorder#000000
panelTitle.activeForeground#007aff
selection.background#cedeef
sideBar.background#ffffff
sideBar.border#ffffff
sideBar.dropBackground#f9f5f5
sideBar.foreground#000000
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#ffffff
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#f6f6f5
statusBar.border#dfdfde
statusBar.debuggingBackground#ededed
statusBar.foreground#666666
statusBar.noFolderBackground#ededed
tab.activeBackground#ffffff
tab.activeBorder#e1e2e2
tab.activeBorderTop#e2e2e2
tab.activeForeground#434343
tab.border#dad9d9
tab.inactiveBackground#ffffff
tab.inactiveForeground#686969
tab.unfocusedActiveBackground#f7f7f6
tab.unfocusedActiveBorder#e1e2e2
tab.unfocusedActiveForeground#434343
tab.unfocusedInactiveBackground#e9e9e8
tab.unfocusedInactiveForeground#686969
textBlockQuote.background#ff000000
textBlockQuote.border#ff000000
textCodeBlock.background#ff000000
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#ffffff
titleBar.inactiveBackground#f7f7f6
titleBar.inactiveForeground#acacab
welcomePage.background#ffffff
widget.shadow#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#AAAAAA	italic
comment.block.preprocessor	#AAAAAA
comment.documentation, comment.block.documentation	#448C27	—
invalid.illegal	#660000	—
keyword.operator	#777777	—
keyword, storage	#4B83CD	—
storage.type, support.type	#7A3E9D	—
constant.language, support.constant, variable.language	#AB6526	—
variable, support.variable	#7A3E9D	—
entity.name.function, support.function	#AA3731	bold
entity.name.type, entity.other.inherited-class, support.class	#7A3E9D	bold
entity.name.exception	#660000	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#AB6526	—
string	#448C27	—
constant.character.escape	#777777	—
string.regexp	#4B83CD	—
constant.other.symbol	#AB6526	—
punctuation	#777777	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#AAAAAA	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#91B3E0	—
entity.name.tag	#4B83CD	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#91B3E0	italic
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#7A3E9D	—
meta.property-name, support.type.property-name	#AB6526	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#448C27	—
keyword.other.important	—	bold
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000000	—
meta.link	#4B83CD	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#4B83CD	—
markup.bold, markup.italic	#448C27	—
markup.inline.raw	#AB6526
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—

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