catrina-dark

Name: catrina-dark
Author: catrina-dark-one

Publisher: catrina-dark-oneThemes in package: 2

Este es un tema inspirado en la celebre figura de la catrina, personaje representativo de la cultura mexicana, tomando como preferencia los colores predominantes.

Open in VS Code GitHub

Color themes

VS Code preview

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

catrina-dark — catrina 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.

activityBar.activeBackground#24150b
activityBar.background#100411
activityBar.border#512413
activityBar.foreground#ff6c00
activityBar.inactiveForeground#ff66008f
activityBarBadge.background#ff00e3
activityBarBadge.foreground#ffffff
badge.background#ffbf00
badge.foreground#261000
breadcrumb.activeSelectionForeground#ff00e3
breadcrumb.background#0f0600
breadcrumb.focusForeground#ff00e3
breadcrumb.foreground#fd8bdb
button.background#ff660083
button.foreground#ffd2b2
button.hoverBackground#a54515
button.secondaryBackground#ffb889
button.secondaryForeground#5a2c0b
button.secondaryHoverBackground#ff8a5c
checkbox.background#10071995
checkbox.border#f79bff
checkbox.foreground#e0c91a
debugExceptionWidget.background#210e00
debugExceptionWidget.border#ff6600
debugToolBar.background#210e00
debugToolBar.border#ff6600
diffEditor.border#444444
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#10071995
dropdown.border#f79bff
dropdown.foreground#e0c91a
editor.background#0d0015
editor.findMatchBackground#00ff0026
editor.findMatchBorder#8effb0
editor.findMatchHighlightBackground#ff640055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#00ff2832
editor.foreground#c6dce7
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#57226f40
editor.lineHighlightBackground#ffffff0A
editor.lineHighlightBorder#ff660040
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#b07caa40
editor.selectionHighlightBackground#ff660040
editor.selectionHighlightBorder#ff6600
editor.wordHighlightBackground#4d1600b8
editor.wordHighlightStrongBackground#ff660040
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#ff6600
editorCursor.background#000000
editorCursor.foreground#ff9e5e
editorError.background#ff000024
editorError.border#ffffff00
editorError.foreground#ff0000
editorGroup.border#ff6600
editorGroup.emptyBackground#0c0015
editorGroupHeader.border#887820
editorGroupHeader.tabsBackground#100419
editorGutter.addedBackground#587c0c
editorGutter.background#1301119b
editorGutter.commentRangeForeground#ffc39b
editorGutter.deletedBackground#ffe4e5
editorGutter.foldingControlForeground#ffc39b
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#210e00
editorHoverWidget.border#ff6600
editorHoverWidget.foreground#ffc39b
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#ffffff0f
editorInfo.background#00ffff24
editorInfo.border#4490BF00
editorInfo.foreground#00ffff
editorLineNumber.activeForeground#ffcffa
editorLineNumber.foreground#ff6600
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#150021
editorSuggestWidget.border#bb00ff
editorSuggestWidget.foreground#9be8ff
editorSuggestWidget.highlightForeground#009fff
editorSuggestWidget.selectedBackground#667d8466
editorWarning.background#ffff0024
editorWarning.border#ffffff00
editorWarning.foreground#ffff00
editorWhitespace.foreground#f4ffe93c
editorWidget.background#0d0315
editorWidget.foreground#d09ee2
editorWidget.resizeBorder#ff6600
focusBorder#c79c7f
foreground#9ebdd3
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#9ebdd3
input.background#10071995
input.border#f79bff
input.foreground#e0c91a
input.placeholderForeground#eeec6a
inputOption.activeBackground#3f2600f1
inputOption.activeBorder#713d1a66
inputOption.activeForeground#ffe097
list.activeSelectionBackground#ab4500
list.activeSelectionForeground#f7ffe5
list.dropBackground#1c142c
list.focusBackground#19051f
list.focusForeground#e8b78c
list.highlightForeground#ffc39b
list.hoverBackground#362241
list.hoverForeground#68ff00
list.inactiveSelectionBackground#82004f
list.inactiveSelectionForeground#ffc39b
listFilterWidget.background#051907
listFilterWidget.noMatchesOutline#df00ff
listFilterWidget.outline#3f6844
menu.background#0e0511
menu.border#ff6c003e
menu.foreground#ffc39b
menu.selectionBackground#190a05
menu.selectionBorder#ff600034
menu.selectionForeground#dc73ff
menu.separatorBackground#c06245
menubar.selectionBackground#0e0511
menubar.selectionBorder#a13e17
menubar.selectionForeground#ffaf76
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#0c0015
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#00ff0026
minimap.selectionHighlight#b07caa40
minimap.warningHighlight#ffff00
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#ffe4e5
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#ff6600
notificationCenterHeader.background#130800
notificationCenterHeader.foreground#ff6600
notifications.background#180021
notifications.border#130800
notifications.foreground#ffc39b
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#00ffff
notificationsWarningIcon.foreground#ffff00
notificationToast.border#ff6600
panel.background#0f0600
panel.border#ffa70059
panelSection.border#9d8b2b
panelTitle.activeBorder#b6b438
panelTitle.activeForeground#ffa35f
panelTitle.inactiveForeground#ff6600
peekView.border#df01ff
peekViewEditor.background#141a2c
peekViewEditor.matchHighlightBackground#df00ff16
peekViewEditor.matchHighlightBorder#92069685
peekViewEditorGutter.background#1b2236
peekViewResult.background#1f1f32
peekViewResult.fileForeground#f2c40c
peekViewResult.lineForeground#00cfff
peekViewResult.matchHighlightBackground#e100e84d
peekViewResult.selectionBackground#00ffdb3e
peekViewResult.selectionForeground#ffd700
peekViewTitle.background#1d2449
peekViewTitleDescription.foreground#ffe452
peekViewTitleLabel.foreground#ffe301
pickerGroup.border#130800
pickerGroup.foreground#ffc28c
progressBar.background#ff6600
scrollbar.shadow#ff6600
scrollbarSlider.activeBackground#ff6600
scrollbarSlider.background#542100
scrollbarSlider.hoverBackground#ff660063
selection.background#453e39
settings.focusedRowBackground#ffffff07
settings.headerForeground#9ebdd3
sideBar.background#160517
sideBar.border#ffffff00
sideBar.dropBackground#1c142c
sideBar.foreground#edf961
sideBarSectionHeader.background#401543
sideBarSectionHeader.border#6f519b66
sideBarSectionHeader.foreground#eedede
sideBarTitle.foreground#ffc39b
statusBar.background#230b26
statusBar.debuggingBackground#732600
statusBar.debuggingForeground#ffffff
statusBar.foreground#ff661b
statusBar.noFolderBackground#1f0e1e
statusBar.noFolderBorder#803f10
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#1a1649
statusBarItem.remoteBackground#1f0b21bb
statusBarItem.remoteForeground#ff852d
tab.activeBackground#0f0600
tab.activeBorder#ff6000
tab.activeBorderTop#0000007a
tab.activeForeground#ff6600
tab.border#000000
tab.hoverBackground#39233d56
tab.hoverBorder#49e23c
tab.hoverForeground#ffc454
tab.inactiveBackground#2c1101d3
tab.inactiveForeground#ee813c
terminal.ansiBlack#686868
terminal.ansiBlue#0a56ab
terminal.ansiBrightBlack#7d7874
terminal.ansiBrightBlue#006ee8
terminal.ansiBrightCyan#00ccff
terminal.ansiBrightGreen#00d781
terminal.ansiBrightMagenta#e200e2
terminal.ansiBrightRed#f22e2e
terminal.ansiBrightWhite#f7f7f7
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#00a3cb
terminal.ansiGreen#00be75
terminal.ansiMagenta#b800b8
terminal.ansiRed#d30000
terminal.ansiWhite#e2e1e1db
terminal.ansiYellow#a5a503
terminal.border#9d8b2b
terminal.foreground#f9dd70b7
terminal.selectionBackground#6f412240
terminalCursor.background#ffbf00
terminalCursor.foreground#000000
textLink.foreground#c6fff2
titleBar.activeBackground#130800
titleBar.activeForeground#ff6600
titleBar.border#54496ba7
titleBar.inactiveBackground#190d19
titleBar.inactiveForeground#ffccaa99
tree.indentGuidesStroke#993c18
walkThrough.embeddedEditorBackground#00000050
widget.shadow#ff00bf70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ffc586b0	italic
variable, string constant.other.placeholder	#ffe3e3	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#a2ff03	—
keyword, storage.type, storage.modifier	#ff78e6	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#fff99c	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fe8fc5	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#fff99c	—
meta.block variable.other	#c7ddfd	—
support.other.variable, string.other.link	#f5ff66	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#ffffff	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#ffb366	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffe3fc	—
support.type	#fff70d	—
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	#ffb94a	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#8fb4ff	—
variable.language	#ffd606	italic
entity.name.method.js	#ffffff	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#ffffff	—
entity.other.attribute-name	#fae6c4	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#fe8fc5	italic
entity.other.attribute-name.class	#a4e7fe	—
source.sass keyword.control	#caffcd	—
markup.inserted	#faeaff	—
markup.deleted	#ffffff	—
markup.changed	#ffe8e8	—
string.regexp	#46ffda	—
constant.character.escape	#04d5ff	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#ffffff	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ffffff	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#d987ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fda0e6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#caa9ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#bfffbd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff9eae	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffdbe1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffe96e	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b6f6ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c7bbff	—
text.html.markdown, punctuation.definition.list_item.markdown	#ffffff	—
text.html.markdown markup.inline.raw.markdown	#ffffff	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#fffdfe	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#ffffff	—
markup.italic	#c7ffb9	italic
markup.bold, markup.bold string	#d6ffd4	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	#e9ffd0	bold
markup.underline	#fff8ed	underline
markup.quote punctuation.definition.blockquote.markdown	#ffe6ea	—
markup.quote	—	italic
string.other.link.title.markdown	#ffffff	—
string.other.link.description.title.markdown	#d3ffc5	—
constant.other.reference.link.markdown	#fff4ed	—
markup.raw.block	#fff3fd	—
markup.raw.block.fenced.markdown	#ffecef	—
punctuation.definition.fenced.markdown	#fff1f8	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#ffeee3	—
variable.language.fenced.markdown	#ffe8f7	—
meta.separator	#fbfffa	bold
markup.table	#fcffe8	—

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