ArkThemes

Name: ArkThemes
Author: arktypeio

Publisher: arktypeioThemes in package: 4

A collection of themes with special highlighting for TypeScript generics ⛵

GitHub

Color themes

VS Code preview

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

ArkThemes — ArkLight (italic)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#005FB8
activityBar.background#F2EED0
activityBar.border#E5E5E5
activityBar.foreground#2e4775
activityBar.inactiveForeground#616161
activityBarBadge.background#005FB8
activityBarBadge.foreground#F9F5D7
badge.background#CCCCCC
badge.foreground#3B3B3B
button.background#005FB8
button.border#0000001a
button.foreground#F9F5D7
button.hoverBackground#0258A8
button.secondaryBackground#E5E5E5
button.secondaryForeground#3B3B3B
button.secondaryHoverBackground#CCCCCC
chat.editedFileForeground#895503
chat.slashCommandBackground#D2ECFF
chat.slashCommandForeground#306CA2
checkbox.background#F2EED0
checkbox.border#CECECE
descriptionForeground#3B3B3B
dropdown.background#F9F5D7
dropdown.border#CECECE
dropdown.foreground#3B3B3B
dropdown.listBackground#F9F5D7
editor.background#F9F5D7
editor.foreground#2e4775
editor.selectionHighlightBackground#ADD6FF80
editorBracketHighlight.foreground1#844c13
editorBracketHighlight.foreground2#ca842e
editorBracketHighlight.foreground3#ffbc49
editorBracketHighlight.unexpectedBracket.foreground#ca842e
editorCodeLens.foreground#0078D490
editorCursor.foreground#00487e
editorError.foreground#9558f8
editorGroup.border#E5E5E5
editorGroupHeader.tabsBackground#F2EED0
editorGroupHeader.tabsBorder#E5E5E5
editorGutter.addedBackground#2EA043
editorGutter.deletedBackground#F85149
editorGutter.modifiedBackground#005FB8
editorIndentGuide.background1#D3D3D3
editorInlayHint.background#0078D40C
editorInlayHint.foreground#0078D490
editorLineNumber.activeForeground#171184
editorLineNumber.foreground#6E7681
editorOverviewRuler.border#E5E5E5
editorOverviewRuler.errorForeground#9558f8
editorSuggestWidget.background#F2EED0
editorWarning.foreground#207A45
editorWidget.background#F2EED0
errorForeground#9558f8
errorLens.errorBackground#9558f818
errorLens.errorForeground#9558f8A0
errorLens.hintBackground#207A450C
errorLens.hintForeground#207A4590
errorLens.infoBackground#0078D40C
errorLens.infoForeground#0078D490
errorLens.warningBackground#0078D40C
errorLens.warningForeground#0078D490
focusBorder#005FB8
foreground#3B3B3B
icon.foreground#3B3B3B
input.background#F9F5D7
input.border#CECECE
input.foreground#3B3B3B
input.placeholderForeground#767676
inputOption.activeBackground#BED6ED
inputOption.activeBorder#005FB8
inputOption.activeForeground#000000
keybindingLabel.foreground#3B3B3B
list.activeSelectionBackground#E8E8E8
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.errorForeground#9558f8
list.focusAndSelectionOutline#005FB8
list.hoverBackground#F2F2F2
menu.border#CECECE
menu.selectionBackground#005FB8
menu.selectionForeground#F9F5D7
minimap.errorHighlight#9558f8
notebook.cellBorderColor#E5E5E5
notebook.selectedCellBackground#C8DDF150
notificationCenterHeader.background#F9F5D7
notificationCenterHeader.foreground#3B3B3B
notifications.background#F9F5D7
notifications.border#E5E5E5
notifications.foreground#3B3B3B
panel.background#F2EED0
panel.border#E5E5E5
panelInput.border#E5E5E5
panelTitle.activeBorder#005FB8
panelTitle.activeForeground#3B3B3B
panelTitle.inactiveForeground#3B3B3B
peekViewEditor.matchHighlightBackground#BB800966
peekViewResult.background#F9F5D7
peekViewResult.matchHighlightBackground#BB800966
pickerGroup.border#E5E5E5
pickerGroup.foreground#8B949E
ports.iconRunningProcessForeground#369432
progressBar.background#005FB8
quickInput.background#F2EED0
quickInput.foreground#3B3B3B
searchEditor.textInputBorder#CECECE
settings.dropdownBackground#F9F5D7
settings.dropdownBorder#CECECE
settings.headerForeground#2e4775
settings.modifiedItemIndicator#BB800966
settings.numberInputBorder#CECECE
settings.textInputBorder#CECECE
sideBar.background#F2EED0
sideBar.border#E5E5E5
sideBar.foreground#3B3B3B
sideBarSectionHeader.background#F2EED0
sideBarSectionHeader.border#E5E5E5
sideBarSectionHeader.foreground#3B3B3B
sideBarTitle.foreground#3B3B3B
statusBar.background#F2EED0
statusBar.border#E5E5E5
statusBar.debuggingBackground#FD716C
statusBar.debuggingForeground#000000
statusBar.focusBorder#005FB8
statusBar.foreground#3B3B3B
statusBar.noFolderBackground#F2EED0
statusBarItem.compactHoverBackground#CCCCCC
statusBarItem.errorBackground#C72E0F
statusBarItem.focusBorder#005FB8
statusBarItem.hoverBackground#B8B8B850
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#005FB8
statusBarItem.remoteForeground#F9F5D7
tab.activeBackground#F9F5D7
tab.activeBorder#F2EED0
tab.activeBorderTop#005FB8
tab.activeForeground#3B3B3B
tab.border#E5E5E5
tab.hoverBackground#F9F5D7
tab.inactiveBackground#F2EED0
tab.inactiveForeground#868686
tab.lastPinnedBorder#D4D4D4
tab.selectedBorderTop#68a3da
tab.unfocusedActiveBorder#F2EED0
tab.unfocusedActiveBorderTop#E5E5E5
tab.unfocusedHoverBackground#F2EED0
terminal.foreground#3B3B3B
terminal.inactiveSelectionBackground#E5EBF1
terminal.tab.activeBorder#005FB8
terminalCursor.foreground#00487e
textBlockQuote.background#F2EED0
textBlockQuote.border#E5E5E5
textCodeBlock.background#F2EED0
textLink.activeForeground#005FB8
textLink.foreground#005FB8
textPreformat.background#0000001F
textPreformat.foreground#3B3B3B
textSeparator.foreground#21262D
titleBar.activeBackground#F2EED0
titleBar.activeForeground#1E1E1E
titleBar.border#E5E5E5
titleBar.inactiveBackground#F2EED0
titleBar.inactiveForeground#8B949E
welcomePage.tileBackground#F3F3F3
widget.border#E5E5E5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function, support.function, meta.function-call.python, meta.function.decorator punctuation, meta.function.decorator support.type	#0078D4	italic
entity.name.type, meta.decorator.ts variable	#04b5a3	—
meta.type.declaration.ts entity.name.type	#0078D4	italic
meta.type.declaration.ts meta.type.parameters.ts entity.name.type	—
keyword, storage, punctuation, constant.character.escape	#ca842e	—
variable.other.property, variable.other.constant.property, string	#844c13	—
variable.language, constant, support.type, entity.name.tag, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end	#07538e	—
invalid, support.type.exception	#9558f8	—
comment, punctuation.definition.comment	#888899	—
variable, meta.function-call.arguments	#07538e	—

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