Simple light

Name: Simple light
Author: xseman

Publisher: xsemanThemes in package: 1

Simple light theme

Open in VS Code GitHub

VS Code preview

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

Simple light — Simple 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.activeBorder#005FB8
activityBar.background#F8F8F8
activityBar.border#C4C4C4
activityBar.foreground#1F1F1F
activityBar.inactiveForeground#616161
activityBarBadge.background#005FB8
activityBarBadge.foreground#FFFFFF
badge.background#CCCCCC
badge.foreground#3B3B3B
button.background#005FB8
button.border#0000001a
button.foreground#FFFFFF
button.hoverBackground#0258A8
button.secondaryBackground#E5E5E5
button.secondaryForeground#3B3B3B
button.secondaryHoverBackground#CCCCCC
button.secondaryHoverForeground#2D2D2D
chat.slashCommandBackground#D2ECFF
chat.slashCommandForeground#306CA2
checkbox.background#F8F8F8
checkbox.border#C4C4C4
descriptionForeground#3B3B3B
dropdown.background#FFFFFF
dropdown.border#C4C4C4
dropdown.foreground#3B3B3B
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#FFDD00
editor.findMatchHighlightBackground#FFDD0050
editor.foreground#2D2D2D
editor.inactiveSelectionBackground#E5EBF1
editor.selectionBackground#BED6ED
editor.selectionHighlightBackground#ADD6FF80
editorGroup.border#E5E5E5
editorGroupHeader.tabsBackground#F8F8F8
editorGroupHeader.tabsBorder#E5E5E5
editorGutter.addedBackground#2EA043
editorGutter.deletedBackground#F85149
editorGutter.modifiedBackground#005FB8
editorIndentGuide.background#D3D3D3
editorLineNumber.activeForeground#171184
editorLineNumber.foreground#6E7681
editorOverviewRuler.border#E5E5E5
editorSuggestWidget.background#F8F8F8
editorSuggestWidget.border#C4C4C4
editorSuggestWidget.foreground#2D2D2D
editorSuggestWidget.selectedBackground#E8E8E8
editorSuggestWidget.selectedForeground#000000
editorWidget.background#F8F8F8
editorWidget.border#C4C4C4
errorForeground#F85149
focusBorder#005FB8
foreground#3B3B3B
icon.foreground#3B3B3B
input.background#FFFFFF
input.border#C4C4C4
input.foreground#2D2D2D
input.placeholderForeground#868686
inputOption.activeBackground#BED6ED
inputOption.activeBorder#005FB8
inputOption.activeForeground#000000
keybindingLabel.foreground#3B3B3B
list.activeSelectionBackground#E8E8E8
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.errorForeground#C5000B
list.focusAndSelectionOutline#005FB8
list.focusBackground#E5E5E5
list.focusOutline#005FB8
list.hoverBackground#F2F2F2
list.inactiveSelectionBackground#F0F0F0
list.inactiveSelectionForeground#2D2D2D
list.warningForeground#9A5A00
menu.background#FFFFFF
menu.border#C4C4C4
menu.foreground#1F1F1F
menu.selectionBackground#E8E8E8
menu.selectionForeground#000000
menubar.selectionBackground#E8E8E8
menubar.selectionForeground#000000
notebook.cellBorderColor#E5E5E5
notebook.selectedCellBackground#C8DDF150
notificationCenter.border#808080
notificationCenterHeader.background#FFFFFF
notificationCenterHeader.foreground#000000
notifications.background#F8F8F8
notifications.border#808080
notifications.foreground#1F1F1F
notificationsErrorIcon.foreground#C5000B
notificationsInfoIcon.foreground#004B87
notificationsWarningIcon.foreground#9A5A00
notificationToast.border#808080
panel.background#FFFFFF
panel.border#C4C4C4
panelInput.border#E5E5E5
panelTitle.activeBorder#005FB8
panelTitle.activeForeground#3B3B3B
panelTitle.inactiveForeground#3B3B3B
peekViewEditor.matchHighlightBackground#BB800966
peekViewResult.background#FFFFFF
peekViewResult.matchHighlightBackground#BB800966
pickerGroup.border#E5E5E5
pickerGroup.foreground#8B949E
ports.iconRunningProcessForeground#369432
progressBar.background#005FB8
quickInput.background#F8F8F8
quickInput.foreground#3B3B3B
searchEditor.textInputBorder#C4C4C4
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#C4C4C4
settings.headerForeground#1F1F1F
settings.modifiedItemIndicator#BB800966
settings.numberInputBorder#C4C4C4
settings.textInputBorder#C4C4C4
sideBar.background#FFFFFF
sideBar.border#C4C4C4
sideBar.foreground#1F1F1F
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#E5E5E5
sideBarSectionHeader.foreground#3B3B3B
sideBarTitle.foreground#3B3B3B
statusBar.background#F8F8F8
statusBar.border#E5E5E5
statusBar.debuggingBackground#FD716C
statusBar.debuggingForeground#000000
statusBar.focusBorder#005FB8
statusBar.foreground#3B3B3B
statusBar.noFolderBackground#F8F8F8
statusBar.noFolderForeground#2D2D2D
statusBarItem.errorBackground#C72E0F
statusBarItem.focusBorder#005FB8
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#005FB8
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorder#F8F8F8
tab.activeBorderTop#005FB8
tab.activeForeground#3B3B3B
tab.border#E5E5E5
tab.hoverBackground#FFFFFF
tab.hoverForeground#2D2D2D
tab.inactiveBackground#F8F8F8
tab.inactiveForeground#868686
tab.unfocusedActiveBorder#F8F8F8
tab.unfocusedActiveBorderTop#E5E5E5
tab.unfocusedHoverBackground#F8F8F8
terminal.background#FFFFFF
terminal.foreground#000000
terminal.inactiveSelectionBackground#E5EBF1
terminal.tab.activeBorder#005FB8
terminalCursor.foreground#000000
textBlockQuote.background#F8F8F8
textBlockQuote.border#E5E5E5
textCodeBlock.background#F8F8F8
textLink.activeForeground#005FB8
textLink.foreground#005FB8
textSeparator.foreground#21262D
titleBar.activeBackground#F8F8F8
titleBar.activeForeground#1E1E1E
titleBar.border#E5E5E5
titleBar.inactiveBackground#F8F8F8
titleBar.inactiveForeground#8B949E
welcomePage.tileBackground#F3F3F3
widget.border#E5E5E5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.operator.list.shell	#000	bold
punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell	#000
meta.import	#000	bold
keyword.control.export, keyword.control.default	#000	bold
meta.scope.while-loop.shell	#09466E
string.interpolated.dollar.shell, punctuation.definition.variable.shell, variable.other.positional.shell	#000
support.function.builtin.shell	#09466E	bold
string.other.math.shell	#000	bold
punctuation.definition.string.begin.shell	#000
meta.scope.logical-expression.shell	#000
keyword.operator.logical.shell	#000	bold
keyword.operator.new	#777	bold
meta.brace.round, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.embedded.begin, punctuation.section.embedded.end	#000
keyword.control.conditional	#000
keyword.operator.assignment.compound, keyword.operator.arithmetic	#000	bold
keyword.operator.assignment.tsx	#000
constant.language.import-export-all	#09466E
meta.var.expr, meta.arrow, meta.block, meta.function	#09466E	—
meta.definition.variable, meta.var-single-variable.expr, meta.var.expr, variable.other.constant	#09466E
variable.language.this, variable.language.super	#000	bold
entity.other.attribute-name	#09466E
support.class.component	#000
entity.name.type.interface	#000
storage.type.class	#000	bold
storage.modifier	#000	bold
storage.type.tsx, storage.type.ts, storage.type.js, storage.type.jsx	#000	bold
meta.object-literal.key, meta.object-literal.key entity.name.function	#09466E	bold
keyword.control.trycatch	#862F95	bold
comment.block.documentation, comment.block.preprocessor, comment.documentation, comment, punctuation.definition.comment	#969696
keyword.control.as	#000
invalid.deprecated	—	—
invalid.illegal	#FF0000	—
keyword.operator.arithmetic, keyword.operator.assignment.compound, keyword.operator	#000
storage.type, support.type	#000
constant.language, support.constant, variable.language	#AB6526	—
string.quoted.single, string.quoted.double, string.template	#007744
storage.type.interface, meta.interface	#000	bold
storage.type.function	#000	bold
support.type.primitive.ts	#000	bold
constant.numeric.decimal	#9C6B00	bold
variable, support.variable, variable.other.object	#09466E
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.template.expression	#09466E
keyword.control.flow	#000	bold
entity.name.function, support.function	#000	—
entity.name.type, entity.other.inherited-class, support.class	#000	—
entity.name.exception	#660000	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#AB6526	—
string	#008800	bold
constant.character.escape	#777	—
string.regexp	#4B83CD	—
constant.other.symbol	#AB6526	—
punctuation	#777	—
string source, text source	#000	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#AAA	—
meta.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html	#2E2A2E	—
entity.name.tag	#1C4C8F	bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#0058D7	—
string.quoted.double.html	—
source.css	—
punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly	#000
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.name.tag.wildcard.css, punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.less, entity.name.tag.wildcard.less, punctuation.definition.entity.less, entity.other.attribute-name.pseudo-element.less	#000
meta.property-name.css, support.type.property-name.css	#09466E	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#448C27	—
keyword.other.important	—	bold
markup.changed	#000	—
markup.deleted	#000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000	—
meta.link	#2d69b6	—
markup.output, markup.raw	#777	—
markup.prompt	#777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#000	—
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	—
variable.language	#0042B6	bold
constant.language	#0042B6
support.type.property-name	#000
constant.numeric	#9C6B00	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}!`;
}