JSFiddle Pro

Name: JSFiddle Pro
Author: SandAngel

Publisher: SandAngelThemes in package: 1

A new Light Theme inspired by JSFiddle syntax color.

Open in VS Code GitHub

VS Code preview

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

JSFiddle Pro — JSFiddle Pro

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#EDEDF5
activityBar.foreground#705697
activityBarBadge.background#705697
badge.background#705697AA
button.background#705697
dropdown.background#F5F5F5
editor.background#F5F5F5
editor.findMatchBackground#BF9CAC
editor.findMatchHighlightBackground#edc9d8
editor.lineHighlightBackground#a69fe941
editor.selectionBackground#d7d4f0f1
editor.selectionHighlightBackground#d7d4f081
editor.wordHighlightBackground#d7d4f081
editor.wordHighlightStrongBackground#d7d4f0f1
editorBracketMatch.background#F5F5F5
editorBracketMatch.border#9769dc
editorCursor.foreground#54494B
editorGroup.dropBackground#C9D0D988
editorLineNumber.activeForeground#9769dc
editorLineNumber.foreground#9DA39A
editorWhitespace.foreground#AAAAAA
errorForeground#f1897f
focusBorder#705697AA
inputOption.activeBorder#adafb7
inputValidation.errorBackground#ffeaea
inputValidation.errorBorder#f1897f
inputValidation.infoBackground#f2fcff
inputValidation.infoBorder#4ec1e5
inputValidation.warningBackground#fffee2
inputValidation.warningBorder#ffe055
list.activeSelectionBackground#a69fe96c
list.activeSelectionForeground#6c6c6c
list.focusBackground#d7d4f0f1
list.highlightForeground#9769dc
list.hoverBackground#a69fe928
list.inactiveSelectionBackground#a69fe941
panel.background#F5F5F5
peekView.border#705697
peekViewEditor.background#F2F8FC
peekViewEditor.matchHighlightBackground#C2DFE3
peekViewResult.background#F2F8FC
peekViewResult.matchHighlightBackground#93C6D6
peekViewTitle.background#F2F8FC
pickerGroup.border#705697
pickerGroup.foreground#705697AA
progressBar.background#705697
scrollbarSlider.background#d7d4f0f1
selection.background#d7d4f0f1
sideBar.background#F2F2F2
sideBarSectionHeader.background#ede8ef
statusBar.background#705697
statusBar.debuggingBackground#9769dc
statusBar.noFolderBackground#705697
titleBar.activeBackground#a69fe941

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
text.html, text.xml, source, variable.other.member, entity.name.type.module, support.type.property-name, variable.other.object.property, variable.other.object, variable.object.property, variable.other.readwrite, variable.parameter, punctuation.decorator	#39464E
comment, punctuation.definition.comment	#969896
entity.name.tag, entity.name.namespace, entity.name.function, markup.underline, entity.name.label, entity.name.constant, variable.other.constant, punctuation.definition.variable, meta.selector, support.function, support.variable.property, variable.other.property, variable.function	#2795EE
constant.language, support.constant, support.variable, support.type.builtin, support.type.primitive, constant.other.color	#221199
keyword, markup.italic, storage.type, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.jsx, storage.modifier	#a151d2	italic
entity.other.attribute-name, markup.bold, entity.other.inherited-class, constant.character.escape, constant.other.placeholder, entity.name, entity.name.class, entity.name.class.forward-decl, entity.name.type, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, support.class, support.type, entity.name.section, markup.heading, variable.other.readwrite.alias, punctuation.definition.template-expression	#f18c16
string, markup.quote, punctuation.definition.typeparameters, variable.parameter.graphql	#249D7F
constant.numeric, keyword.operator, invalid, punctuation.or, variable.language	#ED5C65

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