Naruto Framer Dark Theme

Name: Naruto Framer Dark Theme
Author: bombazok

Publisher: bombazokThemes in package: 1

Naruto Dark theme by Thomaz but with Framer Dark token colors (syntax highlight)

Open in VS Code GitHub

VS Code preview

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

Naruto Framer Dark Theme — Naruto Framer Dark Theme

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#130941
activityBar.background#161620
activityBar.foreground#f85d03
activityBarBadge.background#007acc
editor.background#0d0d1d
editor.foreground#ffffff
editorCursor.foreground#649fec
menu.background#0b0527
menu.foreground#e9b88b
scrollbarSlider.background#4e566660
sideBar.background#070416
sideBarSectionHeader.background#120a36
sideBarTitle.foreground#ee855b
statusBar.background#24375adc
statusBar.debuggingBackground#db7d4e
tab.activeBackground#0f082e
tab.activeBorder#00aeff
tab.hoverBackground#190f46
tab.inactiveBackground#09051b
terminal.ansiBrightBlack#2f8a67
terminal.ansiCyan#03aaf7
terminal.background#0a031d
terminalCursor.foreground#695656
titleBar.activeBackground#09051bdc
titleBar.activeForeground#fcfcfc
titleBar.inactiveBackground#2e2a36
titleBar.inactiveForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#747474	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#FD886B	—
variable.other.object.property	#20BCFC	—
constant.other.color	#32CCDC	—
invalid, invalid.illegal	#FD886B	—
invalid.deprecated	#B15F4A	—
keyword, storage.modifier	#BA8CFC	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#BA8CFC	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#BA8CFC	—
keyword.type, storage.type.primitive	#ACDDFD	—
storage.type.function	#20BCFC	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#D0D0D0	—
punctuation.section.embedded, variable.interpolation	#B15F4A	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#FD886B	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#20BCFC	—
meta.block variable.other	#FD886B	—
support.other.variable, string.other.link	#FD886B	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#FC4769	—
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	#32CCDC
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	#FECB6E	—
storage.type, storage.modifier.package, storage.modifier.import	#FECB6E	—
entity.name.variable.field	#20BCFC	—
support.type	#ACDDFD	—
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	#ACDDFD	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FD886B	—
variable.language	#FD886B	italic
entity.name.method.js	#20BCFC	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#20BCFC	—
entity.other.attribute-name	#20BCFC	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FECB6E	italic
entity.other.attribute-name.class	#FECB6E	—
source.sass keyword.control	#20BCFC	—
markup.inserted	#32CCDC	—
markup.deleted	#FD886B	—
markup.changed	#BA8CFC	—
string.regexp	#ACDDFD	—
constant.character.escape	#ACDDFD	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#20BCFC	italic
source.js constant.other.object.key.js string.unquoted.label.js	#BA8CFC	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#20BCFC	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#20BCFC	—
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	#20BCFC	—
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	#20BCFC	—
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	#20BCFC	—
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	#20BCFC	—
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	#20BCFC	—
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	#20BCFC	—
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	#20BCFC	—
text.html.markdown, punctuation.definition.list_item.markdown	#D0D0D0	—
text.html.markdown markup.inline.raw.markdown	#BA8CFC	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#ACDDFD	—
text.html.markdown meta.dummy.line-break	#747474	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#20BCFC	—
markup.italic	#FD886B	italic
markup.bold, markup.bold string	#FD886B	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	#FD886B	bold
markup.underline	#FC4769	underline
markup.quote punctuation.definition.blockquote.markdown	#ACDDFD	—
markup.quote	—	italic
string.other.link.title.markdown	#20BCFC	—
string.other.link.description.title.markdown	#BA8CFC	—
constant.other.reference.link.markdown	#FECB6E	—
markup.raw.block	#BA8CFC	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#BA8CFC	—
variable.language.fenced.markdown	#FD886B	—
meta.separator	#ACDDFD	bold
markup.table	#BA8CFC	—
token.info-token	#20BCFC	—
token.warn-token	#FECB6E	—
token.error-token	#FD886B	—
token.debug-token	#BA8CFC	—

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