Whyte

Name: Whyte
Author: Ihar Trafimovich

Publisher: Ihar TrafimovichThemes in package: 1

Color theme for VS Code that I like

GitHub

VS Code preview

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

Whyte — Whyte

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#ffffff
activityBar.border#00000000
activityBar.dropBackground#2f67ff33
activityBar.foreground#000000
activityBarBadge.background#2f67ff
activityBarBadge.foreground#ffffff
badge.background#2f67ff
badge.foreground#ffffff
button.background#2f67ff
button.foreground#ffffff
button.hoverBackground#295ae0
debugExceptionWidget.background#eaefff
debugExceptionWidget.border#db0042
debugToolBar.background#eaefff
dropdown.background#ffffff
dropdown.border#ffffff
dropdown.foreground#000000
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#e100b844
editor.findMatchHighlightBackground#e100b822
editor.findRangeHighlightBackground#e100b822
editor.foreground#000000
editor.hoverHighlightBackground#fff4c5
editor.inactiveSelectionBackground#ffdf53
editor.lineHighlightBackground#fff4c5
editor.lineHighlightBorder#fff4c5
editor.rangeHighlightBackground#fff4c5
editor.selectionBackground#ffdf53
editor.selectionHighlightBackground#fff4c5
editor.selectionHighlightBorder#fff4c5
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#2f67ff66
editor.wordHighlightStrongBackground#00000000
editor.wordHighlightStrongBorder#2f67ff
editorCursor.foreground#2f67ff
editorGroup.border#00000011
editorGroup.dropBackground#2f67ff33
editorGroupHeader.tabsBackground#ffffff
editorHoverWidget.background#eaefff
editorHoverWidget.border#2f67ff33
editorIndentGuide.activeBackground#2f67ff66
editorIndentGuide.background#00000011
editorLineNumber.activeForeground#2f67ff
editorLineNumber.foreground#00000022
editorLink.activeForeground#2f67ff
editorOverviewRuler.border#00000000
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#00000022
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#2f67ff
editorSuggestWidget.selectedBackground#2f67ff33
editorWhitespace.foreground#00000011
editorWidget.background#eaefff
editorWidget.border#2f67ff33
extensionButton.prominentBackground#2f67ff
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#295ae0
focusBorder#2f67ff66
foreground#000000
input.background#ffffff
input.border#00000011
input.foreground#000000
input.placeholderForeground#00000033
inputOption.activeBorder#2f67ff66
list.activeSelectionBackground#2f67ff
list.activeSelectionForeground#ffffff
list.focusBackground#2f67ff
list.focusForeground#ffffff
list.highlightForeground#000000
list.hoverBackground#2f67ff33
list.hoverForeground#000000
list.inactiveSelectionBackground#2f67ff33
panel.background#eaefff
panel.border#2f67ff22
panel.dropBackground#2f67ff33
panelTitle.activeBorder#2f67ff
panelTitle.activeForeground#2f67ff
panelTitle.inactiveForeground#00000099
peekView.border#2f67ff22
peekViewEditor.background#eaefff
peekViewEditor.matchHighlightBackground#ffdf5366
peekViewResult.background#eaefff
peekViewTitle.background#eaefff
pickerGroup.border#2f67ff22
pickerGroup.foreground#2f67ff99
progressBar.background#2f67ff
scrollbar.shadow#00000011
scrollbarSlider.activeBackground#00000011
scrollbarSlider.background#00000011
scrollbarSlider.hoverBackground#00000022
selection.background#2f67ff33
sideBar.background#ffffff
sideBar.border#ffffff
sideBar.dropBackground#2f67ff33
sideBar.foreground#000000
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#ffffff
statusBar.debuggingBackground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#ffffff
statusBarItem.activeBackground#2f67ff33
statusBarItem.hoverBackground#2f67ff33
statusBarItem.prominentBackground#ffffff
statusBarItem.prominentHoverBackground#2f67ff
tab.activeBackground#ffffff
tab.activeBorder#2f67ff
tab.activeBorderTop#ffffff
tab.activeForeground#2f67ff
tab.border#ffffff00
tab.hoverBackground#ffffff
tab.hoverBorder#ffffff
tab.inactiveBackground#ffffff33
tab.inactiveForeground#00000099
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#586e75
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#93a1a1
terminal.ansiBrightGreen#586e75
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#eee8d5
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5
terminal.ansiYellow#b58900
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#ffffff
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#00000066
widget.shadow#00000011

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	#657B83	—
string.regexp	#D30102	—
entity.name.class	#268BD2	—
punctuation.definition.variable	#859900	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#D30102	—
meta.preprocessor	#B58900	—
support.function.construct, keyword.other.new	#D30102	—
constant.other	#CB4B16	—
entity.other.inherited-class	—	—
variable.parameter	—	—
punctuation.separator.continuation	#D30102	—
support.type	#859900	—
support.type.exception	#CB4B16	—
invalid	—	—
meta.diff, meta.diff.header	#E0EDDD	italic
markup.deleted	#dc322f
markup.changed	#cb4b16
markup.inserted	#219186	—
markup.quote	#859900	—
markup.inline.raw	#2AA198
token.info-token	#316bcd	—
token.warn-token	#cd9731	—
token.error-token	#cd3131	—
token.debug-token	#800080	—
entity.name.tag, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, support.class.component	#f17a0b
punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.separator.comma, punctuation.terminator.statement, punctuation.separator.parameter, meta.brace.round, meta.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.binding-pattern.object, punctuation.separator.key-value, meta.class, punctuation.accessor, punctuation.destructuring, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.separator.dictionary.pair.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.jsonc, punctuation.separator.array.jsonc, punctuation.separator.dictionary.pair.jsonc, punctuation.support.type.property-name.begin.jsonc, punctuation.support.type.property-name.end.jsonc	#434d6852
punctuation.definition.block	—	—
meta.brace.square, meta.objectliteral, punctuation.definition.binding-pattern.object	#000000
support.function, entity.name.function, storage.type.function.arrow	#0087D1
variable.other, support.class, variable.parameter, variable.object.property, entity.other.inherited-class, support.variable.property.dom	#ac3059
support.constant, constant.language, variable.language, entity.name.type, support.variable.dom, support.class.console, support.type.object.module	#BD8E00
variable.other.readwrite	—	—
constant.numeric, keyword.operator.relational, keyword.operator.arithmetic, meta.delimiter.decimal.period	#9125da
string, punctuation.definition.string.begin, punctuation.definition.string.end, string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.begin.jsonc, punctuation.definition.string.end.jsonc	#599c3a
entity.other.attribute-name, variable, support, storage, meta, keyword, entity, constant, emphasis, meta.tag, entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml, support.type.property-name.json, support.type.property-name.jsonc, support.type.property-name.css, support.type.vendored.property-name.css, storage.type.class, keyword.operator.logical, keyword.operator.assignment	#000000
entity.name.section.markdown, markup.heading, markup.bold	#000000	bold
punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, beginning.punctuation.definition.list.markdown, meta.separator.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, markup.heading.setext, beginning.punctuation.definition.quote.markdown	#00000044
markup.list	#000000
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown	#599c3a
markup.italic, string.other.link.description.markdown	#000000	italic
markup.underline.link.markdown, string.other.link.description.markdown, string.other.link.title.markdown, markup.underline.link.image.markdown	#295AE0	underline
constant.character	#f17a0b	—
variable.object.property	#000000
keyword.operator.type.annotation, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, keyword.operator.type	#434d6852
support.type.primitive, comment	#37857b98
support.type.builtin.ts	#BD8E00

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