Plastic Slate

Name: Plastic Slate
Author: kayteh

Publisher: kaytehThemes in package: 2

A simple theme with cute colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Plastic Slate — Plastic Slate

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#21252b
activityBar.dropBackground#21252b
activityBar.foreground#efefef
activityBarBadge.background#e2a8bf
activityBarBadge.foreground#264b49
button.background#e2a8bf
contrastBorder#080A0F
debugToolBar.background#181A1F
dropdown.background#181A1F
dropdown.border#080A0F
editor.background#21252b
editor.findMatchBackground#42557B
editor.findMatchHighlightBackground#314365
editor.foreground#abb2bf
editor.lineHighlightBackground#2c313a
editor.selectionBackground#3E4451
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#c5a7d9
editor.wordHighlightStrongBackground#00000000
editor.wordHighlightStrongBorder#c4c9c0
editorBracketMatch.border#c5a7d9
editorCursor.foreground#abb2bf
editorError.foreground#C62D42
editorGroup.background#181A1F
editorGroup.border#080A0F
editorGroupHeader.tabsBackground#181A1F
editorHoverWidget.background#181A1F
editorHoverWidget.border#c5a7d9
editorIndentGuide.background#3E4451
editorInfo.foreground#1B659D
editorLineNumber.foreground#3E4451
editorOverviewRuler.border#080A0F
editorOverviewRuler.errorForeground#C62D42
editorOverviewRuler.infoForeground#1B659D
editorOverviewRuler.warningForeground#d4ac0d
editorRuler.foreground#3E4451
editorSuggestWidget.background#181A1F
editorSuggestWidget.border#c5a7d9
editorSuggestWidget.selectedBackground#2c313a
editorWarning.foreground#d4ac0d
editorWhitespace.foreground#3E4451
editorWidget.background#21252B
focusBorder#c5a7d9
input.background#080A0F
inputOption.activeBorder#c5a7d9
inputValidation.errorBackground#C62D42
inputValidation.errorBorder#C62D42
inputValidation.infoBackground#1B659D
inputValidation.infoBorder#1B659D
inputValidation.warningBackground#d4ac0d
inputValidation.warningBorder#d4ac0d
list.activeSelectionBackground#21252b
list.activeSelectionForeground#d7dae0
list.focusBackground#2c313a
list.hoverBackground#292d35
list.inactiveSelectionBackground#21252b
notificationCenterHeader.background#181A1F
notifications.background#181A1F
panel.background#181A1F
panel.border#080A0F
peekView.border#61afef
peekViewEditor.background#181a1f
peekViewEditor.matchHighlightBackground#314365
peekViewResult.background#21252b
peekViewResult.matchHighlightBackground#314365
peekViewResult.selectionBackground#2c313a
peekViewResult.selectionForeground#abb2bf
peekViewTitle.background#21252b
scrollbarSlider.activeBackground#D2D6db77
scrollbarSlider.background#3E445177
scrollbarSlider.hoverBackground#3E4451aa
sideBar.background#181A1F
sideBarSectionHeader.background#21252b
statusBar.background#21252B
statusBar.debuggingBackground#21252B
statusBar.foreground#9da5b4
statusBar.noFolderBackground#21252B
statusBarItem.hoverBackground#2c313a
tab.activeBackground#21252b
tab.activeForeground#9da5b4
tab.border#080A0F
tab.inactiveBackground#181A1F
tab.inactiveForeground#737c8c
terminal.ansiBlack#21252b
terminal.ansiBlue#264b49
terminal.ansiBrightBlack#e0e0e0
terminal.ansiBrightBlue#7ab0d2
terminal.ansiBrightCyan#8cdfe0
terminal.ansiBrightGreen#beffa8
terminal.ansiBrightMagenta#c5a7d9
terminal.ansiBrightRed#ffcdd9
terminal.ansiBrightWhite#efefef
terminal.ansiBrightYellow#d0ccca
terminal.ansiCyan#15ab9c
terminal.ansiGreen#81d778
terminal.ansiMagenta#a481d3
terminal.ansiRed#e2a8bf
terminal.ansiWhite#35b1d2
terminal.ansiYellow#c4c9c0
terminal.foreground#35b1d2
terminalCursor.foreground#efefef
titleBar.activeBackground#21252b
titleBar.activeForeground#9da5b4
titleBar.inactiveBackground#21252b
titleBar.inactiveForeground#6B717D
widget.shadow#080A0F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator	#d0ccca	—
support.type.property-name, support.variable, variable	#c4c9c0	—
keyword.var, keyword.const, keyword.type, keyword.struct, keyword.interface, keyword.function, keyword.other.definition, markup.inline.raw, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, storage.type, support.constant, support.type, support.class	#c5a7d9	—
constant, keyword.other.unit	#15ab9c	—
comment	#5c6370	—
string, markup.quote, markup.bold, markup.italic	#81d778	—
entity.name.class, entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, meta.function-call.generic, support.function, support.other.escape.special.regexp	#7ab0d2	—
entity.name.tag, storage, support.function.builtin, variable.language	#a481d3	—
entity.name.section, keyword, punctuation.definition.heading, punctuation.definition.keyword	#e2a8bf	—
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
comment, markup.italic.markdown, punctuation.definition.italic.markdown	—	italic
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.support, punctuation.terminator	#d0ccca	—
support.type.property-name, support.variable, variable	#c4c9c0	—
keyword.var, keyword.const, keyword.type, keyword.struct, keyword.interface, keyword.function, keyword.other.definition, markup.inline.raw, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, storage.type, support.constant, support.type, support.class	#c5a7d9	—
constant, keyword.other.unit	#15ab9c	—
comment	#5c6370	—
string, markup.quote, markup.bold, markup.italic	#81d778	—
entity.name.class, entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, meta.function-call.generic, support.function, support.other.escape.special.regexp	#7ab0d2	—
entity.name.tag, storage, support.function.builtin, variable.language	#a481d3	—
entity.name.section, keyword, punctuation.definition.heading, punctuation.definition.keyword	#e2a8bf	—
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
comment, markup.italic.markdown, punctuation.definition.italic.markdown	—	italic

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