Pastel

Name: Pastel
Author: Chris Valente

Publisher: Chris ValenteThemes in package: 1

For those who aren't afraid to get colourful

GitHub

VS Code preview

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

Pastel — Pastel

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#0E0F13
activityBar.foreground#AA93DD
activityBarBadge.background#DF8598
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#BBBBBB
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#0b0c0f
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#1b1c25
dropdown.listBackground#2E303E
editor.background#0b0c0f
editor.findMatchBackground#6C6F9380
editor.findMatchHighlightBackground#6C6F934D
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.lineHighlightBackground#2E303E4D
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#2E303EB3
editor.selectionHighlightBackground#6C6F934D
editor.wordHighlightBackground#6C6F9380
editor.wordHighlightStrongBackground#6C6F9380
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#0b0c0f
editorCursor.foreground#DF8598
editorError.foreground#AFCBFF
editorGroup.border#22252e
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#0b0c0f
editorGutter.addedBackground#df8599b2
editorGutter.deletedBackground#afcbffe7
editorGutter.modifiedBackground#df8599b2
editorIndentGuide.activeBackground#2E303E
editorIndentGuide.background#2E303E80
editorLineNumber.activeForeground#afcbffe7
editorLineNumber.foreground#aa93dd9c
editorOverviewRuler.addedForeground#AFCBFF
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#BBBBBB80
editorOverviewRuler.deletedForeground#DF8598
editorOverviewRuler.errorForeground#DF8598
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#AFCBFF
editorOverviewRuler.warningForeground#AFCBFF
editorRuler.foreground#6C6F934D
editorSuggestWidget.background#0E0F13
editorSuggestWidget.highlightForeground#DF8598
editorWarning.foreground#AFCBFF
editorWidget.background#1b1c25
editorWidget.border#1b1c25
errorForeground#DF8598
extensionButton.prominentBackground#DF8598
extensionButton.prominentHoverBackground#DF8598
focusBorder#22252e
foreground#BBBBBB
gitDecoration.addedResourceForeground#afcbffc9
gitDecoration.deletedResourceForeground#AA93DD
gitDecoration.ignoredResourceForeground#aa93dd6b
gitDecoration.modifiedResourceForeground#DF8598
gitDecoration.untrackedResourceForeground#ffffffa1
input.background#2E303E
inputOption.activeBorder#DF8598
inputValidation.errorBackground#DF8598
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#2E303E80
list.activeSelectionForeground#BBBBBB
list.dropBackground#6C6F9380
list.errorForeground#DF8598
list.focusBackground#2E303E80
list.focusForeground#BBBBBB
list.highlightForeground#DF8598
list.hoverBackground#2E303E80
list.hoverForeground#BBBBBB
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#BBBBBB
list.warningForeground#df8599e0
notifications.background#14151B
panelTitle.activeBorder#DF8598
peekView.border#1A1C23
peekViewEditor.background#1b1c25
peekViewEditor.matchHighlightBackground#6C6F9380
peekViewResult.background#1b1c25
peekViewResult.matchHighlightBackground#6C6F9380
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#1b1c25
pickerGroup.foreground#DF8598E6
progressBar.background#DF8598
quickInput.background#0b0c0f
quickInput.foreground#ffffffa1
quickInputList.focusForeground#ffffffa1
quickInputList.focusIconForeground#DF8598
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#6C6F9380
scrollbarSlider.background#6C6F931A
scrollbarSlider.hoverBackground#6C6F934D
selection.background#6C6F9380
sideBar.background#0E0F13
sideBar.dropBackground#6C6F934D
sideBar.foreground#aa93ddc7
sideBarSectionHeader.background#0E0F13
sideBarSectionHeader.foreground#BBBBBB
statusBar.background#AA93DD
statusBar.debuggingBackground#DF8598
statusBar.debuggingForeground#06060C
statusBar.foreground#06060C
statusBar.noFolderBackground#0b0c0f
statusBarItem.hoverBackground#2E303E
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#DF8598
tab.border#1C1E2600
tab.inactiveBackground#0b0c0f
terminal.ansiBlue#AA93DD
terminal.ansiBrightBlue#AFCBFF
terminal.ansiBrightCyan#AFCBFF
terminal.ansiBrightGreen#AFCBFF
terminal.ansiBrightMagenta#DF8598
terminal.ansiBrightRed#DF8598
terminal.ansiBrightYellow#AA93DD
terminal.ansiCyan#AFCBFF
terminal.ansiGreen#AFCBFF
terminal.ansiMagenta#DF8598
terminal.ansiRed#DF8598
terminal.ansiYellow#AA93DD
terminal.foreground#BBBBBB
terminal.selectionBackground#6C6F934D
terminalCursor.background#BBBBBB
terminalCursor.foreground#AA93DD
textLink.activeForeground#DF8598
textLink.foreground#AA93DD
titleBar.activeBackground#0b0c0f
titleBar.inactiveBackground#0b0c0f
walkThrough.embeddedEditorBackground#1b1c25
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.quoted.docstring	#BBBBBB	italic
constant	#DF8598	—
constant.character.escape	#AFCBFF	—
entity.name	#AFCBFF	—
entity.name.function	#AFCBFF	—
entity.name.tag	#AA93DD	—
entity.name.type, storage.type.cs	#DF8598	—
entity.other.attribute-name	#afcbff	italic
entity.other.inherited-class	#DF8598	—
entity.other.attribute-name.id	#DF8598	—
entity.name.function.operator.member.cpp, entity.name.function.operator.cpp, keyword.operator.bitwise.shift.cpp	#BBBBBB	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#DF8598	—
entity.name.variable, variable	#DF8598	—
keyword	#DF8598	—
keyword.operator, storage.type.function.arrow.js, meta.brace.round.js, meta.brace.square.js	#BBBBBB	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.control.directive, constant.other.placeholder.c	#AFCBFF	—
keyword.other.unit	#DF8598	—
markup.quote	#AFCBFF	italic
markup.heading, entity.name.section	#DF8598	—
markup.bold	#DF8598	bold
markup.italic	#AFCBFF	italic
markup.inline.raw, markup.fenced_code.block, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown	#AFCBFF	—
markup.underline.link	#AFCBFF	italic
storage	#AA93DD	—
string.quoted, string.template, variable.parameter.function.language.special.self.python	#DF8598	—
string.regexp	#DF8598	—
string.other.link	#DF8598	—
support	#DF8598	—
support.function	#AFCBFF	—
support.variable	#AFCBFF	—
support.type.property-name, meta.object-literal.key, variable.parameter.js	#AA93DD	—
support.type.property-name.css	#AA93DD	—
variable.language	#AA93DD	italic
variable.parameter	#AFCBFF	—
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag	#DF8598	—
punctuation.separator	#BBBBBB	bold
punctuation.definition.template-expression	#AFCBFF	—
punctuation, punctuation.separator.delimiter.comma.cpp, keyword.control.ternary.java	#BBBBBB
punctuation.definition.list	#BBBBBB	—
meta.function-call.generic, support.type.python, keyword.control, constant.other.caps.python, variable.language.special.self.python, keyword.operator.logical.python	#AFCBFF	—
source.python	#AA93DD	—
keyword.operator.logical	#AA93DD	—
support.variable.magic.python	#AA93DD	—
entity.name.type.cpp, entity.name.type.c, storage.type.built-in.c	#AA93DD	—
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp, variable.other.global.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.directive.cpp, keyword.control.c	#AFCBFF	—
support.type.python	#AA93DD	—
keyword.control.flow.js, keyword.control.conditional.js, keyword.control.loop.js, variable.language.this.js	#AFCBFF	—
support.type.primitive.ts, support.class.component.js	#AA93DD	—

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