atomic-skittles

Name: atomic-skittles
Author: MikeRoof

Publisher: MikeRoofThemes in package: 1

Code the rainbow

VS Code preview

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

atomic-skittles — Atomic Skittles

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#424242
activityBar.foreground#c8ddfc
activityBarBadge.background#ae81ff
activityBarBadge.foreground#101119
badge.background#6d57ffbb
badge.foreground#c8ddfcbb
button.background#ae81ff7b
button.hoverBackground#ae81ff3b
debugToolBar.background#101119
dropdown.background#0d0e14
dropdown.border#292a32
editor.background#242424
editor.findMatchHighlightBackground#314365
editor.findRangeHighlightBackground#8a78fe
editor.foreground#aab1c0
editor.hoverHighlightBackground#42557bab
editor.lineHighlightBackground#101119
editor.rangeHighlightBackground#39336870
editor.selectionBackground#314365
editorActiveLineNumber.foreground#c8ddfc9a
editorBracketMatch.background#ae81ff20
editorBracketMatch.border#6d57ff
editorCursor.foreground#ffcc00
editorGroup.border#292a32
editorGroup.dropBackground#ae81ff3b
editorGroupHeader.tabsBackground#222330
editorHoverWidget.background#0d0e14
editorHoverWidget.border#292a32
editorIndentGuide.background#5c637030
editorLineNumber.foreground#5c637050
editorLink.activeForeground#ffcc00ab
editorRuler.foreground#5c637060
editorSuggestWidget.background#0d0e14
editorSuggestWidget.border#292a32
editorSuggestWidget.selectedBackground#abb1ba1b
editorWhitespace.foreground#5c637030
editorWidget.background#222330
editorWidget.border#6d57ff7b
focusBorder#ae81ff6b
input.background#0d0e14
input.foreground#c8ddfcdc
input.placeholderForeground#c8ddfc5b
inputOption.activeBorder#8a78fe
inputValidation.errorBackground#830c37
inputValidation.errorBorder#e50a69
inputValidation.infoBackground#161821
inputValidation.infoBorder#ae81ff6b
list.activeSelectionBackground#ae81ff1b
list.activeSelectionForeground#c8ddfc
list.focusBackground#ae81ff3b
list.highlightForeground#8a78fe
list.hoverBackground#ae81ff3b
list.inactiveSelectionBackground#ae81ff1b
list.inactiveSelectionForeground#c8ddfcab
panel.border#292a32ab
panelTitle.activeBorder#ae81ffab
peekView.border#ae81ffab
peekViewEditor.background#202232
peekViewEditor.matchHighlightBackground#314365
peekViewResult.background#101119
peekViewResult.matchHighlightBackground#8a78feab
peekViewResult.selectionBackground#ae81ff3b
peekViewTitle.background#101119
pickerGroup.border#ae81ff6b
pickerGroup.foreground#c8ddfcbb
progressBar.background#8a78fe
scrollbarSlider.activeBackground#ae81ff7b
scrollbarSlider.background#ae81ff1b
scrollbarSlider.hoverBackground#ae81ff3b
sideBar.background#0f0f0f
sideBar.foreground#e4e4e4c9
sideBarTitle.foreground#a6b2c0
statusBar.background#101119
statusBar.debuggingBackground#314365
statusBar.foreground#c8ddfc9a
statusBar.noFolderBackground#473c9b
statusBarItem.activeBackground#473c9b
statusBarItem.hoverBackground#463c9b96
tab.activeBorder#8a78feab
tab.activeForeground#f8fbffbb
tab.border#1618217a
tab.inactiveBackground#3f3f3fab
tab.inactiveForeground#acacacab
tab.unfocusedActiveBorder#ae81ff50
textLink.activeForeground#6d57ff
textLink.foreground#8a78fe
titleBar.activeBackground#101119
titleBar.activeForeground#abb1baab
titleBar.inactiveBackground#161821
titleBar.inactiveForeground#abb1baab
widget.shadow#0f1014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.other.attribute-name.id.html, entity.name.tag.html, keyword.control.conditional, support.class, variable.other.object, variable.other.property, variable.other.object.property, keyword.control.import, keyword.control.from, storage.type.function	#ADFA72	—
keyword.other.unit.px.css, keyword.control.trycatch	#EF4040	—
variable.language.this.php, variable.other.php, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, meta.object-literal.key, variable.other.readwrite.alias, variable.other.readwrite, entity.name.type.class	#5FA9FA	—
string.template, string.quoted, string.quoted.single	#F1FF5F	—
support.other.namespace.php, support.type.property-name.css, entity.name.type, support.function, entity.name.function, storage.type.interface, storage.type.type	#FF9D00	—
constant.numeric, constant.numeric.decimal, storage.type	#55F1FF	—
variable.other.constant, variable.other.constant.property, constant.language.null, support.constant.property-value.css, constant.language.boolean, constant.language.json	#BB55FF	—
support.type.property-name.json, keyword.operator.ternary, keyword.operator.relational, keyword.control.if.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, keyword.operator.class.php, text.html.basic, keyword.operator.comparison, keyword.control.export, keyword.control.default, punctuation.accessor, punctuation.separator.comma, punctuation.terminator.statement, keyword.operator.logical, keyword.operator.new, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.definition.block, keyword.operator.assignment, punctuation.definition.parameters, punctuation.separator.key-value	#FFFFFF	—
entity.name.tag.yaml, string.regexp, keyword.control.switch, support.type.object.module, keyword.operator.expression.typeof, keyword.operator.expression.in, keyword.control.loop, keyword.control.exit.php, keyword.control.return.php, storage.modifier.php, storage.modifier.extends.php, keyword.other.use.php, support.variable, support.variable.property, keyword.control.flow, variable.language.this	#9EF75B	—
string.unquoted.plain.out.yaml, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.name.tag.css, variable.parameter	#F28C9F	—
token.info-token, meta.definition.property, entity.other.inherited-class, entity.other.attribute-name.html	#6796E6	—
token.warn-token	#CD9731	—
token.error-token, storage.modifier.async	#F44747	—
token.debug-token	#B267E6	—
entity.name.type, support.type.primitive	#6dc3e6	—
keyword.control.rust, keyword.other.rust, storage.modifier.rust, storage.type.rust	#9EF75B	—
entity.name.function.rust, entity.name.function.macro.rust	#FF9D00	—
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.union.rust	#6dc3e6	—
string.quoted.double.rust, string.quoted.single.rust, string.quoted.raw.rust	#F1FF5F	—
constant.numeric.rust, constant.numeric.integer.rust, constant.numeric.float.rust	#55F1FF	—
constant.language.rust, constant.language.boolean.rust	#BB55FF	—
variable.other.rust, variable.parameter.rust	#5FA9FA	—
support.macro.rust, entity.name.function.macro.rules.rust	#ADFA72	—
storage.type.core.rust, support.type.primitive.rust, entity.name.type.primitive.rust	#55F1FF	—
entity.name.module.rust, entity.name.namespace.rust	#F28C9F	—
storage.modifier.visibility.rust, keyword.other.crate.rust, keyword.other.self.rust, keyword.other.super.rust	#9EF75B	—
meta.attribute.rust, entity.name.function.attribute.rust	#6796E6	—
comment.line.double-slash.rust, comment.block.rust	#5c6370	italic
keyword.operator.rust, punctuation.separator.rust, punctuation.definition.rust	#FFFFFF	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#EF4040	—
variable.language.self.rust	#BB55FF	—
support.constant.core.rust	#BB55FF	—
entity.name.type.option.rust, entity.name.type.result.rust	#6dc3e6	—

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