Spinel Theme

Name: Spinel Theme
Author: misteregis

Publisher: misteregisThemes in package: 2

Standalone Spinel and Spinel Light themes from Shopify's Ruby extension pack, without Ruby LSP or Sorbet.

Open in VS Code

Color themes

VS Code preview

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

Spinel Theme — Spinel

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.

breadcrumb.activeSelectionForeground#d2cdf2
breadcrumb.background#404040
breadcrumb.foreground#d1ccf1
editor.background#2f2f2f
editor.foreground#d1ccf1
editor.lineHighlightBackground#3b3b3b
editor.selectionBackground#4b4b4b
editorCursor.background#404040
editorCursor.foreground#d1ccf1
editorIndentGuide.activeBackground#d1ccf1
editorLineNumber.activeForeground#d2cdf2
notifications.border#404040
notificationToast.border#404040
panel.border#404040
panelTitle.activeBorder#d1ccf1
sideBar.background#282828
sideBar.border#404040
sideBarSectionHeader.border#404040
statusBar.background#333333
statusBar.border#404040
tab.activeBackground#4b4b4b
tab.activeBorder#d1ccf1
tab.activeForeground#d2cdf2
tab.border#404040
terminal.background#2a2a2a
terminal.border#404040
titleBar.border#404040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation, punctuation.section.embedded, meta.function-call, punctuation.definition.constant.hashkey, keyword.operator.assignment.ruby, entity.name.function.call.cpp, entity.name.function.member.cpp, variable.other.object.property, variable.other.property, meta.brace.round.ts, meta.brace.square.ts, keyword.operator.type.ts, keyword.operator.type.annotation.ts, meta.function-call.ts, keyword.operator.assignment.ts, keyword.operator.relational.ts, keyword.operator.increment.ts, keyword.operator.bitwise.shift.ts, keyword.operator.bitwise.ts, punctuation.separator.key-value.ts, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.bitwise.shift.js, keyword.operator.bitwise.js, variable.other.object.property.js, support.variable.property.js, meta.brace.round.js, meta.brace.square.js, keyword.generator.asterisk.js, keyword.operator.combinator.css, meta.property-name.css, punctuation.definition.constant.css, punctuation.separator.key-value.mapping.yaml, string.unquoted.plain.out.yaml, source.sql, constant.other.table-name.sql, meta.function.call.rust, keyword.operator.key-value.rust, keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.increment.c	#d1ccf1	—
punctuation.definition.comment, comment	#bea17f	italic
comment.line.keyword.yard, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard	#f1cb9f	italic bold
support.function.kernel.ruby, keyword.other, keyword.operator, keyword.control, keyword.other.special-method, punctuation.separator.key-value, variable.language, storage.type.variable, storage.modifier, storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.heading.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.enum.ts, support.constant.media.css, support.constant.property-value.css, support.constant.font-name.css, entity.name.type.primitive.rust, entity.name.type.numeric.rust	#dd5555	—
variable.parameter, constant.other.symbol.hashkey.parameter.function, variable.other, comment.line.parameter.yard, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, entity.other.attribute-name.html, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, constant.other.database-name.sql	#ff9a3b	italic
punctuation.definition.string.begin, punctuation.definition.string.end, string	#5ac16c	—
meta.embedded.line	—
string.regexp, punctuation.section.regexp	#a6cc5f
constant.numeric, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css	#eee385	—
support.class, meta.class, entity.name.type.class.ruby, entity.other.inherited-class.ruby, entity.name.type.module, meta.module.ruby, variable.other.constant, comment.line.type.yard, entity.name.scope-resolution.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.function.call.cpp, markup.heading, constant.other.reference.link.markdown, string.other.link.title.markdown, meta.selector.css, entity.name.namespace.rust, entity.name.type.enum.ts, variable.other.readwrite.alias.ts	#4b82e9
constant.other.symbol.ruby, constant.language.symbol, constant.other.symbol.hashkey.ruby, markup.underline.link.markdown, meta.link.inline.markdown, support.type.property-name.json, meta.object-literal.key.ts, meta.object-literal.key.js, entity.name.tag.html, punctuation.separator.key-value.css, punctuation.terminator.rule.css, entity.name.tag.yaml, constant.other.symbol.hashkey.parameter.function.rbs	#7dcfcf
variable.other.readwrite.class, variable.other.readwrite.instance, punctuation.definition.variable, variable.other.readwrite.global, variable.other.property	#eee0e0
constant.language, variable.language.this	#ed2a88	bold
variable, markup.bold, punctuation.definition.bold.markdown, variable.object.property.ts, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js	#18b5e4
storage.type.ts, support.type.primitive.ts, storage.type.class.ts, storage.type.class.js, storage.type.function.js, storage.type.js, storage.type.function.arrow.js, constant.language.null.js, support.type.builtin.rbs	#dd5555	bold
meta.definition.method, meta.function.method.with-arguments.ruby, meta.function.method.without-arguments.ruby	#d464eb	—
meta.function-call	#d1ccf1	—
meta.attribute.rust	#ce74f8	italic
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff	#18B5E4	italic
markup.deleted, punctuation.definition.deleted.diff	#DD5555
markup.changed	#FF9A3B
markup.inserted, punctuation.definition.inserted.diff	#5AC16C	—