Astigmatism Theme

Name: Astigmatism Theme
Author: GabrielFacioni

Publisher: GabrielFacioniThemes in package: 1

A personalized theme for people with astigmatism.

GitHub

VS Code preview

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

Astigmatism Theme — Astigmatism Theme

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.

actionBar.toggledBackground#1A202E
activityBar.activeBorder#dbd5c0
activityBar.background#141924
activityBar.foreground#dbd5c0
activityBarBadge.background#975a92
activityBarBadge.foreground#dbd5c0
banner.background#20283a
breadcrumb.activeSelectionForeground#1A202E
breadcrumb.background#1A202E
breadcrumb.foreground#dbd5c0
button.background#141924
button.border#262f42
button.foreground#dbd5c0
button.hoverBackground#20283a
button.secondaryBackground#141924
button.secondaryForeground#dbd5c0
button.secondaryHoverBackground#20283a
checkbox.background#20283a
checkbox.foreground#dbd5c0
commandCenter.activeBackground#20283a
commandCenter.background#20283a
commandCenter.border#20283a
commandCenter.inactiveBorder#20283a
dropdown.background#1A202E
dropdown.border#1A202E
dropdown.foreground#dbd5c0
dropdown.listBackground#1A202E
editor.background#20283a
editor.findMatchBackground#975a92
editor.findMatchForeground#dbd5c0f6
editor.findMatchHighlightBackground#333b50f3
editor.findMatchHighlightForeground#dbd5c0f6
editor.foreground#dbd5c0
editor.lineHighlightBackground#1A202E
editor.linkedEditingBackground#1A202E
editor.selectionBackground#333b50
editor.selectionHighlightBackground#333b50fb
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#333b507c
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#333b50fb
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#758DC4
editorBracketHighlight.foreground2#975A92
editorBracketHighlight.foreground3#7C9782
editorBracketHighlight.foreground4#AC6F3A
editorBracketHighlight.foreground5#BF616A
editorBracketHighlight.foreground6#D2BF61
editorBracketHighlight.unexpectedBracket.foreground#BF616A
editorBracketPairGuide.activeBackground1#758DC420
editorBracketPairGuide.activeBackground2#975A9220
editorBracketPairGuide.background1#758DC410
editorBracketPairGuide.background2#975A9210
editorCursor.foreground#dbd5c0
editorGroupHeader.border#1A202E
editorGroupHeader.noTabsBackground#1A202E
editorGroupHeader.tabsBackground#1A202E
editorGutter.addedBackground#78b37b
editorGutter.deletedBackground#ce4d4d
editorGutter.modifiedBackground#758DC4
editorHoverWidget.background#1A202E
editorHoverWidget.border#1A202E
editorHoverWidget.foreground#dbd5c0
editorIndentGuide.activeBackground1#333b50
editorIndentGuide.activeBackground2#333b50
editorIndentGuide.activeBackground3#333b50
editorIndentGuide.activeBackground4#333b50
editorIndentGuide.activeBackground5#333b50
editorIndentGuide.activeBackground6#333b50
editorIndentGuide.background1#333b50
editorIndentGuide.background2#333b50
editorIndentGuide.background3#333b50
editorIndentGuide.background4#333b50
editorIndentGuide.background5#333b50
editorIndentGuide.background6#333b50
editorLink.activeForeground#dbd5c0
editorOverviewRuler.findMatchForeground#dbd5c0f6
editorOverviewRuler.wordHighlightForeground#dbd5c0f6
editorRuler.foreground#333b50f3
editorSuggestWidget.background#1A202E
editorSuggestWidget.border#333b50
editorSuggestWidget.foreground#dbd5c0
editorSuggestWidget.highlightForeground#758DC4
editorSuggestWidget.selectedBackground#333b50
editorSuggestWidget.selectedForeground#dbd5c0
editorSuggestWidgetStatus.foreground#5F6675
editorWidget.background#1A202E
editorWidget.border#333b50
editorWidget.foreground#dbd5c0
focusBorder#00000000
icon.foreground#dbd5c0
input.background#20283a
input.border#20283a
input.foreground#dbd5c0
keybindingLabel.background#1A202E
list.activeSelectionBackground#333b50
list.activeSelectionForeground#dbd5c0
list.deemphasizedForeground#5F6675
list.dropBackground#333b5055
list.errorForeground#ce4d4d
list.focusBackground#333b50
list.focusForeground#dbd5c0
list.highlightForeground#758DC4
list.hoverBackground#333b50
list.hoverForeground#dbd5c0
list.inactiveSelectionBackground#333b50
list.inactiveSelectionForeground#dbd5c0
list.warningForeground#cea54d
listFilterWidget.background#1A202E
listFilterWidget.noMatchesOutline#BF616A
listFilterWidget.shadow#1A202E
menu.background#20283a
menu.border#20283a
menu.foreground#dbd5c0
menu.selectionBackground#1A202E
menu.selectionBorder#1A202E
menu.selectionForeground#dbd5c0
menu.separatorBackground#141924
menubar.selectionForeground#dbd5c0
notebookScrollbarSlider.activeBackground#333b50
notebookScrollbarSlider.background#333b50
notificationCenterHeader.background#1A202E
notifications.background#1A202E
notifications.foreground#dbd5c0
notificationsErrorIcon.foreground#ce4d4d
notificationsInfoIcon.foreground#758DC4
notificationsWarningIcon.foreground#cea54d
notificationToast.border#262f42
panel.background#1A202E
panel.border#1A202E
panel.dropBorder#1A202E
panelInput.border#1A202E
panelSection.border#1A202E
panelSection.dropBackground#1A202E
panelSectionHeader.background#1A202E
panelSectionHeader.border#1A202E
panelStickyScroll.background#1A202E
panelStickyScroll.border#1A202E
panelStickyScroll.shadow#1A202E
panelTitle.activeBorder#1A202E
panelTitle.border#1A202E
problemsErrorIcon.foreground#ce514d
problemsInfoIcon.foreground#1A202E
problemsWarningIcon.foreground#cea54d
quickInput.background#1A202E
quickInput.foreground#dbd5c0
quickInputList.focusBackground#333b50
quickInputList.focusForeground#dbd5c0
quickInputList.focusIconForeground#dbd5c0
scrollbarSlider.activeBackground#333b50
scrollbarSlider.background#333b50
scrollbarSlider.hoverBackground#333b50
search.resultsInfoForeground#dbd5c0
searchEditor.findMatchBackground#dbd5c0
searchEditor.findMatchBorder#dbd5c0
searchEditor.textInputBorder#dbd5c0
settings.dropdownBackground#1A202E
sideBar.background#1A202E
sideBar.border#1A202E
sideBar.dropBackground#1A202E
sideBar.foreground#a8aebb
sideBarSectionHeader.background#1A202E
sideBarSectionHeader.foreground#a8aebb
sideBarStickyScroll.background#1A202E
sideBarStickyScroll.border#dbd5c0
sideBarStickyScroll.shadow#1A202E
statusBar.background#1A202E
statusBar.debuggingBackground#975a92
statusBar.debuggingForeground#dbd5c0
statusBar.focusBorder#1A202E
statusBar.foreground#dbd5c0
statusBar.noFolderBackground#1A202E
statusBarItem.errorBackground#ce4d4d
statusBarItem.errorForeground#dbd5c0
statusBarItem.errorHoverBackground#ce4d4d
statusBarItem.remoteBackground#1A202E
statusBarItem.remoteForeground#dbd5c0
statusBarItem.warningBackground#cea54d
statusBarItem.warningForeground#2E3440
tab.activeBackground#333b50
tab.activeBorderTop#333b50
tab.activeForeground#dbd5c0
tab.border#1A202E
tab.hoverBackground#333b50
tab.hoverForeground#dbd5c0
tab.inactiveBackground#1A202E
tab.inactiveForeground#a8aebb
tab.unfocusedActiveBackground#141924
terminal.ansiBlack#242424
terminal.ansiBlue#0054d1
terminal.ansiBrightBlack#242424
terminal.ansiBrightBlue#0054d1
terminal.ansiBrightCyan#29c5bd
terminal.ansiBrightGreen#78b37b
terminal.ansiBrightMagenta#a16fc2
terminal.ansiBrightRed#df3e3e
terminal.ansiBrightWhite#fdd8d8
terminal.ansiBrightYellow#D2BF61
terminal.ansiCyan#29c5bd
terminal.ansiGreen#78b37b
terminal.ansiMagenta#a16fc2
terminal.ansiRed#df3e3e
terminal.ansiWhite#fdd8d8
terminal.ansiYellow#D2BF61
terminal.background#20283a
terminal.border#20283a
terminal.dropBackground#20283af8
terminal.foreground#7a86b8
terminal.hoverHighlightBackground#20283a
terminal.initialHintForeground#dbd5c0
terminal.selectionBackground#333b50
terminal.tab.activeBorder#20283a
textLink.activeForeground#dbd5c0
textLink.foreground#758DC4
textPreformat.foreground#758DC4
tree.indentGuidesStroke#5F6675
tree.tableColumnsBorder#333b50
tree.tableOddRowsBackground#1A202E
welcomePage.progress.foreground#975a92
welcomePage.tileBackground#1A202E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.other.use, keyword.other.function.use, constant.language, keyword.other.namespace, entity.name.function, keyword.control.import, keyword.control.from, entity.name.tag, entity.other.attribute-name	#758DC4	—
storage.modifier, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.js, support.type.primitive.tsx, entity.name.type.tsx, keyword.operator.logical, constant.language.boolean.false, constant.language.boolean.true, entity.name.section.markdown, punctuation.definition.heading.markdown, markup.bold.markdown, punctuation.definition.list.begin.markdown, constant.language	#758DC4	bold
storage.type.class, storage.modifier.extends, storage.modifier.implements, support.function, storage.type.interface, storage.type.type, storage.type.tsx, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end	#758DC4	italic
variable.other.php string, variable.other.js string, variable.other.property.php, variable.other.property.js, variable.other.constant.js, variable.other.constant.tsx, variable.object.property.tsx, variable.parameter.tsx, variable.other, keyword.other.class	#7C9782	—
variable.language.this.php, storage.type.php, variable.parameter	#65779e	italic
keyword.operator.assignment.php	#FFDFC4	—
support.class, entity.name.type.tsx	#c28b6f	bold
keyword.other.type.php, variable.other.readwrite	#758DC4	bold
punctuation.definition.variable.php	#A2653E	—
entity.name.type.namespace	#758DC4	—
entity.name.type.class, entity.other.inherited-class, keyword.control.return, keyword.control.flow, entity.name.type.alias, entity.name.type.interface, constant.numeric, keyword.operator.new, keyword.operator.ternary, keyword.other.new, keyword.control.break, keyword.control.continue, keyword.operator.null-coalescing.php	#975a92	bold
storage.type	#975a92	italic
keyword.control.trycatch, keyword.control.switch, keyword.control.conditional, keyword.control.loop, keyword.control.foreach, keyword.control.exception, keyword.control.export, keyword.control.default	#975A92	—
keyword.operator.class, keyword.operator.class.static, punctuation.definition.variable, support.other.namespace	#C0BDB0	—
punctuation.definition.parameters.begin.bracket.round, punctuation.definition.parameters.end.bracket.round, punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, keyword.operator.return-value, meta.method-call, punctuation.definition.class.begin.bracket.curly, punctuation.definition.class.end.bracket.curly, punctuation.section.array.begin, punctuation.section.array.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.terminator.expression, keyword.operator.null-coalescing, punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round, punctuation.definition.switch-expression.begin.bracket.round, punctuation.definition.switch-expression.end.bracket.round, punctuation.definition.section.switch-block.end.bracket.curly, punctuation.definition.section.switch-block.begin.bracket.curly, punctuation.definition.block, unctuation.definition.section.switch-block.begin.bracket.curly, keyword.operator.assignment.php, keyword.operator.comparison.php, keyword.operator.arithmetic, keyword.operator.assignment, punctuation.separator.parameter, meta.brace.round, punctuation.definition.block, meta.brace.square, punctuation.terminator.statement, punctuation.definition.block, storage.type.function.arrow.tsx, punctuation.definition.parameters.begin, punctuation.definition.binding-pattern.object, punctuation.definition.parameters.end, punctuation.definition.markdown, fenced_code.block.language.markdown, keyword.operator.comparison, punctuation.separator.comma, punctuation.accessor, punctuation.separator.delimiter, keyword.operator.type.annotation, keyword.operator.type.tsx, punctuation.definition.typeparameters, punctuation.definition.binding-pattern.array, meta.object.member.js, punctuation.separator.key-value.js	#586a96	—
support.type.property-name.json, meta.object-literal.key.tsx, meta.object-literal.key.jsx, variable.other.object.js, meta.object-literal.key.js, support.type.object.module.js	#7c9782	—
comment, comment.block.documentation.php	#5F6675	—
variable.other.object, constant.other, meta.jsx.children, entity.name.goto-label.php, keyword.operator.error-control.php	#c0bdb0	—
text.html.laravel-blade	#E0F2F1	—
keyword.control.endif.php, keyword.control.endforeach.php, keyword.control.if.php, keyword.control.else.php, keyword.control.for.php, keyword.control.endfor.php, keyword.control.while.php, keyword.control.do.php, keyword.control.endwhile.php	#975A92	—
entity.name.tag.html, entity.name.tag.inline.html, entity.name.tag.block.html, entity.name.tag.structure.html, text.html.php meta.tag.block.any.html, text.html.php entity.name.tag.block.html, text.html.php meta.tag.inline.any.html, text.html.php entity.name.tag.inline.html	#758DC4	bold
entity.other.attribute-name.html, entity.other.attribute-name, entity.other.attribute-name.html.angular, entity.other.attribute-name.html.vue, entity.other.attribute-name.html.react	#7c9782	italic
entity.other.attribute-name.event.html, entity.other.attribute-name.style.html, entity.other.attribute-name.src.html, entity.other.attribute-name.href.html	#AC6F3A	—
string.quoted.html, string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.html, string.quoted.single.tsx, string.quoted.double.tsx, string.quoted.tsx, string.template.tsx, string.quoted.single, string.quoted.double, string.heredoc, string.nowdoc, punctuation.definition.string.template.begin.js, string.template.js	#c09c8e	—
meta.tag.special.html, meta.tag.preprocessor.html, comment.block.html	#5F6675	—
entity.name.tag.custom.html, entity.name.tag.unknown.html	#975a92	underline
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, keyword.control.at-rule.media	#c5b764	bold
support.type.property-name.css	#7c9782	italic
support.constant.property-value.css, constant.other.color.rgb-value.css, constant.numeric.css, variable.css, keyword.other.unit, variable.argument, variable.parameter.keyframe-list	#758DC4	—
keyword.other.unit.css	#c09c8e	—
support.function.misc.css, support.function.color.css, support.function.transform.css	#975a92	—
keyword.control.at-rule.css, keyword.control.at-rule.include.css	#BF616A	bold
variable.other.custom-property.css, variable.other.readwrite.css	#D2BF61	—
keyword.other.important.css, keyword.other.inherit.css	#BF616A	bold
entity.name.tag.scss, variable.other.namespace.scss, keyword.control.at-rule	#D2BF61	—
entity.other.attribute-name.class.tailwind, support.type.property-name.media	#7c9782	—

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