After Dark

Name: After Dark
Author: Aries Beltran

Publisher: Aries BeltranThemes in package: 1

Darked Visual Studio Code theme optimised for Operator Mono

Open in VS Code GitHub

VS Code preview

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

After Dark — After Dark

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.

activityBar.background#21183C
activityBar.foreground#74819B
activityBarBadge.background#E3342F
activityBarBadge.foreground#FFFFFF
button.background#21183C
button.foreground#74819B
button.hoverBackground#382B5F
debugToolBar.background#0b1015
dropdown.background#0b1015
dropdown.border#18222D
editor.background#0b1015
editor.findMatchBackground#18222D
editor.foreground#c7d0d9
editor.lineHighlightBackground#1a132f
editor.lineHighlightBorder#1a132f
editor.selectionBackground#18222D
editorActiveLineNumber.foreground#D6BBFC
editorBracketMatch.border#74819B
editorCursor.foreground#ffffff
editorGroup.background#0b1015
editorGroup.border#D6BBFC
editorGroupHeader.noTabsBackground#0b1015
editorGroupHeader.tabsBackground#0b1015
editorGutter.addedBackground#98c378
editorGutter.deletedBackground#EF596F
editorGutter.modifiedBackground#e5c07b
editorHoverWidget.background#0b1015
editorIndentGuide.background#18222D
editorLineNumber.foreground#382B5F
editorOverviewRuler.border#0b1015
editorRuler.foreground#18222D
editorSuggestWidget.background#0b1015
editorSuggestWidget.selectedBackground#18222D
editorWhitespace.foreground#18222D
editorWidget.background#0b1015
focusBorder#74819B
foreground#74819B
gitDecoration.conflictingResourceForeground#d55fde
gitDecoration.deletedResourceForeground#EF596F
gitDecoration.ignoredResourceForeground#00B7C9
gitDecoration.modifiedResourceForeground#f7f308
gitDecoration.untrackedResourceForeground#11eb73
input.background#0b1015
input.border#18222D
list.activeSelectionBackground#0b1015
list.activeSelectionForeg round#ffffff
list.focusBackground#18222D
list.focusForeground#ffffff
list.highlightForeground#ffffff
list.hoverBackground#18222D
list.hoverForeground#ffffff
list.inactiveSelectionBackground#0b1015
list.inactiveSelectionForeground#ffffff
notificationCenterHeader.background#18222D
notificationCenterHeader.foreground#eeeeee
notifications.background#18222D
notifications.border#18222D
notifications.foreground#eeeeee
notificationToast.border#18222D
panel.background#0b1015
panel.border#18222D
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#74819B
peekView.border#18222D
peekViewEditor.background#18222D
peekViewResult.background#18222D
peekViewResult.selectionBackground#18222D
peekViewTitle.background#18222D
peekViewTitleLabel.foreground#ffffff
progressBar.background#A779E9
scrollbar.shadow#00000026
scrollbarSlider.background#18222D
scrollbarSlider.hoverBackground#22303Eff
sideBar.background#0b1015
sideBar.border#21183C
sideBarSectionHeader.background#0b1015
sideBarSectionHeader.foreground#FFFFFF
statusBar.background#0b1015
statusBar.debuggingBackground#0b1015
statusBar.foreground#74819B
tab.activeBackground#21183C
tab.activeBorder#794ACF
tab.activeForeground#ffffff
tab.border#0b1015
tab.hoverBackground#18222D
tab.inactiveBackground#0b1015
tab.inactiveForeground#74819B
tab.unfocusedActiveBorder#0b1015
titleBar.activeBackground#21183C
titleBar.inactiveForeground#0b1015
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#eff0eb	—
keyword.control	#D96585	italic
strong, markup.bold	—	bold
emphasis, markup.italic	—	italic
markup.underline	—	underline
comment, punctuation.definition.comment, string.quoted.docstring	#4c4d4d	italic
storage.type.class.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc	#4c4d4d	italic
storage.type	#f3f99d	italic
storage.type.primitive, support.type, entity.name.type, keyword.type, keyword.other.unit	#9aedfe	—
string, meta.structure.dictionary.json string.quoted.double.json	#b8bb26ff	italic
constant.language.boolean	#5af78e	—
constant.numeric, support.constant	#5af78e	—
constant.language.null	#5af78e	—
constant.language.undefined	#5af78e	—
meta.function entity.name.function	#57c7ff	—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.require, variable.language.super, keyword.other.get, keyword.other.set	#57c7ff	—
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function	#eff0eb	—
variable.other.constant.property	#f3f99d	—
constant.character.escape, constant.other	#ffd3d9	—
entity.name.type.class	#ff5c57	—
entity.other.inherited-class entity.name.type.module	#ff5c57	italic
variable.object.property	#f3f99d	—
variable.parameter	—	normal
meta.definition.method entity.name.function	#f3f99d	—
keyword, modifier, storage.modifier, support.type.object, constant.language, variable.language.this, variable.language.special.self	#ff6ac1	—
storage.modifier, storage.type.class.js, variable.language.this, variable.language.this.js	—	italic
support.module, support.node	#ff5c57	italic
template.expression.begin, template.expression.end	#ff6ac1	—
support.type.exception	#f3f99d	—
markup.inserted.diff, meta.diff.header.to-file	#5af78e	—
markup.deleted.diff, meta.diff.header.from-file	#ff5c57	—
source.cs meta.class.identifier storage.type	#ff5c57	—
source.cs meta.method.identifier entity.name.function	#f3f99d	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#57c7ff	—
source.cs storage.type	#f3f99d	—
source.cs meta.method.return-type	#9aedfe	—
source.cs meta.preprocessor	#616263	—
source.cs entity.name.type.namespace	#eff0eb	—
entity.other.attribute-name.class	#9aedfe	—
entity.other.attribute-name.id	#9aedfe	—
source.css entity.name.tag	#f3f99d	—
source.css support.type.property-name	#ff5c57	—
meta.tag, punctuation.definition.tag	#eff0eb	—
entity.name.tag	#ff5c57	—
entity.other.attribute-name	#f3f99d	italic
punctuation.section.embedded	#ff5c57	—
keyword.other.definition.ini	#ff5c57	—
entity.name.section.group-title.ini	#57c7ff	—
source.java storage.modifier.package, source.java storage.modifier.import	#eff0eb	—
source.java storage.type.annotation	#ff5c57	italic
source.java meta.method-call meta.method	#57c7ff	—
source.java meta.method-call meta.inner-class meta.method	#eff0eb	—
source.java meta.method-call meta.inner-class meta.method meta.method-call meta.method	#57c7ff	—
source.java meta.definition.variable entity.name.function	#57c7ff	—
source.java constant.language	#5af78e	—
source.js storage.modifier.async	#ff6ac1	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#ff5c57	—
constant.language.json	#ff6ac1	—
markup.heading	#57c7ff	—
text.html.markdown meta.link.inline, meta.link.reference, markup.underline.link.image	#ff5c57	—
text.html.markdown markup.quote	#9aedfe	—
text.html.markdown beginning.punctuation.definition.list	#f3f99d	—
text.html.markdown markup.inline.raw	#ff6ac1	—
markup.italic	#ff5c57	italic
markup.bold	#ff5c57	bold
markup.bold markup.italic, markup.italic markup.bold	#ff5c57	italic bold
source.python keyword.operator.arithmetic	#eff0eb	—
source.python meta.function storage.type.function	#ff6ac1	—
source.python meta.function-call.arguments	#eff0eb	—
source.python meta.function entity.name.function.decorator	#ff5c57	—
source.python constant.language	#5af78e	—
entity.name.tag.yaml	#ff5c57	—
storage.type	#F9CB63	—
punctuation.definition.tag	#943431	—
variable.function	#C95297	—
variable.parameter.function	#AC8C44	—
keyword.operator.module	#848BB2	—
variable	—	—
string.unquoted.label	#5AC143	—
punctuation.separator.key-value.js	#428D30	—
meta.brace.curly.begin.js, meta.brace.curly.end.js, meta.brace.round.begin.js, meta.brace.round.end.js, meta.brace.square.begin.js, meta.brace.square.end.js	#999999	—
string.interpolated.js	—	—

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