Dark Rose Theme

Name: Dark Rose Theme
Author: Jordi Keijzers

Publisher: Jordi KeijzersThemes in package: 1

My own custom theme.

Open in VS Code GitHub

VS Code preview

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

Dark Rose Theme — Dark Rose

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.activeBorder#c2436d
activityBar.background#333333
activityBar.border#454545
activityBar.foreground#d3d3d3
activityBarBadge.background#c2436d
activityBarBadge.foreground#d3d3d3
button.background#c2436d
button.foreground#d3d3d3
button.hoverBackground#97405d
checkbox.background#404040
dropdown.background#303030
dropdown.border#454545
dropdown.foreground#d3d3d3
dropdown.listBackground#454545
editor.background#202020
editor.findMatchBackground#88f09142
editor.findMatchBorder#85d78d4e
editor.findMatchHighlightBackground#e47d704d
editor.findMatchHighlightBorder#dd822d63
editor.foreground#d3d3d3
editor.hoverHighlightBackground#c2436d27
editor.lineHighlightBackground#252525
editor.lineHighlightBorder#252525
editor.selectionBackground#c2436d5b
editor.wordHighlightBackground#424242
editor.wordHighlightStrongBackground#c2436d60
editorGroup.border#454545
editorGroup.dropBackground#a3a3a325
editorGroup.emptyBackground#202020
editorGroup.focusedEmptyBorder#c2436d
editorGroupHeader.border#303030
editorGroupHeader.noTabsBackground#272727
editorGroupHeader.tabsBackground#272727
editorInlayHint.background#252525
editorInlayHint.foreground#858585
focusBorder#c2436d
foreground#d3d3d3
inputOption.activeBorder#c2436d
list.activeSelectionBackground#c2436d5b
list.dropBackground#c2436d5b
list.focusOutline#c2436dda
list.highlightForeground#df416ecb
list.hoverBackground#353535
list.inactiveSelectionBackground#414141
minimap.selectionHighlight#c2436d5b
panel.background#2b2b2b
panel.border#454545
peekView.border#c2436d
peekViewEditor.background#38141956
peekViewEditor.matchHighlightBackground#dd822d3f
peekViewEditor.matchHighlightBorder#dd822d63
peekViewResult.selectionBackground#c2436d5b
pickerGroup.foreground#c2436d
progressBar.background#c2436d
selection.background#c2436d5b
settings.modifiedItemIndicator#c2436d
sideBar.background#2b2b2b
sideBar.border#454545
sideBar.dropBackground#a3a3a33f
sideBar.foreground#d3d3d3
sideBarSectionHeader.background#404040
sideBarSectionHeader.border#4e4e4e
sideBarSectionHeader.foreground#d3d3d3
sideBarTitle.foreground#bbbbbb
statusBar.background#4b4b4b
statusBar.noFolderBackground#4b4b4b
tab.activeBackground#202020
tab.activeBorderTop#c2436d
tab.activeForeground#d3d3d3
tab.hoverBackground#3b3b3b
tab.inactiveBackground#2e2e2e
textLink.activeForeground#a52b54f8
textLink.foreground#c2436d
titleBar.activeBackground#333333
titleBar.inactiveBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
storage.type, storage.type.function, storage.modifier, storage.type.class, storage.type.interface, storage.type.namespace, storage.type.struct, storage.type.enum, storage.type.modifier, storage.type.template, keyword, keyword.operator.type, keyword.operator.new, keyword.operator.delete, keyword.operator.cast, keyword.control, keyword.other, keyword.operator.expression, keyword.operator.logical, keyword.declaration, entity.name.tag, variable.language.self, variable.language.this, variable.language.super, keyword.cmake, keyword.blade, variable.language.dart, support.type.property-name.json, storage.type.js, storage.type.ts, storage.type.type.ts, storage.type.rust, entity.name.section.markdown, entity.other.attribute-name.table.toml, meta.tag.table.toml, variable.parameter.function.language.special.self.python, variable.language.special.self.python, keyword.operator.logical.python, storage.type.trait.php	#c2436d	—
entity.name.function.preprocessor, entity.name.other.preprocessor.macro, storage.type.annotation, storage.type.generic, constant.character.escape, entity.source.cmake, meta.property-name.css, meta.property-name.scss, markup.underline.link.markdown, keyword.key.toml	#b0a2e0	—
meta.property-value.css, meta.property-value.scss, punctuation.definition.constant.css, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.other.global.php, variable.other.global.safer.php, entity.name.function.macro.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, support.constant.json, meta.macro.rust, storage.type.class.jsdoc, keyword.other.phpdoc.php, keyword.other.documentation.javadoc.java	#4788bd	—
entity.name.function, entity.name.function.call, support.function, entity.other.attribute-name, meta.selector.css, meta.function.url.css, meta.function-call.generic.python, support.function.construct.output.php, keyword.operator.sizeof.cpp, storage.source.cmake, variable.source.cmake, markup.bold.markdown, markup.italic.markdown, variable.language.documentroot.xml, support.function.json.ts	#7d91af	—
constant.numeric, constant.language, entity.other.inherited-class, storage.type, support.class, support.type, support.type.builtin, support.type.primitive, keyword.other.unit.suffix.integer, entity.name.type, punctuation.separator.dot.decimal, entity.other.inherited-class, keyword.other.unit, keyword.other.type.php, support.other.type.phpdoc.php, punctuation.seperator.decimal.period.php, keyword.type.cs, storage.type.java, storage.type.generic.java	#ee9c76	—
string, punctuation.definition.string, markup.inline.raw.string.markdown	#82be8b	—
variable.other, source.sql.embedded, support.other.namespace, keyword.other.php, support.type.property-name.css, variable.parameter.dart, keyword.key.toml, entity.name.type.namespace.cs, storage.modifier.package.java, storage.modifier.import.java	#d3d3d3	—
entity.name.scope-resolution.cpp	#75b5c0	—
punctuation.definition, punctuation.section, punctuation.terminator, keyword.operator, keyword.operator.type.annotation, keyword.operator.logical, keyword.control.ternary, keyword.control.directive, punctuation.accessor, meta.brace, storage.type.function.arrow, storage.modifier.reference, storage.modifier.pointer, punctuation.separator, punctuation.brackets, punctuation.semi, punctuation.comma, punctuation.curlybrace, punctuation.parenthesis, punctuation.bracket.round, punctuation.bracket.angle, support.function.construct.begin.blade, support.function.construct.end.blade, begin.bracket.round.blade.php, end.bracket.round.blade.php, constant.language.import-export-all.ts, keyword.operator.type.ts, keyword.other.array.phpdoc.php, punctuation.brackets.attribute.rust, punctuation.brackets.round.rust, punctuation.dot.dart, meta.attribute.rust, meta.interpolation.rust, entity.name.function.attribute.rust, meta.preprocessor.cs, meta.function.decorator.python, entity.name.function.decorator.python, storage.type.annotation.java, storage.type.annotation.dart	#a3a3a3	—
comment, punctuation.definition.comment	#7e7e7e	—

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