Sigmaris Universal Accessibility Themes

Name: Sigmaris Universal Accessibility Themes
Author: Kaisei-Yasuzaki

Publisher: Kaisei-YasuzakiThemes in package: 5

A collection of accessibility-focused color themes designed for color vision differences and low-vision developers.

Open in VS Code GitHub

Color themes

VS Code preview

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

Sigmaris Universal Accessibility Themes — Universal Deuteranopia

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E7E7EA
activityBar.foreground#1F1F21
activityBarBadge.background#3B6EBB
activityBarBadge.foreground#FFFFFF
button.background#A8863B
button.foreground#FFFFFF
button.hoverBackground#927535
editor.background#F5F5F7
editor.foreground#1F1F21
editor.inactiveSelectionBackground#E3E7F4
editor.selectionBackground#D8DFF0
editor.selectionHighlightBackground#EDF0FA
editorIndentGuide.activeBackground1#B1B1B6
editorIndentGuide.background1#D1D1D4
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#C7C7CC
editorSuggestWidget.foreground#1F1F21
editorSuggestWidget.selectedBackground#DDE4F3
input.background#FFFFFF
input.border#CECED3
input.placeholderForeground#7B7B81
list.activeSelectionBackground#D0D8EB
list.hoverBackground#E5EAF6
list.inactiveSelectionBackground#E3E8F4
menu.background#FFFFFF
menu.border#CECED3
menu.foreground#1F1F21
panel.background#F4F4F6
panel.border#D4D4D8
sideBar.background#F5F5F7
sideBar.border#D6D6DA
sideBar.foreground#2A2A2C
statusBar.background#D4D4D8
statusBar.border#C8C8CC
statusBar.foreground#1F1F21
tab.activeBackground#FFFFFF
tab.activeForeground#1F1F21
tab.border#CECED3
tab.inactiveBackground#EFEFF2
terminal.ansiBlack#2A2A2C
terminal.ansiBlue#3B6EBB
terminal.ansiBrightBlack#3A3A3C
terminal.ansiBrightBlue#437CCF
terminal.ansiBrightCyan#61A4BA
terminal.ansiBrightGreen#B99745
terminal.ansiBrightMagenta#7765A6
terminal.ansiBrightRed#815935
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#CFBB6C
terminal.ansiCyan#568FA8
terminal.ansiGreen#A8863B
terminal.ansiMagenta#6C5A96
terminal.ansiRed#6D4A2E
terminal.ansiWhite#ECECEE
terminal.ansiYellow#C0A95C
terminal.background#F5F5F7
terminal.foreground#1F1F21
terminalCursor.background#1F1F21
terminalCursor.foreground#1F1F21
titleBar.activeBackground#EFEFF2
titleBar.activeForeground#1F1F21
titleBar.inactiveBackground#E8E8EC
titleBar.inactiveForeground#7B7B81

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7C7C80	italic
keyword	#3B6EBB	—
variable	#1F1F21	—
string, constant.character	#6D4A2E	—
constant.numeric, constant.language	#A8863B	—
storage.type	#6C5A96	—
entity.name.function	#3B6EBB	—
entity.name.tag, punctuation.definition.tag	#6C5A96	—

VS Code preview

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

Sigmaris Universal Accessibility Themes — Universal High Contrast Black

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#000000
activityBar.foreground#FFFFFF
activityBarBadge.background#FFD700
activityBarBadge.foreground#000000
editor.background#000000
editor.foreground#FFFFFF
editor.inactiveSelectionBackground#003E99
editor.lineHighlightBackground#111111
editor.selectionBackground#005FFF
editorBracketMatch.border#00FFFF
editorCursor.foreground#FFD700
editorIndentGuide.activeBackground#777777
editorIndentGuide.background#333333
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#BBBBBB
editorWhitespace.foreground#333333
list.activeSelectionBackground#003E99
list.hoverBackground#111111
list.inactiveSelectionBackground#111111
panel.background#000000
panel.border#333333
sideBar.background#000000
sideBar.foreground#FFFFFF
sideBarSectionHeader.background#111111
statusBar.background#000000
statusBar.foreground#FFFFFF
tab.activeBackground#111111
tab.activeForeground#FFFFFF
tab.inactiveBackground#000000
tab.inactiveForeground#AAAAAA
terminal.background#000000
terminal.foreground#FFFFFF
terminalCursor.foreground#FFD700

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6A6A6A	italic
keyword, storage.type	#00E5FF	—
string	#FFB400	—
variable, identifier	#FFFFFF	—
constant.numeric	#66FF00	—
entity.name.function	#00FFD0	—
entity.name.type	#FF74FF	—

VS Code preview

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

Sigmaris Universal Accessibility Themes — Universal Light Gray Contrast

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

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#F2F2F2
activityBar.foreground#1A1A1A
activityBarBadge.background#0059FF
activityBarBadge.foreground#FFFFFF
editor.background#F2F2F2
editor.foreground#1A1A1A
editor.inactiveSelectionBackground#DDE9FF
editor.lineHighlightBackground#E8E8E8
editor.selectionBackground#BFD7FF
editorBracketMatch.border#006BFF
editorCursor.foreground#0059FF
editorIndentGuide.activeBackground#888888
editorIndentGuide.background#CCCCCC
editorLineNumber.activeForeground#1A1A1A
editorLineNumber.foreground#777777
editorWhitespace.foreground#CCCCCC
list.activeSelectionBackground#C2DAFF
list.hoverBackground#E5E5E5
list.inactiveSelectionBackground#E8E8E8
panel.background#F2F2F2
panel.border#CCCCCC
sideBar.background#F2F2F2
sideBar.foreground#1A1A1A
sideBarSectionHeader.background#E5E5E5
statusBar.background#E0E0E0
statusBar.foreground#1A1A1A
tab.activeBackground#FFFFFF
tab.activeForeground#1A1A1A
tab.inactiveBackground#F2F2F2
tab.inactiveForeground#777777
terminal.background#FFFFFF
terminal.foreground#1A1A1A
terminalCursor.foreground#0059FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7A7A7A	italic
keyword, storage.type	#004FCC	—
string	#B35A00	—
variable, identifier	#1A1A1A	—
constant.numeric	#008A2E	—
entity.name.function	#006BFF	—
entity.name.type	#8533A6	—

VS Code preview

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

Sigmaris Universal Accessibility Themes — Universal Protanopia

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E7E7E7
activityBar.foreground#1C1C1C
activityBarBadge.background#2F66B3
activityBarBadge.foreground#FFFFFF
button.background#BFA442
button.foreground#FFFFFF
button.hoverBackground#A68F38
editor.background#F5F5F5
editor.foreground#1C1C1C
editor.inactiveSelectionBackground#DFE8F2
editor.selectionBackground#CFE2F5
editor.selectionHighlightBackground#E7EFF7
editorIndentGuide.activeBackground1#A0A0A0
editorIndentGuide.background1#D0D0D0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#C8C8C8
editorSuggestWidget.foreground#1C1C1C
editorSuggestWidget.selectedBackground#D5E4F5
input.background#FFFFFF
input.border#D0D0D0
input.placeholderForeground#7A7A7A
list.activeSelectionBackground#C9D9EE
list.hoverBackground#E3ECF7
list.inactiveSelectionBackground#DEE6F1
menu.background#FFFFFF
menu.border#D0D0D0
menu.foreground#1C1C1C
panel.background#F8F8F8
panel.border#D1D1D1
sideBar.background#F4F4F4
sideBar.border#D5D5D5
sideBar.foreground#1E1E1E
statusBar.background#D5D5D5
statusBar.border#C5C5C5
statusBar.foreground#1C1C1C
tab.activeBackground#FFFFFF
tab.activeForeground#1C1C1C
tab.border#D0D0D0
tab.inactiveBackground#ECECEC
terminal.ansiBlack#2A2A2A
terminal.ansiBlue#2F66B3
terminal.ansiBrightBlack#3A3A3A
terminal.ansiBrightBlue#3B7CD3
terminal.ansiBrightCyan#5EC9E4
terminal.ansiBrightGreen#56C1C1
terminal.ansiBrightMagenta#6E86CE
terminal.ansiBrightRed#C2A84A
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#D8CA82
terminal.ansiCyan#4BAFCE
terminal.ansiGreen#4AA9A9
terminal.ansiMagenta#5E73B8
terminal.ansiRed#A68F38
terminal.ansiWhite#EDEDED
terminal.ansiYellow#CBBE72
terminal.background#F4F4F4
terminal.foreground#1C1C1C
terminalCursor.background#1C1C1C
terminalCursor.foreground#1C1C1C
titleBar.activeBackground#ECECEC
titleBar.activeForeground#1C1C1C
titleBar.inactiveBackground#E6E6E6
titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7A7A7A	italic
keyword	#2F66B3	—
variable	#1C1C1C	—
string	#BFA442	—
constant.numeric, constant.language	#4AA9A9	—
storage.type	#5E73B8	—
entity.name.function	#2F66B3	—
entity.name.tag, punctuation.definition.tag	#5E73B8	—