VSLook

Name: VSLook
Author: Augustin Joseph

Publisher: Augustin JosephThemes in package: 1

Easiest way to create vscode theme.

Open in VS Code GitHub

VS Code preview

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

VSLook — VSLook

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#0ea5e926
activityBar.activeBorder#0284c7
activityBar.activeFocusBorder#0284c7
activityBar.background#0f172a
activityBar.border#1e293b80
activityBar.dropBorder#38bdf8
activityBar.foreground#38bdf8
activityBar.inactiveForeground#475569
activityBarBadge.background#0284c7
activityBarBadge.foreground#bae6fd
badge.background#000000bf
badge.foreground#e2e8f0
breadcrumb.activeSelectionForeground#0ea5e9
breadcrumb.background#1e293b40
breadcrumb.focusForeground#38bdf8
breadcrumb.foreground#64748b
breadcrumbPicker.background#1e293b
button.background#0284c7
button.border#00000000
button.foreground#e0f2fe
button.hoverBackground#0ea5e9
button.secondaryBackground#0c4a6e40
button.secondaryForeground#0ea5e9
button.secondaryHoverBackground#0e598480
checkbox.background#00000000
checkbox.border#33415580
checkbox.foreground#e2e8f0
debugToolBar.background#1e293b
debugToolBar.border#33415580
diffEditor.border#1e293b80
diffEditor.diagonalFill#00000000
diffEditor.insertedTextBackground#05966940
diffEditor.insertedTextBorder#16a34a
diffEditor.removedTextBackground#e11d4840
diffEditorGutter.insertedLineBackground#10b98180
diffEditorGutter.removedLineBackground#f43f5e80
dropdown.background#00000000
dropdown.border#33415580
dropdown.foreground#e2e8f0
dropdown.listBackground#1e293b
editor.background#0f172a
editor.findMatchBackground#34d399
editor.findMatchHighlightBackground#064e3b
editor.foreground#ffffff
editor.hoverHighlightBackground#1e293b
editor.inactiveSelectionBackground#0ea5e926
editor.lineHighlightBackground#0ea5e90d
editor.lineHighlightBorder#00000000
editor.selectionBackground#0ea5e926
editor.selectionHighlightBackground#065f46
editor.wordHighlightBackground#1e293b
editor.wordHighlightStrongBackground#475569
editorBracketHighlight.foreground1#eab308
editorBracketHighlight.foreground2#ec4899
editorBracketHighlight.foreground3#f97316
editorBracketHighlight.foreground4#14b8a6
editorBracketHighlight.foreground5#3b82f6
editorBracketHighlight.foreground6#06b6d4
editorBracketMatch.background#0ea5e9bf
editorBracketMatch.border#00000000
editorCursor.foreground#0ea5e9
editorError.foreground#ef4444
editorGroup.border#1e293b80
editorGroup.dropBackground#1e293b40
editorGroup.emptyBackground#0f172a
editorGroupHeader.tabsBackground#1e293b40
editorGroupHeader.tabsBorder#1e293b80
editorGutter.addedBackground#059669
editorGutter.background#00000000
editorGutter.deletedBackground#e11d48
editorGutter.foldingControlForeground#475569
editorGutter.modifiedBackground#2563eb
editorHint.border#00000000
editorHint.foreground#475569
editorHoverWidget.border#33415580
editorHoverWidget.highlightForeground#0ea5e9
editorIndentGuide.activeBackground#334155bf
editorIndentGuide.background#1e293b80
editorInfo.foreground#0ea5e9
editorLightBulb.foreground#10b981
editorLineNumber.activeForeground#cbd5e1
editorLineNumber.foreground#334155
editorOverviewRuler.background#0f172a
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#0ea5e9bf
editorOverviewRuler.selectionHighlightForeground#065f46
editorOverviewRuler.wordHighlightForeground#1e293b
editorOverviewRuler.wordHighlightStrongForeground#475569
editorPane.background#1e293b26
editorSuggestWidget.background#1e293b
editorSuggestWidget.border#33415580
editorSuggestWidget.focusHighlightForeground#bae6fd
editorSuggestWidget.foreground#94a3b8
editorSuggestWidget.highlightForeground#e2e8f0
editorSuggestWidget.selectedBackground#0ea5e940
editorSuggestWidget.selectedForeground#38bdf8
editorSuggestWidget.selectedIconForeground#0284c7
editorUnnecessaryCode.border#00000000
editorWarning.foreground#eab308
editorWhitespace.foreground#00000000
editorWidget.background#1e293b
editorWidget.border#33415580
editorWidget.foreground#94a3b8
errorForeground#ef4444
extensionButton.prominentBackground#0ea5e9
extensionIcon.preReleaseForeground#db2777
extensionIcon.starForeground#ca8a04
extensionIcon.verifiedForeground#16a34a
focusBorder#00000000
foreground#64748b
gitDecoration.addedResourceForeground#059669
gitDecoration.conflictingResourceForeground#db2777
gitDecoration.deletedResourceForeground#e11d48
gitDecoration.ignoredResourceForeground#1e293b
gitDecoration.modifiedResourceForeground#2563eb
gitDecoration.renamedResourceForeground#4f46e5
gitDecoration.stageDeletedResourceForeground#9f1239
gitDecoration.stageModifiedResourceForeground#1e40af
gitDecoration.submoduleResourceForeground#60a5fa
gitDecoration.untrackedResourceForeground#ca8a04
icon.foreground#475569
input.background#00000000
input.border#33415580
input.foreground#e2e8f0
input.placeholderForeground#475569
inputOption.activeBackground#000000bf
inputOption.activeBorder#000000
inputOption.activeForeground#e2e8f0
inputOption.hoverBackground#00000080
inputValidation.errorBackground#ef4444
inputValidation.errorBorder#00000000
inputValidation.errorForeground#fee2e2
inputValidation.infoBackground#0ea5e9
inputValidation.infoBorder#00000000
inputValidation.infoForeground#e0f2fe
inputValidation.warningBackground#eab308
inputValidation.warningBorder#00000000
inputValidation.warningForeground#fef9c3
keybindingLabel.background#334155
keybindingLabel.border#47556940
keybindingLabel.bottomBorder#475569
keybindingLabel.foreground#94a3b8
keybindingTable.headerBackground#1e293b80
keybindingTable.rowsBackground#00000000
list.activeSelectionBackground#0284c726
list.activeSelectionForeground#0ea5e9
list.activeSelectionIconForeground#0369a1
list.dropBackground#1e293b80
list.errorForeground#ef4444
list.filterMatchBackground#064e3b
list.filterMatchBorder#00000000
list.focusBackground#3341554d
list.focusForeground#0ea5e9
list.focusHighlightForeground#bae6fd
list.highlightForeground#0ea5e9
list.hoverBackground#33415526
list.hoverForeground#e2e8f0
list.inactiveFocusBackground#3341554d
list.inactiveSelectionBackground#0284c726
list.inactiveSelectionForeground#0ea5e9
list.inactiveSelectionIconForeground#0369a1
list.invalidItemForeground#ef4444
list.warningForeground#eab308
listFilterWidget.background#1e293b
listFilterWidget.noMatchesOutline#b91c1c80
listFilterWidget.outline#33415580
menu.background#1e293b
menu.border#33415580
menu.separatorBackground#33415540
menubar.selectionBackground#33415540
menubar.selectionForeground#94a3b8
minimap.background#00000000
minimap.errorHighlight#ef4444
minimap.findMatchHighlight#34d399
minimap.selectionHighlight#0ea5e926
minimap.selectionOccurrenceHighlight#065f46
minimap.warningHighlight#eab308
minimapSlider.background#00000000
minimapSlider.hoverBackground#1e293b80
notificationCenter.border#33415580
notificationCenterHeader.background#1e293b
notificationCenterHeader.foreground#475569
notificationLink.foreground#0ea5e9
notifications.background#1e293b
notifications.border#33415540
notifications.foreground#cbd5e1
notificationsErrorIcon.foreground#dc2626
notificationsInfoIcon.foreground#0284c7
notificationsWarningIcon.foreground#ca8a04
notificationToast.border#33415580
panel.background#0f172a
panel.border#1e293b
panel.dropBorder#475569
panelTitle.activeBorder#0284c7
panelTitle.activeForeground#0ea5e9
panelTitle.inactiveForeground#334155
pickerGroup.border#1e293b
pickerGroup.foreground#0284c7
problemsErrorIcon.foreground#dc2626
problemsInfoIcon.foreground#0284c7
problemsWarningIcon.foreground#ca8a04
progressBar.background#0ea5e9
quickInput.background#1e293b
quickInput.foreground#94a3b8
quickInputList.focusBackground#0ea5e9
quickInputList.focusForeground#0f172a
quickInputList.focusIconForeground#1e293b
quickInputTitle.background#00000000
sash.hoverBorder#1e293b
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#334155bf
scrollbarSlider.background#33415540
scrollbarSlider.hoverBackground#33415580
selection.background#0ea5e940
settings.focusedRowBackground#1e293b80
settings.focusedRowBorder#1e293b80
settings.headerForeground#0284c7
settings.modifiedItemIndicator#075985
settings.rowHoverBackground#1e293b40
sideBar.background#0f172a
sideBar.border#1e293b80
sideBar.dropBackground#1e293b40
sideBar.foreground#94a3b8
sideBarSectionHeader.background#1e293b40
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#475569
sideBarTitle.foreground#334155
statusBar.background#1e293b
statusBar.border#00000000
statusBar.debuggingBackground#0c4a6e
statusBar.debuggingForeground#0ea5e9
statusBar.foreground#64748b
statusBar.noFolderBackground#1e293b
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#64748b
statusBarItem.activeBackground#0f172a
statusBarItem.errorBackground#00000000
statusBarItem.errorForeground#ef4444
statusBarItem.hoverBackground#0f172a
statusBarItem.prominentBackground#00000000
statusBarItem.prominentForeground#e2e8f0
statusBarItem.prominentHoverBackground#00000000
statusBarItem.remoteBackground#00000000
statusBarItem.remoteForeground#0ea5e9
statusBarItem.warningBackground#00000000
statusBarItem.warningForeground#eab308
symbolIcon.arrayForeground#fbbf24
symbolIcon.booleanForeground#fbbf24
symbolIcon.classForeground#f472b6
symbolIcon.colorForeground#34d399
symbolIcon.constantForeground#fbbf24
symbolIcon.constructorForeground#60a5fa
symbolIcon.enumeratorForeground#2dd4bf
symbolIcon.enumeratorMemberForeground#38bdf8
symbolIcon.eventForeground#60a5fa
symbolIcon.fieldForeground#22d3ee
symbolIcon.fileForeground#ffffff
symbolIcon.folderForeground#ffffff
symbolIcon.functionForeground#60a5fa
symbolIcon.interfaceForeground#2dd4bf
symbolIcon.keyForeground#ffffff
symbolIcon.keywordForeground#e879f9
symbolIcon.methodForeground#60a5fa
symbolIcon.moduleForeground#fbbf24
symbolIcon.namespaceForeground#e879f9
symbolIcon.nullForeground#fbbf24
symbolIcon.numberForeground#fb923c
symbolIcon.objectForeground#111827
symbolIcon.operatorForeground#ffffff
symbolIcon.packageForeground#22c55e
symbolIcon.propertyForeground#38bdf8
symbolIcon.referenceForeground#eab308
symbolIcon.snippetForeground#ec4899
symbolIcon.stringForeground#34d399
symbolIcon.structForeground#f472b6
symbolIcon.textForeground#34d399
symbolIcon.typeParameterForeground#38bdf8
symbolIcon.unitForeground#f472b6
symbolIcon.variableForeground#38bdf8
tab.activeBackground#00000000
tab.activeBorder#0ea5e9
tab.activeBorderTop#00000000
tab.activeForeground#0ea5e9
tab.border#00000000
tab.hoverBackground#1e293b40
tab.hoverForeground#38bdf8
tab.inactiveBackground#00000000
tab.inactiveForeground#94a3b8
tab.unfocusedActiveBackground#00000000
tab.unfocusedActiveBorder#0ea5e9
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#0ea5e9
tab.unfocusedHoverBackground#1e293b40
tab.unfocusedHoverForeground#38bdf8
tab.unfocusedInactiveBackground#00000000
tab.unfocusedInactiveForeground#94a3b8
terminal.ansiBlack#334155
terminal.ansiBlue#2563eb
terminal.ansiBrightBlack#1e293b
terminal.ansiBrightBlue#0ea5e9
terminal.ansiBrightCyan#22d3ee
terminal.ansiBrightGreen#34d399
terminal.ansiBrightMagenta#e879f9
terminal.ansiBrightRed#fb7185
terminal.ansiBrightWhite#e2e8f0
terminal.ansiBrightYellow#fbbf24
terminal.ansiCyan#0891b2
terminal.ansiGreen#059669
terminal.ansiMagenta#c026d3
terminal.ansiRed#e11d48
terminal.ansiWhite#94a3b8
terminal.ansiYellow#d97706
terminal.background#0f172a
terminal.border#1e293b
terminal.dropBackground#1e293b40
terminal.foreground#f1f5f9
terminal.selectionBackground#1e293bbf
terminalCursor.foreground#38bdf8
textBlockQuote.background#00000040
textBlockQuote.border#0ea5e9
textLink.activeForeground#0284c7
textLink.foreground#38bdf8
textPreformat.foreground#f97316
titleBar.activeBackground#0f172a
titleBar.activeForeground#334155
titleBar.border#1e293b
titleBar.inactiveBackground#0f172a
titleBar.inactiveForeground#334155
toolbar.activeBackground#334155bf
toolbar.hoverBackground#33415540
tree.indentGuidesStroke#47556926
welcomePage.background#18181b
welcomePage.progress.background#334155
welcomePage.progress.foreground#38bdf8
welcomePage.tileBackground#1e293b40
welcomePage.tileHoverBackground#1e293bbf
welcomePage.tileShadow#00000000
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable	#38bdf8	—
meta.object.member, support.type.property-name	#0ea5e9	—
variable.parameter	—	italic
constant	#f97316	—
string	#10b981	—
constant.character.escape	#047857	—
constant.other.color	#10b981	—
constant.language	#facc15	—
entity.name.type, support.type	#2dd4bf
entity.name.type.enum	#2dd4bf	—
meta.type	—
entity.name.function, support.function	#2563eb	—
entity.name.tag	#22d3ee	—
entity.other.attribute-name	#db2777	—
meta.import	—
keyword	#d946ef	—
entity.name.type.class, support.class	#ec4899	—
keyword.operator.new	#1e40af	—
keyword.operator	#a5f3fc	—
keyword.operator.assignment	#a5f3fc	—
storage.type	#d946ef	—
punctuation.definition.string	#064e3b	—
punctuation.definition.tag	#164e63	—
entity.name.type.interface	#2dd4bf	—
comment, punctuation.definition.comment	#334155	italic
storage.modifier	#d946ef	—
punctuation.separator	#475569	—
punctuation.accessor	#475569	—
punctuation.terminator	#475569	—
meta.var	—
variable.language	—	underline
entity.other.inherited-class	#f472b6	—

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