Whiteboard

Name: Whiteboard
Author: Hyzeta

Publisher: HyzetaThemes in package: 1

Whiteboard Theme for Visual Studio Code

Open in VS Code GitHub

VS Code preview

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

Whiteboard — Whiteboard

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#fafafa
activityBar.foreground#24292e
activityBarBadge.background#24292e
button.background#24292e
editor.background#fafafa
editor.foreground#24292e
editor.lineHighlightBackground#f0f0f0
editor.lineHighlightBorder#f0f0f0
editorError.foreground#d73a49
editorGroupHeader.noTabsBackground#f5f5f5
editorGroupHeader.tabsBackground#f5f5f5
editorGutter.addedBackground#24292e
editorGutter.deletedBackground#24292e
editorGutter.modifiedBackground#b2b2b2
editorHint.foreground#d73a49
editorInfo.foreground#d73a49
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#7f7f7f
editorSuggestWidget.background#fafafa
editorSuggestWidget.border#24292e
editorSuggestWidget.foreground#24292e
editorSuggestWidget.highlightForeground#24292e
editorSuggestWidget.selectedBackground#cccccc
editorWarning.foreground#d73a49
focusBorder#24292e
gitDecoration.addedResourceForeground#24292e
gitDecoration.conflictingResourceForeground#24292e
gitDecoration.deletedResourceForeground#24292e
gitDecoration.ignoredResourceForeground#24292e
gitDecoration.modifiedResourceForeground#24292e
gitDecoration.submoduleResourceForeground#24292e
gitDecoration.untrackedResourceForeground#24292e
list.activeSelectionBackground#b2b2b2
list.activeSelectionForeground#fafafa
list.inactiveSelectionBackground#b2b2b2
list.inactiveSelectionForeground#fafafa
sideBar.background#f5f5f5
sideBar.foreground#24292e
statusBar.background#f5f5f5
statusBar.debuggingBackground#f5f5f5
statusBar.debuggingForeground#24292e
statusBar.foreground#24292e
statusBar.noFolderBackground#f5f5f5
statusBar.noFolderForeground#24292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	—	bold
emphasis	—	bold
strong	—	bold
meta.diff.header	—	bold
comment	#6b6b6b	—
constant.language	—	bold
constant.numeric	—	bold
constant.regexp	—	bold
entity.name.tag	—	bold
entity.name.selector	—	bold
entity.other.attribute-name	—	bold
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	—	bold
invalid	—	bold
markup.underline	—	underline
markup.bold	—	bold
markup.heading	—	bold
markup.italic	—	italic
markup.inserted	—	bold
markup.deleted	—	bold
markup.changed	—	bold
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown	—	bold
markup.inline.raw	—	bold
meta.selector	—	bold
punctuation.definition.tag	—	bold
meta.preprocessor	—	bold
meta.preprocessor.string	—	bold
meta.preprocessor.numeric	—	bold
meta.structure.dictionary.key.python	—	bold
storage	—	bold
storage.type	—	bold
storage.modifier	—	bold
string	—	bold
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars	—	bold
string.regexp	—	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	—	bold
meta.template.expression	—	bold
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	—	bold
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	—	bold
support.type.property-name.json	—	bold
keyword	—	bold
keyword.control	—	bold
keyword.operator	—	bold
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python	—	bold
keyword.other.unit	—	bold
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	—	bold
support.function.git-rebase	—	bold
constant.sha.git-rebase	—	bold
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	—	bold
variable.language	—	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}!`;
}