SFX Themes

Name: SFX Themes
Author: SFX

Publisher: SFXThemes in package: 1

GitHub

VS Code preview

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

SFX Themes — SFX Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00000000
activityBar.background#313335
activityBar.border#00000000
activityBar.foreground#c5c5c5
activityBar.inactiveForeground#c5c5c550
activityBarBadge.background#bbb529
activityBarBadge.foreground#313335
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#c5c5c5
breadcrumb.background#2b2b2b
breadcrumb.focusForeground#c5c5c5
breadcrumb.foreground#a9b7c6
button.background#bbb529
button.foreground#222222
button.hoverBackground#bbb529a1
button.secondaryBackground#313335
button.secondaryForeground#c5c5c5
button.secondaryHoverBackground#414345
checkbox.background#313335
checkbox.border#00000000
checkbox.foreground#c5c5c5
debugExceptionWidget.background#313335
debugExceptionWidget.border#00000000
debugToolBar.background#313335
debugToolBar.border#00000000
diffEditor.border#505050
diffEditor.insertedTextBackground#62975533
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#da493933
diffEditor.removedTextBorder#00000000
dropdown.background#313335
dropdown.border#00000000
dropdown.foreground#c5c5c5
editor.background#2b2b2b
editor.findMatchBackground#adf6ff26
editor.findMatchBorder#adf6ff52
editor.findMatchHighlightBackground#adf6ff26
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#add6ff0a
editor.findRangeHighlightBorder#00000000
editor.foldBackground#a4a3a326
editor.foreground#a9b7c6
editor.hoverHighlightBackground#adf6ff26
editor.inactiveSelectionBackground#add6ff0e
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#444444
editor.rangeHighlightBackground#add6ff26
editor.rangeHighlightBorder#00000000
editor.selectionBackground#add6ff26
editor.selectionHighlightBackground#adf6ff10
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#adf6ff10
editor.wordHighlightBorder#adf6ff26
editor.wordHighlightStrongBackground#adf6ff10
editor.wordHighlightStrongBorder#adf6ff26
editorBracketMatch.background#373737
editorBracketMatch.border#00000000
editorCodeLens.foreground#565c63
editorCursor.background#000000
editorCursor.foreground#ffffff
editorError.background#00000000
editorError.border#00000000
editorError.foreground#da4939
editorGroup.border#505050
editorGroup.emptyBackground#2b2b2b
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#313335
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#629755
editorGutter.background#2b2b2b
editorGutter.commentRangeForeground#777777
editorGutter.deletedBackground#da4939
editorGutter.foldingControlForeground#a4a3a3
editorGutter.modifiedBackground#bbb529
editorHoverWidget.background#27292a
editorHoverWidget.border#464646
editorHoverWidget.foreground#c5c5c5
editorIndentGuide.activeBackground#555555
editorIndentGuide.background#373737
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#789667
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#606366
editorLink.activeForeground#bbb529
editorMarkerNavigation.background#27292a
editorMarkerNavigationError.background#da4939
editorMarkerNavigationInfo.background#789667
editorMarkerNavigationWarning.background#bbb529
editorOverviewRuler.background#2b2b2b
editorOverviewRuler.border#00000000
editorRuler.foreground#464646
editorSuggestWidget.background#27292a
editorSuggestWidget.border#464646
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#bbb529
editorSuggestWidget.selectedBackground#bbb52930
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#bbb529
editorWhitespace.foreground#939393
editorWidget.background#313335
editorWidget.foreground#c5c5c5
editorWidget.resizeBorder#00000000
focusBorder#e2e22e
foreground#c5c5c5
gitDecoration.addedResourceForeground#629755
gitDecoration.conflictingResourceForeground#da4939
gitDecoration.deletedResourceForeground#da4939
gitDecoration.ignoredResourceForeground#c5c5c5ab
gitDecoration.modifiedResourceForeground#bbb529
gitDecoration.stageDeletedResourceForeground#da4939
gitDecoration.stageModifiedResourceForeground#bbb529
gitDecoration.submoduleResourceForeground#a9b7c6
gitDecoration.untrackedResourceForeground#789667
icon.foreground#c5c5c5
input.background#313335
input.border#00000000
input.foreground#c5c5c5
input.placeholderForeground#c5c5c560
inputOption.activeBackground#bbb52966
inputOption.activeBorder#00000000
inputOption.activeForeground#ffffff
list.activeSelectionBackground#ffffff1e
list.activeSelectionForeground#ffffff
list.dropBackground#313335
list.focusBackground#bbb52950
list.focusForeground#c5c5c5
list.highlightForeground#bbb529
list.hoverBackground#50505040
list.hoverForeground#cccccc
list.inactiveSelectionBackground#ffffff00
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#333333
listFilterWidget.noMatchesOutline#da4939
listFilterWidget.outline#00000000
menu.background#27292a
menu.border#00000000
menu.foreground#c5c5c5
menu.selectionBackground#bbb52940
menu.selectionBorder#00000000
menu.selectionForeground#a7a7a7
menu.separatorBackground#b5b5b5
menubar.selectionBackground#c5c5c520
menubar.selectionBorder#00000000
menubar.selectionForeground#c5c5c5
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#2b2b2b
minimap.errorHighlight#da4939
minimap.findMatchHighlight#adf6ff26
minimap.selectionHighlight#add6ff26
minimap.warningHighlight#bbb529
minimapGutter.addedBackground#629755
minimapGutter.deletedBackground#da4939
minimapGutter.modifiedBackground#bbb529
notificationCenter.border#00000000
notificationCenterHeader.background#27292a
notificationCenterHeader.foreground#c5c5c5
notifications.background#313335
notifications.border#00000000
notifications.foreground#c5c5c5
notificationsErrorIcon.foreground#da4939
notificationsInfoIcon.foreground#789667
notificationsWarningIcon.foreground#bbb529
notificationToast.border#00000000
panel.background#1e1e1e
panel.border#80808059
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#464646
peekViewEditor.background#27292a
peekViewEditor.matchHighlightBackground#bbb5293e
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#27292a
peekViewResult.background#313335
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#313335
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#00000000
pickerGroup.foreground#bbb529
progressBar.background#e2e22e
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#c5c5c574
scrollbarSlider.background#c5c5c530
scrollbarSlider.hoverBackground#c5c5c542
selection.background#5e5b0d
settings.focusedRowBackground#ffffff07
settings.headerForeground#c5c5c5
sideBar.background#27292a
sideBar.border#00000000
sideBar.dropBackground#313335
sideBar.foreground#a7a7a7
sideBarSectionHeader.background#313335
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#c5c5c5
sideBarTitle.foreground#c5c5c5af
statusBar.background#27292a
statusBar.border#00000000
statusBar.debuggingBackground#bbb529
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#222222
statusBar.foreground#c5c5c5
statusBar.noFolderBackground#313335
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#629755
statusBarItem.remoteForeground#ffffff
tab.activeBackground#2b2b2b
tab.activeBorder#00000000
tab.activeBorderTop#bbb529
tab.activeForeground#a9b7c6
tab.activeModifiedBorder#bbb529
tab.border#00000000
tab.hoverBackground#444444
tab.hoverBorder#00000000
tab.hoverForeground#c5c5c5
tab.inactiveBackground#313335
tab.inactiveForeground#c4c4c4
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#fafafa
terminal.ansiYellow#e5e510
terminal.border#80808059
terminal.foreground#bbbbbb
terminal.selectionBackground#ffffff40
terminalCursor.background#0087FF
terminalCursor.foreground#ffffff
textLink.activeForeground#bbb529a1
textLink.foreground#bbb529
titleBar.activeBackground#313335
titleBar.activeForeground#c5c5c550
titleBar.border#00000000
titleBar.inactiveBackground#27292a
titleBar.inactiveForeground#a7a7a750
tree.indentGuidesStroke#c5c5c550
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line	#777777	—
comment.block	#777777	italic
comment.block.documentation	#629755	—
constant	#CC7832	—
constant.numeric, keyword.other.unit.hexadecimal	#6696BD	—
constant.character	#CE7827	—
constant.regexp	#811F3F	—
constant.other, constant.rgb-value	#CC7832	bold
emphasis	—	italic
strong	—	bold
entity.name.function	#EBCB8B
entity.name.tag	#E8BF6A
entity.name	#C7AF3F	italic
entity.name.type.annotation, storage.type.annotation	#C7AF3F	italic bold
entity.name.type.class, entity.name.class, entity.other.attribute-name.class	#C7AF3F
entity.name.package, entity.name.type.package	#6A8759	italic
entity.other.attribute-name	#C16160
entity.name.selector	#C16160	italic
entity	#FFC662	italic
entity.name.variable	#A9B7C6
invalid	#CD3131
invalid.deprecated	#E6E649	bold
invalid.illegal	#CD3131	bold
keyword	#CC7832
keyword.operator.new	#CC7832	italic
keyword.control, keyword.operator	#CC7832	bold
keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.ternary, keyword.operator.closure	#A9B7C6
keyword.other	#CC7832	italic bold
variable.language.this	#FFC765	italic bold
variable	#a9b7c6
variable.language	#a9b7c6	italic
variable.other	#FFC765	italic
variable.name, support.type.property-name	#a9b7c6
variable.parameter	#A98AAB	—
storage.type.primitive	#A98AAB	italic
string, support.constant.property-value	#7D9869	—
punctuation.dot, punctuation.separator, punctuation.terminator, punctuation.definition.string	#a9b7c688	—
storage.modifier	#C16160	—

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