Atlantic Night

Name: Atlantic Night
Author: mrpbennett

Publisher: mrpbennettThemes in package: 2

VSC theme inspired by the deep blues of the Atlantic

GitHub

Color themes

VS Code preview

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

Atlantic Night — Atlantic Night - Abyss

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#00010A
activityBar.foreground#5D81B3
activityBarBadge.background#5D81B3
activityBarBadge.foreground#00010A
button.background#3D3199
button.foreground#dadfe1
button.hoverBackground#995b31
editor.background#00010A
editor.foreground#dadfe1
editor.lineHighlightBorder#00010A
editor.selectionBackground#396cb335
editor.wordHighlightBackground#396cb335
editorGroup.border#232b4e
editorGroup.dropBackground#00010A
editorGroupHeader.tabsBackground#00010A
editorGutter.addedBackground#5ac95a
editorGutter.deletedBackground#f64747
editorGutter.modifiedBackground#daa520
editorLineNumber.activeForeground#6ba9ff
editorLineNumber.foreground#5c6b80
input.background#396cb335
input.foreground#dadfe1
list.activeSelectionBackground#1c2341
list.activeSelectionForeground#dadfe1
list.focusBackground#396cb335
list.focusForeground#5c6b80
list.hoverBackground#396cb335
list.hoverForeground#dadfe1
list.inactiveSelectionBackground#1c2341
list.inactiveSelectionForeground#dadfe1
minimap.findMatchHighlight#396cb335
minimap.selectionHighlight#396cb335
sideBar.background#00010A
sideBar.border#1b213b
sideBar.foreground#5c6b80
sideBarSectionHeader.background#00010A
sideBarSectionHeader.border#5c6b80
sideBarSectionHeader.foreground#5c6b80
sideBarTitle.foreground#5c6b80
statusBar.background#101425
statusBar.debuggingBackground#101425
statusBar.debuggingForeground#6287bb
statusBar.foreground#6287bb
statusBar.noFolderBackground#101425
statusBar.noFolderForeground#6287bb
tab.activeBackground#1c2341
tab.activeForeground#8c9db4
tab.inactiveBackground#0e1224
tab.inactiveForeground#5c6b80
tab.unfocusedActiveBackground#1a203b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.other.attribute-name, entity.name.function, support.function.any-method, entity.name.tag.css, entity.other.inherited-class.js, keyword.control.loop.js, support.function.console.js, support.function.math.js, support.variable.property.process.js, storage.type.js, variable.other.constant.js, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, string.quoted.double.json, markup.underline.link.markdown, meta.function-call.generic.python, meta.function-call.arguments.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, support.function.builtin.python, keyword.control.loop.swift, keyword.other.sql, keyword.other.DML.sql, keyword.other.LUW.sql, keyword.other.create.sql	#19b5fe	—
heading, support.type, punctuation.definition.decorator, keyword.control.at-rule.media.css, keyword.operator.logical.and.media.css, entity.other.attribute-name.class.css, entity.name.type.js, variable.parameter.js, punctuation.definition.heading.markdown, variable.parameter.function.language.python, support.function.builtin.python, meta.item-access.arguments.python, entity.name.function.decorator.python, support.function.conversion.sql, support.function.datetime.sql, variable.parameter.ts, variable.parameter.tsx	#2ECC32	—
comment, string.quoted.docstring.multi.python	#6B8080	—
source.python, source.js, source.css, source.tsx, source.json, source.swift, text.html.derivative, variable.other.readwrite, variable.other.readwrite.js, variable.other.constant.js, keyword.operator.comparison.python	#D6DEEB	—
keyword.control.import, keyword.control.from, keyword.control.conditional, entity.name.tag, punctuation.definition.tag, support.type.property-name.css, meta.object-literal.key.js, support.class.console.js, support.constant.math.js, support.function.js, variable.other.object.property.js, variable.other.property.js, keyword.control.import.python, meta.object-literal.key.ts, meta.object-literal.key.tsx, variable.graphql	#5B80A6	—
constant, markup.quote.markdown, string.other.link.title.markdown, constant.numeric.dec.python	#ff8c00	—
keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.comparison, keyword.other.alias.sql, entity.other.attribute-name.id.css, support.constant.media.css, keyword.other.important.css, punctuation.definition.list.begin.markdown, keyword.other.fn.rust, keyword.other.rust, storage.class.std.rust, storage.modifier.mut.rust	#FF75AC	—
storage.type, storage.type.class, storage.type.function, keyword.control.flow, keyword.other.declaration-specifier, keyword.control.at-rule.apply, keyword.control.at-rule.css, variable.other.object.js, support.variable.object.process.js, storage.modifier.js, variable.other.property.js, keyword.control.export.js, keyword.control.default.js, support.class.builtin.js, punctuation.accessor.js, keyword.control.export.ts, keyword.control.default.ts, keyword.control.export.tsx, keyword.control.default.tsx, variable.parameter.graphql	#FF00FF	—
string.quoted, string.template, variable.other.readwrite.alias, support.constant.property-value.css, support.class.component.js, entity.name.type.class.js, entity.name.type.module.js, support.type.property-name.json, string.quoted.single.python, entity.name.type.ts, entity.name.type.class.ts, entity.name.type.tsx, entity.name.type.class.tsx	#81cfe0	—
variable.other.property, variable.other.constant.property.js, variable.other.readwrite.js, variable.language.this.js, punctuation.definition.bold.markdown, entity.name.type.class.python, punctuation.section.class.begin.python, variable.other.readwrite.ts, variable.other.readwrite.tsx	#DEB459	—

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