Light Modern. Black on White

Name: Light Modern. Black on White
Author: sabaken

Publisher: sabakenThemes in package: 2

Light Modern. Black text on White Background

GitHub

Color themes

VS Code preview

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

Light Modern. Black on White — Cursor Light. Black on White

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#f3f3f3
activityBar.border#14141413
activityBar.foreground#141414ad
activityBar.inactiveForeground#141414ad
activityBarBadge.background#206595
activityBarBadge.foreground#f3f3f3
badge.background#f3f3f3
badge.foreground#1414148d
breadcrumb.activeSelectionForeground#141414ad
breadcrumb.background#fcfcfc
breadcrumb.focusForeground#141414eb
breadcrumb.foreground#141414ad
breadcrumbPicker.background#f3f3f3
button.background#3c7cab
button.foreground#fcfcfc
button.hoverBackground#055180
button.secondaryBackground#1414141e
button.secondaryForeground#141414eb
button.secondaryHoverBackground#14141430
chart.axis#14141413
chart.guide#141414ad
chart.line#14141413
charts.blue#6299c3
charts.foreground#141414ad
charts.green#55a583
charts.lines#141414ad
charts.orange#db704b
charts.purple#9e94d5
charts.red#e75e78
charts.yellow#c08532
commandCenter.activeBackground#1414141e
commandCenter.activeBorder#1414141c
commandCenter.activeForeground#141414ad
commandCenter.background#14141411
commandCenter.border#14141413
commandCenter.debuggingBackground#1414141e
commandCenter.foreground#141414ad
commandCenter.inactiveBorder#14141413
commandCenter.inactiveForeground#1414147a
debugExceptionWidget.background#fcfcfc
debugExceptionWidget.border#f3f3f3
debugToolBar.background#f3f3f3
descriptionForeground#141414ad
diffEditor.insertedLineBackground#1f8a651f
diffEditor.insertedTextBackground#1f8a6524
diffEditor.removedLineBackground#cf2d5614
diffEditor.removedTextBackground#cf2d561f
diffEditor.unchangedCodeBackground#fcfcfc00
dropdown.background#fcfcfc
dropdown.border#14141413
dropdown.foreground#141414eb
editor.background#fafafa
editor.findMatchBackground#6f9ba65c
editor.findMatchHighlightBackground#6f9ba62e
editor.findRangeHighlightBackground#14141411
editor.foreground#141414eb
editor.hoverHighlightBackground#1414141e
editor.inactiveSelectionBackground#14141411
editor.lineHighlightBackground#ededed
editor.lineHighlightBorder#ededed
editor.rangeHighlightBackground#6f9ba629
editor.selectionBackground#1414141e
editor.selectionHighlightBackground#14141411
editor.snippetFinalTabstopHighlightBorder#1414141c
editor.snippetTabstopHighlightBackground#1414141e
editor.wordHighlightBackground#1414141e
editor.wordHighlightStrongBackground#1414140a
editorBracketHighlight.foreground1#055180
editorBracketHighlight.foreground2#3c7cab
editorBracketHighlight.foreground3#6299c3
editorBracketHighlight.foreground4#a02673
editorBracketHighlight.foreground5#d06ba6
editorBracketHighlight.foreground6#dea0c3
editorBracketHighlight.unexpectedBracket.foreground#cf2d56
editorBracketMatch.background#1414141e
editorBracketMatch.border#fcfcfc00
editorCodeLens.foreground#141414ad
editorCursor.foreground#141414eb
editorError.border#cf2d5600
editorError.foreground#cf2d56
editorGroup.border#14141413
editorGroup.dropBackground#14141411
editorGroup.emptyBackground#f3f3f3
editorGroupHeader.noTabsBackground#f3f3f3
editorGroupHeader.tabsBackground#f3f3f3
editorGroupHeader.tabsBorder#14141413
editorGutter.addedBackground#1f8a65
editorGutter.background#fcfcfc
editorGutter.deletedBackground#cf2d56
editorGutter.modifiedBackground#c08532
editorHoverWidget.background#fcfcfc
editorHoverWidget.border#1414141c
editorHoverWidget.foreground#141414eb
editorIndentGuide.activeBackground1#14141426
editorIndentGuide.background1#14141413
editorInlayHint.background#fcfcfc00
editorInlayHint.foreground#141414ad
editorInlayHint.parameterBackground#fcfcfc00
editorInlayHint.parameterForeground#1414147a
editorInlayHint.typeBackground#fcfcfc00
editorInlayHint.typeForeground#1414147a
editorLineNumber.activeForeground#141414ad
editorLineNumber.foreground#1414147a
editorLink.activeForeground#141414eb
editorMarkerNavigation.background#14141461
editorMarkerNavigationError.background#cf2d56c0
editorMarkerNavigationWarning.background#141414ad
editorOverviewRuler.border#fcfcfc00
editorRuler.foreground#14141426
editorStickyScroll.border#14141413
editorSuggestWidget.background#f3f3f3
editorSuggestWidget.border#14141413
editorSuggestWidget.foreground#141414ad
editorSuggestWidget.highlightForeground#141414eb
editorSuggestWidget.selectedBackground#14141411
editorUnnecessaryCode.opacity#0000007f
editorWarning.border#fcfcfc00
editorWarning.foreground#db704b
editorWhitespace.foreground#1414145e
editorWidget.background#f3f3f3
editorWidget.foreground#141414ad
editorWidget.resizeBorder#14141426
errorForeground#cf2d56
extensionButton.prominentBackground#14141411
extensionButton.prominentForeground#fcfcfc
extensionButton.prominentHoverBackground#1414141e
focusBorder#14141426
foreground#141414eb
git.blame.editorDecorationForeground#141414ad
gitDecoration.addedResourceForeground#1f8a65
gitDecoration.deletedResourceForeground#cf2d56
gitDecoration.ignoredResourceForeground#1414147a
gitDecoration.modifiedResourceForeground#c08532
gitDecoration.untrackedResourceForeground#4c7f8c
icon.foreground#1414145e
input.background#fcfcfc
input.border#14141426
input.foreground#141414eb
input.placeholderForeground#1414147a
inputOption.activeBackground#1414141e
inputOption.activeBorder#14141400
inputValidation.errorBackground#ffd0d6
inputValidation.errorBorder#e75e78
inputValidation.errorForeground#cf2d56
inputValidation.infoBackground#d2e1e5
inputValidation.infoBorder#6f9ba6
inputValidation.infoForeground#4c7f8c
inputValidation.warningBackground#f0dac1
inputValidation.warningBorder#c08532
inputValidation.warningForeground#a16900
list.activeSelectionBackground#14141411
list.activeSelectionForeground#141414eb
list.deemphasizedForeground#141414ad
list.dropBackground#14141411
list.errorForeground#cf2d56
list.focusBackground#1414141e
list.focusForeground#141414eb
list.highlightForeground#6f9ba6
list.hoverBackground#14141411
list.hoverForeground#141414eb
list.inactiveSelectionBackground#14141411
list.inactiveSelectionForeground#141414eb
list.invalidItemForeground#1414147a
list.warningForeground#c34a14
menu.background#f3f3f3
menu.foreground#141414ad
menu.separatorBackground#14141413
menubar.selectionBackground#14141411
merge.border#fcfcfc00
merge.currentContentBackground#9e94d55c
merge.currentHeaderBackground#9e94d57a
merge.incomingContentBackground#6f9ba65c
merge.incomingHeaderBackground#6f9ba67a
minimap.background#fcfcfc
minimap.errorHighlight#cf2d56
minimap.findMatchHighlight#6f9ba65c
minimap.foregroundOpacity#141414eb
minimap.selectionHighlight#14141411
minimap.selectionOccurrenceHighlight#14141411
minimap.warningHighlight#c08532
minimapGutter.addedBackground#96c2ac
minimapGutter.deletedBackground#ee9ba6
minimapGutter.modifiedBackground#c08532
minimapSlider.activeBackground#1414141e
minimapSlider.background#1414140a
minimapSlider.hoverBackground#14141411
notificationLink.foreground#6f9ba6
notifications.background#f3f3f3
notifications.border#14141413
notifications.foreground#141414eb
notificationsErrorIcon.foreground#cf2d56
notificationsInfoIcon.foreground#206595
notificationsWarningIcon.foreground#db704b
panel.background#f3f3f3
panel.border#14141413
panelStickyScroll.border#14141413
panelTitle.activeBorder#0b0b2d00
panelTitle.activeForeground#141414eb
panelTitle.inactiveForeground#141414ad
peekView.border#1414141c
peekViewEditor.background#f3f3f3
peekViewEditor.matchHighlightBackground#6f9ba62e
peekViewEditorGutter.background#f3f3f3
peekViewResult.background#f3f3f3
peekViewResult.fileForeground#141414eb
peekViewResult.lineForeground#14141461
peekViewResult.matchHighlightBackground#6f9ba62e
peekViewResult.selectionBackground#f3f3f3
peekViewResult.selectionForeground#141414eb
peekViewTitle.background#f3f3f3
peekViewTitleDescription.foreground#141414ad
peekViewTitleLabel.foreground#141414eb
pickerGroup.border#1414141c
pickerGroup.foreground#141414eb
progressBar.background#1f8a65
sash.hoverBorder#1414141c
scrollbar.shadow#14141411
scrollbarSlider.activeBackground#14141430
scrollbarSlider.background#1414141e
scrollbarSlider.hoverBackground#14141430
selection.background#14141411
sideBar.background#f3f3f3
sideBar.border#14141413
sideBar.foreground#141414ad
sideBarSectionHeader.background#f3f3f3
sideBarSectionHeader.foreground#141414ad
sideBarStickyScroll.border#14141413
sideBarTitle.foreground#141414ad
statusBar.background#f3f3f3
statusBar.border#14141413
statusBar.debuggingBackground#f3f3f3
statusBar.debuggingForeground#1414147a
statusBar.foreground#1414147a
statusBar.noFolderBackground#f3f3f3
statusBar.noFolderForeground#1414147a
statusBarItem.activeBackground#1414141e
statusBarItem.hoverBackground#14141411
statusBarItem.prominentBackground#14141411
statusBarItem.prominentHoverBackground#1414141e
statusBarItem.remoteBackground#f3f3f3
statusBarItem.remoteForeground#141414ad
tab.activeBackground#fcfcfc
tab.activeBorder#fcfcfc
tab.activeBorderTop#fcfcfc00
tab.activeForeground#141414eb
tab.border#1414141c
tab.hoverBackground#14141411
tab.inactiveBackground#f3f3f3
tab.inactiveForeground#141414ad
tab.unfocusedActiveBorder#fcfcfc
tab.unfocusedActiveForeground#141414ad
tab.unfocusedHoverBackground#14141400
tab.unfocusedHoverBorder#14141413
tab.unfocusedInactiveForeground#141414ad
terminal.ansiBlack#141414eb
terminal.ansiBlue#3c7cab
terminal.ansiBrightBlack#141414ad
terminal.ansiBrightBlue#6299c3
terminal.ansiBrightCyan#6f9ba6
terminal.ansiBrightGreen#55a583
terminal.ansiBrightMagenta#d06ba6
terminal.ansiBrightRed#e75e78
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#c08532
terminal.ansiCyan#4c7f8c
terminal.ansiGreen#1f8a65
terminal.ansiMagenta#b8448b
terminal.ansiRed#cf2d56
terminal.ansiWhite#fcfcfc
terminal.ansiYellow#a16900
terminal.background#f3f3f3
terminal.foreground#141414eb
terminal.selectionBackground#1414141e
terminalCursor.background#f3f3f3
terminalCursor.foreground#141414eb
terminalStickyScroll.border#14141413
textLink.activeForeground#3c7cab
textLink.foreground#3c7cab
textPreformat.foreground#6f9ba6
textSeparator.foreground#6f9ba6
titleBar.activeBackground#f3f3f3
titleBar.activeForeground#1414148d
titleBar.border#14141413
titleBar.inactiveBackground#f3f3f3
titleBar.inactiveForeground#1414145e
tree.inactiveIndentGuidesStroke#14141413
tree.indentGuidesStroke#14141426
walkThrough.embeddedEditorBackground#f3f3f3
widget.border#1414141c
widget.shadow#1414141e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

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