Dark Pastels Remix

Name: Dark Pastels Remix
Author: daydev

Publisher: daydevThemes in package: 2

Dark+ theme with syntax highlight colors rearranged and supplemented with additional subdued colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dark Pastels Remix — Dark+ Remix (One dark)

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.

activityBarBadge.background#007ACC
editor.background#1e1e1e
editor.foreground#d4d4d4
editor.inactiveSelectionBackground#3A3D41
editor.lineHighlightBackground#002b36
editor.selectionHighlightBackground#ADD6FF26
editorBracketHighlight.foreground1#93A1A1
editorBracketHighlight.foreground2#e5c07b
editorBracketHighlight.foreground3#98C379
editorBracketHighlight.foreground4#569CD6
editorBracketHighlight.foreground5#C586C0
editorBracketHighlight.foreground6#E06C75
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
input.placeholderForeground#A6A6A6
list.dropBackground#383B3D
menu.background#252526
menu.foreground#CCCCCC
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarTitle.foreground#BBBBBB
statusBar.background#1e1e1e
statusBar.foreground#93A1A1
statusBarItem.remoteBackground#16825D
statusBarItem.remoteForeground#FFF
tab.lastPinnedBorder#ccc3
terminal.ansiBlack#1e1e1e
terminal.ansiBlue#569CD6
terminal.ansiBrightBlack#002b36
terminal.ansiBrightBlue#268bd2
terminal.ansiBrightCyan#9CDCFE
terminal.ansiBrightGreen#50fa7b
terminal.ansiBrightMagenta#d33682
terminal.ansiBrightRed#dc322f
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#859900
terminal.ansiCyan#2aa198
terminal.ansiGreen#98C379
terminal.ansiMagenta#C586C0
terminal.ansiRed#E06C75
terminal.ansiWhite#d4d4d4
terminal.ansiYellow#e5c07b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
text.html.markdown, entity.name.variable.local, meta.function-call.arguments	#d4d4d4	—
punctuation, keyword.operator, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, source.js constant.other.object.key.js string.unquoted.label.js, meta.separator, meta.brace, storage.type.function.arrow, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#93A1A1	—
invalid, invalid.illegal, markup.deleted, markup.deleted.git_gutter	#dc322f	—
markup.changed, markup.changed.git_gutter	#yellow+	—
markup.inserted, markup.inserted.git_gutter	#50fa7b	—
	#002b36	—
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#7F848E	—
keyword, keyword.other.unit, keyword.other, keyword.control, keyword.operator.logical.python, storage.modifier, storage.type, variable.language, keyword.operator.new, support.type.builtin, support.type.sys-types, support.type.primitive, variable.parameter.function.language.special	#C586C0	—
support.function, support.function.magic, support.variable, keyword.other.special-method, meta.function-call support.type	#CE9178	—
constant.numeric, constant.language, support.constant, constant.character, constant.other.color, variable.other.constant, variable.other.enummember, storage.type.format	#d33682	—
string, string constant.character, meta.fstring string, punctuation.definition.string, constant.other.symbol, constant.other.key, markup.quote, markup.quote punctuation.definition.blockquote.markdown	#9CDCFE
constant.escape, string.regexp, string.regexp punctuation.definition.string, constant.character.escape, meta.fstring constant.character.format, storage.type.string, string.interpolated punctuation.definition.variable, string.interpolated punctuation.definition.string, meta.template punctuation.definition, string variable.other, string variable.other punctuation.definition	#2aa198	bold
markup.underline, meta.attribute.href, string.other.link, string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown, url, link, uri	—	underline
entity.name, entity.name.type, entity.name.type.class, entity.other.inherited-class, meta.class.inheritance, variable.other.class.js, support.type, support.class, storage.type.cs	#98C379	—
entity.name.namespace, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, entity.name.module.js, variable.import.parameter.js	#98C379	—
entity.name.type.interface	#98C379	italic
entity.name.type.enum	#98C379	bold
variable, string constant.other.placeholder, meta.block variable.other, support.other.variable, entity.name.variable	#d4d4d4	—
meta.member.access, entity.name.variable.field, variable.other.property, variable.other.object.property, variable.other.constant.property, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#569CD6	—
entity.name.function, meta.function-call, variable.function, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor	#e5c07b	—
variable.parameter, entity.name.variable.parameter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, punctuation.support.type.property-name, support.type.property-name.json	#E06C75	—
meta.function.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.decorator punctuation.decorator, meta.decorator variable.other, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, entity.name.other.preprocessor.macro	#859900	—
meta.tag, entity.name.tag, meta.tag.sgml	#e5c07b	—
markup.heading, markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#98C379	bold
markup.table	#859900	—
markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown, markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end, variable.language.fenced.markdown	#e5c07b	—
markup.raw.block, text.html.markdown markup.inline.raw.markdown, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#d33682	—
markup.italic	#d4d4d4	italic
markup.bold, markup.bold string	#d4d4d4	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#d4d4d4	bold

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