Material Light Theme (And Dark)

Name: Material Light Theme (And Dark)
Author: Jonathan Durán

Publisher: Jonathan DuránThemes in package: 2

GitHub

Color themes

VS Code preview

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

Material Light Theme (And Dark) — Material Light

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.foreground#F5F5F5
activityBarBadge.background#0277BD
debugIcon.breakpointForeground#C0392B
editor.background#FAFAFA
editor.findMatchBackground#FFA00077
editor.findMatchHighlightBackground#FFA00033
editor.foreground#212121
editor.hoverHighlightBackground#01579B22
editor.lineHighlightBackground#01579B11
editor.selectionBackground#01579B22
editor.wordHighlightBackground#01579B11
editor.wordHighlightStrongBackground#01579B22
editorBracketMatch.background#01579B22
editorCursor.foreground#212121
editorGutter.addedBackground#2E7D3288
editorGutter.deletedBackground#C0392B88
editorGutter.modifiedBackground#1565C088
editorIndentGuide.activeBackground#BDBDBD
editorLineNumber.activeForeground#78909C
editorLineNumber.foreground#9E9E9E
editorOverviewRuler.addedForeground#2E7D3288
editorOverviewRuler.bracketMatchForeground#9C00B088
editorOverviewRuler.deletedForeground#C0392B88
editorOverviewRuler.modifiedForeground#1565C088
editorOverviewRuler.wordHighlightForeground#9C00B088
editorOverviewRuler.wordHighlightStrongForeground#9C00B0
editorWhitespace.foreground#E0E0E0
editorWidget.background#F5F5F5
editorWidget.border#E0E0E0
input.background#FAFAFA
input.border#E0E0E0
input.foreground#212121
list.activeSelectionBackground#039BE5
list.focusBackground#039BE522
list.hoverBackground#01579B11
list.inactiveSelectionBackground#01579B22
scrollbarSlider.background#21212121
sideBar.background#F5F5F5
sideBar.foreground#212121
statusBar.background#0277BD
statusBar.debuggingBackground#A8601A
statusBar.foreground#FAFAFA
tab.inactiveBackground#F5F5F5
terminal.ansiBlack#212121
terminal.ansiBlue#1565C0
terminal.ansiBrightBlack#212121
terminal.ansiBrightBlue#1565C0
terminal.ansiBrightCyan#00838f
terminal.ansiBrightGreen#2E7D32
terminal.ansiBrightMagenta#9C00B0
terminal.ansiBrightRed#C0392B
terminal.ansiBrightWhite#E0E0E0
terminal.ansiBrightYellow#A8601A
terminal.ansiCyan#00838f
terminal.ansiGreen#2E7D32
terminal.ansiMagenta#9C00B0
terminal.ansiRed#C0392B
terminal.ansiWhite#E0E0E0
terminal.ansiYellow#A8601A
terminal.foreground#212121
widget.shadow#E0E0E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp, keyword.operator.quantifier.regexp, punctuation.definition.template-expression, variable.interpolation.scss, support.constant.property-value, support.constant.color	#A8601A	—
variable, meta.template.expression, constant.language.pseudo, punctuation.separator.key-value, storage.modifier.import, new.expr entity.name.type.module, constant.other.php, support.variable	#212121	—
constant.language, constant.numeric, constant.other.color, variable.language	#C0392B	—
keyword, storage, entity.name.tag.reference, punctuation.separator.key-value, support.type.python	#9C00B0	—
entity.name.tag, entity.name.function, support.function, support.class.builtin, entity.name.type.class, new.expr entity.name.type, storage.type.java, punctuation.definition.tag, meta.function-call.generic	#1565C0	—
entity.other.attribute-name, meta.object-literal.key, variable.object.property, support.type.property-name.json, entity.name.tag.css, entity.name.tag.custom, variable.parameter.function-call	#2E7D32	—
comment, storage.type.class.jsdoc, variable.other.jsdoc, comment.block.documentation.phpdoc, string.quoted.docstring.multi	#9E9E9E	italic
meta.type.annotation, meta.return.type, keyword.operator.type.annotation, meta.type.parameters, storage.type.annotation	#78909C	—
markup.heading	#C0392B	bold
markup.raw, markup.inline.raw	#A8601A	—
markup.italic	—	italic
markup.bold, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	—	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}!`;
}