Star Trek: Factions Theme Pack

Name: Star Trek: Factions Theme Pack
Author: Robert Schnable

Publisher: Robert SchnableThemes in package: 7

7 dark VS Code themes inspired by the factions and aesthetics of Star Trek — Federation, Klingon, Cardassian, Romulan, Vulcan, Borg, and LCARS.

Open in VS Code GitHub

Color themes

VS Code preview

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

Star Trek: Factions Theme Pack — ST: Borg

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#020402
activityBar.border#0c100c
activityBar.foreground#00dd44
activityBar.inactiveForeground#142814
activityBarBadge.background#009930
activityBarBadge.foreground#000000
badge.background#009930
badge.foreground#000000
button.background#0a4810
button.foreground#c0f8c8
button.hoverBackground#0e5818
editor.background#060806
editor.findMatchBackground#20882080
editor.findMatchHighlightBackground#20882040
editor.foreground#88c880
editor.inactiveSelectionBackground#18601840
editor.lineHighlightBackground#0c100c
editor.selectionBackground#186018
editor.selectionHighlightBackground#18601840
editor.wordHighlightBackground#18601840
editor.wordHighlightStrongBackground#18601860
editorBracketMatch.background#18601840
editorBracketMatch.border#00cc44
editorCursor.foreground#00ff44
editorGroupHeader.tabsBackground#040604
editorIndentGuide.activeBackground#186018
editorIndentGuide.background#0c100c
editorLineNumber.activeForeground#30a030
editorLineNumber.foreground#1a2e1a
editorWhitespace.foreground#0c100c
focusBorder#009930
input.background#080c08
input.border#183818
input.foreground#88c880
input.placeholderForeground#204820
list.activeSelectionBackground#0c180c
list.activeSelectionForeground#00ff44
list.highlightForeground#00dd44
list.hoverBackground#0c100c
panel.background#040604
panel.border#0c100c
panelTitle.activeBorder#009930
panelTitle.activeForeground#00dd44
scrollbarSlider.activeBackground#30a030a0
scrollbarSlider.background#18601860
scrollbarSlider.hoverBackground#20882080
sideBar.background#040604
sideBar.border#0c100c
sideBar.foreground#508850
sideBarSectionHeader.background#080c08
sideBarSectionHeader.foreground#60a060
sideBarTitle.foreground#00dd44
statusBar.background#0a280a
statusBar.foreground#00dd44
statusBarItem.hoverBackground#103010
statusBarItem.remoteBackground#061806
statusBarItem.remoteForeground#00cc40
tab.activeBackground#060806
tab.activeBorderTop#009930
tab.activeForeground#00ff44
tab.border#0c100c
tab.inactiveBackground#040604
tab.inactiveForeground#204820
terminal.ansiBlack#060806
terminal.ansiBlue#2080a0
terminal.ansiBrightGreen#00ff44
terminal.ansiCyan#20c880
terminal.ansiGreen#00cc44
terminal.ansiMagenta#4a8040
terminal.ansiRed#cc4433
terminal.ansiWhite#88c880
terminal.ansiYellow#88aa20
terminal.background#040604
terminal.foreground#88c880
titleBar.activeBackground#020402
titleBar.activeForeground#88c880
titleBar.border#0c100c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#1a4020	italic
keyword, storage.type, storage.modifier	#00cc44	bold
keyword.control	#00ff44	bold
string, string.quoted	#508858	—
constant.character.escape, string.regexp	#60a868	—
constant.numeric, constant.language, constant.other	#00ee44	—
entity.name.function, meta.function-call entity.name.function	#70d888	—
variable.parameter	#50a860	italic
variable, variable.other	#68b870	—
entity.name.type, entity.name.class, support.class	#20ff60	bold
entity.name.interface, entity.other.inherited-class	#10e050	italic
variable.other.property, support.type.property-name	#58a860	—
keyword.operator	#00b838	—
punctuation	#285828	—
entity.name.tag	#00b840	—
entity.other.attribute-name	#00cc44	—
invalid	#ff2244	underline bold

VS Code preview

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

Star Trek: Factions Theme Pack — ST: Cardassian

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#080906
activityBar.border#181910
activityBar.foreground#d8b060
activityBar.inactiveForeground#303020
activityBarBadge.background#907828
activityBarBadge.foreground#0e0f0a
badge.background#907828
badge.foreground#0e0f0a
button.background#604c18
button.foreground#f0e0b0
button.hoverBackground#785c20
editor.background#0e0f0a
editor.findMatchBackground#8a780880
editor.findMatchHighlightBackground#8a780840
editor.foreground#c8b898
editor.inactiveSelectionBackground#5a501840
editor.lineHighlightBackground#181910
editor.selectionBackground#5a501880
editor.selectionHighlightBackground#5a501840
editor.wordHighlightBackground#5a501840
editor.wordHighlightStrongBackground#5a501860
editorBracketMatch.background#5a501840
editorBracketMatch.border#b09838
editorCursor.foreground#d8b060
editorGroupHeader.tabsBackground#0a0c08
editorIndentGuide.activeBackground#5a5228
editorIndentGuide.background#181910
editorLineNumber.activeForeground#a09040
editorLineNumber.foreground#3a3820
editorWhitespace.foreground#181910
focusBorder#907828
input.background#141510
input.border#2e2e18
input.foreground#c8b898
input.placeholderForeground#484830
list.activeSelectionBackground#1e1e10
list.activeSelectionForeground#e0c070
list.highlightForeground#d8b060
list.hoverBackground#181910
panel.background#0a0c08
panel.border#181910
panelTitle.activeBorder#907828
panelTitle.activeForeground#d8b060
scrollbarSlider.activeBackground#9a8838a0
scrollbarSlider.background#5a501860
scrollbarSlider.hoverBackground#7a6a2080
sideBar.background#0a0c08
sideBar.border#181910
sideBar.foreground#9a9070
sideBarSectionHeader.background#141510
sideBarSectionHeader.foreground#b09870
sideBarTitle.foreground#d8b060
statusBar.background#3a3818
statusBar.foreground#e0d0a0
statusBarItem.hoverBackground#4a4820
statusBarItem.remoteBackground#282808
statusBarItem.remoteForeground#d0c080
tab.activeBackground#0e0f0a
tab.activeBorderTop#907828
tab.activeForeground#e0c070
tab.border#181910
tab.inactiveBackground#0a0c08
tab.inactiveForeground#484830
terminal.ansiBlue#507080
terminal.ansiGreen#608040
terminal.ansiRed#aa3322
terminal.ansiWhite#c8b898
terminal.ansiYellow#b89020
terminal.background#0a0c08
terminal.foreground#c8b898
titleBar.activeBackground#080906
titleBar.activeForeground#c8b898
titleBar.border#181910

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4a4828	italic
keyword, storage.type, storage.modifier	#c0a038	bold
keyword.control	#d8b848	bold
string, string.quoted	#9a8050	—
constant.character.escape, string.regexp	#b89860	—
constant.numeric, constant.language, constant.other	#d0a838	—
entity.name.function, meta.function-call entity.name.function	#d8c878	—
variable.parameter	#b0a060	italic
variable, variable.other	#c0a878	—
entity.name.type, entity.name.class, support.class	#e0c058	bold
entity.name.interface, entity.other.inherited-class	#c8b048	italic
variable.other.property, support.type.property-name	#a89870	—
keyword.operator	#a09030	—
punctuation	#686040	—
entity.name.tag	#a09038	—
entity.other.attribute-name	#b8a040	—
invalid	#ff4422	underline

VS Code preview

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

Star Trek: Factions Theme Pack — ST: Federation

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#040810
activityBar.border#101828
activityBar.foreground#f0c040
activityBar.inactiveForeground#1a2e48
activityBarBadge.background#c89a20
activityBarBadge.foreground#040810
badge.background#c89a20
badge.foreground#040810
button.background#1a4888
button.foreground#e0f0ff
button.hoverBackground#2a58a0
editor.background#080d18
editor.findMatchBackground#c89a2080
editor.findMatchHighlightBackground#c89a2040
editor.foreground#b8cce8
editor.inactiveSelectionBackground#1a4a8840
editor.lineHighlightBackground#101828
editor.selectionBackground#1a4a8880
editor.selectionHighlightBackground#1a4a8840
editor.wordHighlightBackground#1a4a8840
editor.wordHighlightStrongBackground#1a4a8860
editorBracketMatch.background#1a4a8840
editorBracketMatch.border#4888d0
editorCursor.foreground#f0c040
editorGroupHeader.tabsBackground#060b12
editorIndentGuide.activeBackground#2a5080
editorIndentGuide.background#121e30
editorLineNumber.activeForeground#5888c0
editorLineNumber.foreground#223048
editorWhitespace.foreground#121e30
focusBorder#c89a20
input.background#0c1420
input.border#1e3858
input.foreground#b8cce8
input.placeholderForeground#2a4060
list.activeSelectionBackground#102038
list.activeSelectionForeground#f0c040
list.highlightForeground#f0c040
list.hoverBackground#101828
panel.background#060b12
panel.border#101828
panelTitle.activeBorder#c89a20
panelTitle.activeForeground#f0c040
scrollbarSlider.activeBackground#3a80c8a0
scrollbarSlider.background#1a4a8860
scrollbarSlider.hoverBackground#2a6ab080
sideBar.background#060b12
sideBar.border#101828
sideBar.foreground#7898c0
sideBarSectionHeader.background#0c1420
sideBarSectionHeader.foreground#90b0d0
sideBarTitle.foreground#f0c040
statusBar.background#0d2a58
statusBar.foreground#d0e4ff
statusBarItem.hoverBackground#153468
statusBarItem.remoteBackground#c89a20
statusBarItem.remoteForeground#040810
tab.activeBackground#080d18
tab.activeBorderTop#c89a20
tab.activeForeground#f0c040
tab.border#101828
tab.inactiveBackground#060b12
tab.inactiveForeground#2a4060
terminal.ansiBlue#3878d0
terminal.ansiCyan#40b8d8
terminal.ansiGreen#40a880
terminal.ansiMagenta#9060c0
terminal.ansiRed#cc3344
terminal.ansiWhite#b8cce8
terminal.ansiYellow#d0a030
terminal.background#060b12
terminal.foreground#b8cce8
titleBar.activeBackground#040810
titleBar.activeForeground#b8cce8
titleBar.border#101828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#2a4868	italic
keyword, storage.type, storage.modifier	#5898e0	bold
keyword.control	#60b0f8	bold
string, string.quoted	#d0a030	—
constant.character.escape, string.regexp	#e8b840	—
constant.numeric, constant.language, constant.other	#f0c040	—
entity.name.function, meta.function-call entity.name.function	#90c8f0	—
variable.parameter	#70a8d8	italic
variable, variable.other	#a0c0e0	—
entity.name.type, entity.name.class, support.class	#e8c040	bold
entity.name.interface, entity.other.inherited-class	#d0b030	italic
variable.other.property, support.type.property-name	#88a8cc	—
keyword.operator	#4880c8	—
punctuation	#385870	—
entity.name.tag	#5888cc	—
entity.other.attribute-name	#d0a030	—
invalid	#ff3344	underline

VS Code preview

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

Star Trek: Factions Theme Pack — ST: Klingon

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#080402
activityBar.border#1c120c
activityBar.foreground#e8a020
activityBar.inactiveForeground#3a1e10
activityBarBadge.background#b83008
activityBarBadge.foreground#f8e0c0
badge.background#b83008
badge.foreground#f8e0c0
button.background#8a2008
button.foreground#f8e8d0
button.hoverBackground#a02810
editor.background#0e0806
editor.findMatchBackground#c8380880
editor.findMatchHighlightBackground#c8380840
editor.foreground#d0a880
editor.inactiveSelectionBackground#6a180840
editor.lineHighlightBackground#1c120c
editor.selectionBackground#6a180880
editor.selectionHighlightBackground#6a180840
editor.wordHighlightBackground#7a200840
editor.wordHighlightStrongBackground#7a200860
editorBracketMatch.background#6a180840
editorBracketMatch.border#d04820
editorCursor.foreground#e8a020
editorGroupHeader.tabsBackground#0a0604
editorIndentGuide.activeBackground#7a3010
editorIndentGuide.background#1c120c
editorLineNumber.activeForeground#c04818
editorLineNumber.foreground#502818
editorWhitespace.foreground#1c120c
focusBorder#b83008
input.background#160e08
input.border#3a2010
input.foreground#d0a880
input.placeholderForeground#502818
list.activeSelectionBackground#1c1008
list.activeSelectionForeground#f0b030
list.highlightForeground#e8a020
list.hoverBackground#1c120c
panel.background#0a0604
panel.border#1c120c
panelTitle.activeBorder#b83008
panelTitle.activeForeground#e8a020
scrollbarSlider.activeBackground#c83808a0
scrollbarSlider.background#6a180860
scrollbarSlider.hoverBackground#9a281080
sideBar.background#0a0604
sideBar.border#1c120c
sideBar.foreground#a07858
sideBarSectionHeader.background#160e08
sideBarSectionHeader.foreground#c09060
sideBarTitle.foreground#e8a020
statusBar.background#8a1e08
statusBar.foreground#f0d0a0
statusBarItem.hoverBackground#a02808
statusBarItem.remoteBackground#601008
statusBarItem.remoteForeground#f0d0a0
tab.activeBackground#0e0806
tab.activeBorderTop#b83008
tab.activeForeground#f0b030
tab.border#1c120c
tab.inactiveBackground#0a0604
tab.inactiveForeground#502818
terminal.ansiBlue#506888
terminal.ansiGreen#607838
terminal.ansiRed#dd3308
terminal.ansiWhite#d0a880
terminal.ansiYellow#c89020
terminal.background#0a0604
terminal.foreground#d0a880
titleBar.activeBackground#080402
titleBar.activeForeground#d0a880
titleBar.border#1c120c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#603020	italic
keyword, storage.type, storage.modifier	#e04818	bold
keyword.control	#ff5020	bold
string, string.quoted	#b07848	—
constant.character.escape, string.regexp	#d09050	—
constant.numeric, constant.language, constant.other	#e8a020	—
entity.name.function, meta.function-call entity.name.function	#e8c060	—
variable.parameter	#c09848	italic
variable, variable.other	#c8a068	—
entity.name.type, entity.name.class, support.class	#f0b030	bold
entity.name.interface, entity.other.inherited-class	#d8a020	italic
variable.other.property, support.type.property-name	#b89060	—
keyword.operator	#cc4010	—
punctuation	#7a4828	—
entity.name.tag	#c04010	—
entity.other.attribute-name	#d09828	—
invalid	#ff0000	underline bold