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 (Nord)

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#2e3440
editor.selectionHighlightBackground#ADD6FF26
editorBracketHighlight.foreground1#93A1A1
editorBracketHighlight.foreground2#ebcb8b
editorBracketHighlight.foreground3#a3be8c
editorBracketHighlight.foreground4#5e81ac
editorBracketHighlight.foreground5#b48ead
editorBracketHighlight.foreground6#bf616a
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#5e81ac
terminal.ansiBrightBlack#2e3440
terminal.ansiBrightBlue#268bd2
terminal.ansiBrightCyan#88c0d0
terminal.ansiBrightGreen#50fa7b
terminal.ansiBrightMagenta#d33682
terminal.ansiBrightRed#dc322f
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#859900
terminal.ansiCyan#2aa198
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#d4d4d4
terminal.ansiYellow#ebcb8b

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	—
	#2e3440	—
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#4c566a	—
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	#b48ead	—
support.function, support.function.magic, support.variable, keyword.other.special-method, meta.function-call support.type	#d08770	—
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	#88c0d0
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	#a3be8c	—
entity.name.namespace, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, entity.name.module.js, variable.import.parameter.js	#a3be8c	—
entity.name.type.interface	#a3be8c	italic
entity.name.type.enum	#a3be8c	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	#5e81ac	—
entity.name.function, meta.function-call, variable.function, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor	#ebcb8b	—
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	#bf616a	—
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	#ebcb8b	—
markup.heading, markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#a3be8c	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	#ebcb8b	—
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}!`;
}