Ariake Sands

Name: Ariake Sands
Author: Finn James

Publisher: Finn JamesThemes in package: 2

Ariake based dark theme for Mojave

Open in VS Code GitHub

Color themes

VS Code preview

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

Ariake Sands — Ariake Sands

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#1f1f1f
activityBar.foreground#C2C6D687
activityBarBadge.background#85B6C8
activityBarBadge.foreground#242424
debugToolBar.background#242424
debugToolBar.border#85B6C8
diffEditor.insertedTextBackground#78BBB723
diffEditor.removedTextBackground#ED5C932a
dropdown.background#1f1f1f
editor.background#242424
editor.findMatchBackground#C2C6D644
editor.findMatchHighlightBackground#C2C6D622
editor.foreground#C2C6D6
editor.lineHighlightBackground#65656530
editor.selectionBackground#4f4f4f
editor.selectionHighlightBorder#B8E0EF
editorCursor.foreground#C2C6D6
editorGroup.dropBackground#1f1f1f
editorGroupHeader.tabsBackground#1f1f1f
editorGutter.addedBackground#78BBB7
editorGutter.deletedBackground#ED5C93
editorGutter.modifiedBackground#85B6C8
editorHoverWidget.background#232323
editorHoverWidget.border#343434
editorIndentGuide.background#3b3b3b
editorWhitespace.foreground#656565
editorWidget.background#232323
gitDecoration.conflictingResourceForeground#F1487B87
gitDecoration.deletedResourceForeground#B081C587
gitDecoration.ignoredResourceForeground#C2C6D677
gitDecoration.modifiedResourceForeground#85B6C887
gitDecoration.untrackedResourceForeground#78BBB787
input.background#1f1f1f
input.foreground#C2C6D6
inputValidation.infoForeground#ED5C93
list.activeSelectionBackground#343434
list.focusBackground#343434
list.hoverBackground#1f1f1f
list.inactiveSelectionBackground#343434
sideBar.background#1f1f1f
sideBarSectionHeader.background#1f1f1f
statusBar.background#1f1f1f
statusBar.debuggingBackground#85B6C8
statusBar.debuggingForeground#242424
statusBar.foreground#4f4f4f
statusBar.noFolderBackground#B8E0EF
statusBar.noFolderForeground#242424
tab.border#1f1f1f
tab.inactiveBackground#1f1f1f
tab.inactiveForeground#656565
terminal.ansiBlack#677989
terminal.ansiBlue#85B6C8
terminal.ansiBrightBlack#677989
terminal.ansiBrightBlue#B8E0EF
terminal.ansiBrightCyan#D3B2FF
terminal.ansiBrightGreen#9AEFEA
terminal.ansiBrightMagenta#DDA3F7
terminal.ansiBrightRed#F993BA
terminal.ansiBrightWhite#F4FAFF
terminal.ansiBrightYellow#ABBFF2
terminal.ansiCyan#B084EB
terminal.ansiGreen#78BBB7
terminal.ansiMagenta#B081C5
terminal.ansiRed#ED5C93
terminal.ansiWhite#F4FAFF
terminal.ansiYellow#7E99DD
terminal.background#242424
terminal.border#80808059
terminal.foreground#C2C6D6
terminal.selectionBackground#C2C6D646
titleBar.activeBackground#1f1f1f
titleBar.inactiveBackground#1f1f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#677989	—
entity.name.type	#ABBFF2	—
entity.other.inherited-class	#9AEFEA	—
keyword	#7E99DD	—
keyword.control	#7E99DD	—
keyword.operator	#C2C6D6	—
keyword.other.special-method	#F4FCFF	—
keyword.other.unit	#dda2f6	—
storage	#7E99DD	—
storage.type.annotation	#7E99DD	—
storage.type.primitive	#7E99DD	—
storage.modifier.package	#C2C6D6	—
storage.modifier.import	#C2C6D6	—
constant	#dda2f6	—
constant.variable	#DDA2F6	—
constant.character.escape	#B8E0EF	—
constant.numeric	#dda2f6	—
constant.other.color	#B8E0EF	—
constant.other.symbol	#B8E0EF	—
variable	#85b1e0	—
variable.interpolation	#4d8acb	—
variable.parameter	#C2C6D6	—
string	#9aefea	—
string.regexp	#B8E0EF	—
string.regexp source.ruby.embedded	#ABBFF2	—
punctuation.definition.comment	#677989	—
punctuation.definition.method-parameters punctuation.definition.function-parameters punctuation.definition.parameters punctuation.definition.separator punctuation.definition.seperator punctuation.definition.array	#C2C6D6	—
punctuation.definition.heading, punctuation.definition.identity	#F4FCFF	—
punctuation.definition.bold	#ABBFF2	bold
punctuation.definition.italic	#7E99DD	italic
punctuation.section.embedded	#4d8acb	—
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class	#C2C6D6	—
support.class	#ABBFF2	—
support.type	#B8E0EF	—
support.function	#B8E0EF	—
support.function.any-method	#F4FCFF	—
entity.name.function	#F4FCFF	—
entity.name.class, entity.name.type.class	#ABBFF2	—
entity.name.section	#F4FCFF	—
entity.name.tag	#85b1e0	—
entity.other.attribute-name	#dda2f6	—
entity.other.attribute-name.id	#F4FCFF	—
meta.class.body	#C2C6D6	—
meta.method-call, meta.method	#C2C6D6	—
meta.definition.variable	#85b1e0	—
meta.link	#dda2f6	—
meta.require	#F4FCFF	—
meta.selector	#7E99DD	—
meta.separator	#C2C6D6	—
meta.tag	#C2C6D6	—
underline	—	underline
none	#C2C6D6	—
invalid.deprecated	#523D14	—
invalid.illegal	#ffffff	—
markup.bold	#C2C6D6	bold
markup.changed	#7E99DD	—
markup.deleted	#85b1e0	—
markup.italic	#C2C6D6	italic
markup.heading	#85b1e0	—
markup.heading punctuation.definition.heading	#F4FCFF	—
markup.link	#7E99DD	—
markup.inserted	#9aefea	—
markup.quote	#dda2f6	—
markup.raw	#9aefea	—
source.cs keyword.operator	#7E99DD	—
source.css property-name, source.css property-value	#7d839b	—
source.css property-name.support, source.css property-value.support	#C2C6D6	—
source.gfm link entity	#F4FCFF	—
source.go storage.type.string	#7E99DD	—
source.ini keyword.other.definition.ini	#85b1e0	—
source.java storage.modifier.import	#ABBFF2	—
source.java storage.type	#ABBFF2	—
source.java keyword.operator.instanceof	#7E99DD	—
source.java-properties meta.key-pair	#85b1e0	—
source.js keyword.operator	#B8E0EF	—
source.js keyword.operator.js, source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void	#7E99DD	—
source.ruby constant.other.symbol punctuation	#B8E0EF	—
source.python keyword.operator.logical.python	#7E99DD	—
source.python variable.parameter	#dda2f6	—
source.java-properties meta.key-pair punctuation	#C2C6D6	—
source.json meta.structure.dictionary.json string.quoted.json	#85b1e0	—
source.json meta.structure.dictionary.json string.quoted.json punctuation.string	#85B1E0	—
source.json meta.structure.dictionary.json value.json string.quoted.json, source.json meta.structure.array.json value.json string.quoted.json, source.json meta.structure.dictionary.json value.json string.quoted.json punctuation, source.json meta.structure.array.json value.json string.quoted.json punctuation	#9aefea	—
source.json meta.structure.dictionary.json constant.language.json, source.json meta.structure.array.json constant.language.json	#B8E0EF	—
token.info-token	#6796e6	—
token.warn-token	#f148be	—
token.error-token	#F1487B	—
token.debug-token	#b267e6	—
entity.name.tag.html	#85B6C8	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#85B6C8a0	—

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