Abyssal - Focused Dark Theme

Name: Abyssal - Focused Dark Theme
Author: Vishnu Kothakapu

Publisher: Vishnu KothakapuThemes in package: 1

A deep, low-noise dark theme designed for long coding sessions.

Open in VS Code GitHub

VS Code preview

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

Abyssal - Focused Dark Theme — Abyssal

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.activeBorder#67E8F9
activityBar.background#050914
activityBar.border#172033
activityBar.foreground#67E8F9
activityBar.inactiveForeground#475569
activityBarBadge.background#164E63
activityBarBadge.foreground#E0F2FE
button.background#164E63
button.foreground#E0F2FE
button.hoverBackground#155E75
button.secondaryBackground#172033
button.secondaryForeground#D9E2F2
button.secondaryHoverBackground#1E293B
debugToolBar.background#0F172A
debugToolBar.border#334155
descriptionForeground#94A3B8
diffEditor.diagonalFill#172033
diffEditor.insertedLineBackground#86EFAC0D
diffEditor.insertedTextBackground#86EFAC18
diffEditor.removedLineBackground#FB71850D
diffEditor.removedTextBackground#FB718518
disabledForeground#475569
dropdown.background#0F172A
dropdown.border#334155
dropdown.foreground#D9E2F2
editor.background#070B14
editor.findMatchBackground#FDE68A55
editor.findMatchForeground#F1F5F9
editor.findMatchHighlightBackground#FDE68A22
editor.findRangeHighlightBackground#67E8F918
editor.focusedStackFrameHighlightBackground#164E6355
editor.foreground#D9E2F2
editor.inactiveSelectionBackground#12344A80
editor.lineHighlightBackground#0B1120
editor.lineHighlightBorder#172033
editor.selectionBackground#164E63
editor.selectionForeground#F1F5F9
editor.stackFrameHighlightBackground#164E6333
editor.wordHighlightBackground#12344A80
editor.wordHighlightStrongBackground#164E6380
editorBracketMatch.background#164E6355
editorBracketMatch.border#67E8F9
editorCursor.foreground#67E8F9
editorError.background#FB718510
editorError.border#FB7185
editorError.foreground#FB7185
editorHint.border#86EFAC
editorHint.foreground#86EFAC
editorHoverWidget.background#0F172A
editorHoverWidget.border#334155
editorIndentGuide.activeBackground1#334155
editorIndentGuide.background1#172033
editorInfo.background#67E8F910
editorInfo.border#67E8F9
editorInfo.foreground#67E8F9
editorLineNumber.activeForeground#D9E2F2
editorLineNumber.foreground#475569
editorSuggestWidget.background#0F172A
editorSuggestWidget.border#334155
editorSuggestWidget.highlightForeground#67E8F9
editorSuggestWidget.selectedBackground#164E63
editorWarning.background#FBBF2410
editorWarning.border#FBBF24
editorWarning.foreground#FBBF24
editorWhitespace.foreground#172033
editorWidget.background#0F172A
editorWidget.border#334155
focusBorder#67E8F9
foreground#D9E2F2
gitDecoration.addedResourceForeground#86EFAC
gitDecoration.conflictingResourceForeground#F0ABFC
gitDecoration.deletedResourceForeground#FB7185
gitDecoration.ignoredResourceForeground#475569
gitDecoration.modifiedResourceForeground#FDE68A
gitDecoration.untrackedResourceForeground#67E8F9
input.background#0F172A
input.border#334155
input.foreground#D9E2F2
input.placeholderForeground#64748B
inputOption.activeBackground#164E63
inputOption.activeBorder#67E8F9
inputOption.activeForeground#F1F5F9
list.activeSelectionBackground#164E63
list.activeSelectionForeground#F1F5F9
list.focusBackground#164E63
list.focusForeground#F1F5F9
list.highlightForeground#67E8F9
list.hoverBackground#0F172A
list.inactiveSelectionBackground#0F3445
list.inactiveSelectionForeground#D9E2F2
menu.background#0F172A
menu.foreground#D9E2F2
menu.selectionBackground#164E63
menu.selectionForeground#F1F5F9
menu.separatorBackground#172033
minimap.background#050914
minimapSlider.activeBackground#47556999
minimapSlider.background#1E293B55
minimapSlider.hoverBackground#33415588
notificationLink.foreground#67E8F9
notifications.background#0F172A
notifications.border#334155
notifications.foreground#D9E2F2
panel.background#0B1120
panel.border#172033
panelTitle.activeBorder#67E8F9
panelTitle.activeForeground#F1F5F9
panelTitle.inactiveForeground#64748B
peekView.border#67E8F9
peekViewEditor.background#070B14
peekViewEditor.matchHighlightBackground#FDE68A22
peekViewResult.background#0B1120
peekViewResult.fileForeground#D9E2F2
peekViewResult.lineForeground#64748B
peekViewTitle.background#0F172A
peekViewTitleDescription.foreground#94A3B8
peekViewTitleLabel.foreground#F1F5F9
progressBar.background#67E8F9
quickInput.background#0F172A
quickInput.foreground#D9E2F2
quickInputList.focusBackground#164E63
quickInputList.focusForeground#F1F5F9
scrollbarSlider.activeBackground#475569
scrollbarSlider.background#1E293B
scrollbarSlider.hoverBackground#334155
sideBar.background#0B1120
sideBar.border#172033
sideBar.foreground#CBD5E1
sideBarSectionHeader.background#0F172A
sideBarSectionHeader.foreground#94A3B8
sideBarTitle.foreground#F1F5F9
statusBar.background#0B1120
statusBar.border#172033
statusBar.foreground#94A3B8
statusBarItem.hoverBackground#172033
tab.activeBackground#070B14
tab.activeBorderTop#67E8F9
tab.activeForeground#F1F5F9
tab.hoverBackground#0F172A
tab.hoverForeground#D9E2F2
tab.inactiveBackground#0B1120
tab.inactiveForeground#64748B
terminal.ansiBlack#1E293B
terminal.ansiBlue#7DD3FC
terminal.ansiBrightBlack#475569
terminal.ansiBrightBlue#BAE6FD
terminal.ansiBrightCyan#A5F3FC
terminal.ansiBrightGreen#BBF7D0
terminal.ansiBrightMagenta#F5D0FE
terminal.ansiBrightRed#FDA4AF
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FEF08A
terminal.ansiCyan#67E8F9
terminal.ansiGreen#86EFAC
terminal.ansiMagenta#F0ABFC
terminal.ansiRed#FB7185
terminal.ansiWhite#F1F5F9
terminal.ansiYellow#FDE68A
terminal.background#070B14
terminal.foreground#D9E2F2
terminalCursor.foreground#67E8F9
titleBar.activeBackground#070B14
titleBar.activeForeground#D9E2F2
titleBar.border#172033
titleBar.inactiveBackground#0B1120
titleBar.inactiveForeground#64748B
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748B	italic
comment.block.documentation, comment.line.documentation	#718096	italic
keyword, storage, storage.type, storage.modifier	#7DD3FC	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.return	#67E8F9	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical	#94A3B8	—
string, string.quoted, string.template, string.interpolated	#86EFAC	—
constant.character.escape	#FDE68A	—
constant.numeric	#FDE68A	—
constant, variable.other.constant	#F0ABFC	—
constant.language.boolean, constant.language.null, constant.language.undefined	#F0ABFC	—
entity.name.function, support.function, meta.function-call entity.name.function	#C4B5FD	—
variable.parameter, meta.function.parameters variable	#D9E2F2	—
entity.name.class, entity.name.type.class	#A5B4FC	—
entity.name.type, support.type, support.class	#67E8F9	—
entity.name.type.interface	#67E8F9	—
entity.name.type.enum	#A5B4FC	—
variable.other.enummember, entity.name.constant	#F0ABFC	—
variable, variable.other	#D9E2F2	—
variable.language, variable.language.this, variable.language.super	#7DD3FC	—
variable.other.property, meta.object-literal.key, support.type.property-name	#A5B4FC	—
meta.decorator, punctuation.decorator	#F0ABFC	—
storage.type.annotation, punctuation.definition.annotation	#F0ABFC	—
entity.name.tag, entity.name.tag.html	#67E8F9	—
entity.other.attribute-name	#C4B5FD	—
string.regexp	#F0ABFC	—
markup.heading, entity.name.section	#67E8F9	bold
markup.bold	#F1F5F9	bold
markup.italic	#C4B5FD	italic
markup.inline.raw, markup.raw	#86EFAC	—
entity.name.tag.yaml, entity.name.tag.yaml.key	#A5B4FC	—
entity.name.anchor.yaml	#F0ABFC	—
support.function.builtin.shell, meta.function-call.shell	#C4B5FD	—
keyword.other.sql, keyword.control.sql	#7DD3FC	—
support.function.sql	#C4B5FD	—
invalid, invalid.illegal	#FB7185	—