Firefox DevTools Italic

Name: Firefox DevTools Italic
Author: Steve Belovarich

Publisher: Steve BelovarichThemes in package: 1

Syntax coloring based on Firefox Developer Tools coloring with support for italics

Open in VS Code GitHub

VS Code preview

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

Firefox DevTools Italic — Firefox Devtools Italic

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.background#232a35
activityBar.foreground#8699a9
badge.background#46afe3
badge.foreground#fff
editor.background#0e1014
editor.findMatchHighlightBackground#521c76
editor.inactiveSelectionBackground#204e8a99
editor.lineHighlightBackground#204e8a66
editor.selectionBackground#204e8acc
editorBracketMatch.background#00000000
editorBracketMatch.border#C000C066
editorCursor.background#fff
editorGroupHeader.tabsBackground#0c0c0d
editorGroupHeader.tabsBorder#3c3c3d66
editorGutter.addedBackground#D99B28
editorGutter.background#0c0c0d
editorGutter.deletedBackground#EB5368
editorGutter.foreground
editorGutter.modifiedBackground#86DE74
editorIndentGuide.background#42495400
editorLineNumber.foreground#93939366
editorWhitespace.foreground#42495433
editorWidget.background#2c3442
foreground#8699a9
gitDecoration.conflictingResourceForeground#EB5368
gitDecoration.modifiedResourceForeground#86DE74
gitDecoration.untrackedResourceForeground#FFFFFF
input.background#232a35
input.border#8699a9
input.foreground#FFF
inputOption.activeBorder
inputValidation.infoBackground
inputValidation.warningBackground
inputValidation.warningForeground
list.activeSelectionBackground#204e8a
list.activeSelectionForeground#FFF
list.focusBackground#204e8a
list.focusForeground#FFF
list.hoverBackground#204e8a
list.hoverForeground#FFF
list.inactiveFocusBackground#0a84ff
list.inactiveFocusForeground#FFF
list.inactiveSelectionBackground#204e8a66
list.inactiveSelectionForeground#a5bcd0
panel.border#555657
panelTitle.activeBorder#0a84ff
sideBar.background#232a35
sideBar.border#000
sideBarSectionHeader.background#232a35
sideBarTitle.foreground#46afe3
statusBar.background#232a35
statusBar.foreground#8699a9
tab.activeBackground#00000000
tab.activeBorder#0a84ff
tab.activeForeground#FFF
tab.border#3c3c3d66
tab.inactiveBackground#00000000
tab.inactiveForeground#666
titleBar.activeBackground#232a35
titleBar.inactiveBackground#111111
titleBar.inactiveForeground#636a75

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#b1b1b3	—
emphasis	—	italic
strong	—	bold
markup.italic	—	italic
comment	#86DE74	—
string, string.quoted	#BB9CF1	—
constant.numeric	#ffcd22	—
constant.language	#75bfff	bold
constant.character, constant.other	#a082bd	—
keyword	#75bfff	—
keyword.operator	#e0e2e4
storage	#75bfff	—
entity.other.inherited-class	—
meta.definition.method	#e0e2e4	—
entity.name.function	#678cb1	—
entity.name.tag	#75bfff	—
entity.other.attribute-name	#FF97E9	italic
—	—	—
text.xml, text.html.basic	#D9D9DC	—
text.html.basic comment.block.html	#93939366	—
text.xml meta.tag.preprocessor.xml entity.name.tag.xml, text.xml meta.tag.preprocessor.xml entity.other.attribute-name.xml, text.xml meta.tag.preprocessor.xml string.quoted.double.xml	#667380	italic
text.html.basic string.quoted punctuation, text.xml string.quoted punctuation	#A1A1A1	—
meta.tag.block.any.html, meta.tag punctuation.definition.tag, text.html.basic meta.tag.any.html punctuation.definition.tag.html	#A1A1A1	—
text.html.basic meta.tag.other.html, text.xml meta.tag.xml	#A1A1A1	—
text.html.basic string.quoted, text.xml string.quoted, text.html.basic string.quoted.double.html	bbbbbbff	—
meta.tag.preprocessor, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor entity.other.attribute-name, meta.tag.preprocessor string.quoted, meta.tag.preprocessor string.quoted punctuation.definition.string, meta.tag.preprocessor.xml punctuation.definition.tag.xml	#557182
constant.other.name.xml, string.quoted.other.xml	#e0e2e4	—
—	—	—
meta.tag.metadata.script.html entity.name.tag	#75bfff99	—
meta.tag.metadata.script.html punctuation.definition.tag, meta.tag.metadata.script.html source.js	#b6babf99	—
meta.tag.metadata.script.html entity.other.attribute-name.html	#ff7de999	—
—	—	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string.quoted, meta.tag.sgml.doctype keyword.doctype, meta.tag.sgml.doctype punctuation.definition, meta.tag.sgml.html punctuation.definition.tag.html	#9F9F9F	italic
—	—	—
source.js support.type.object.module.js	#C5A3FE	—
source.js meta.objectliteral.js meta.object-literal.key.js	#93DF86	—
source.js meta.objectliteral.js string.quoted.single.js	#7B9BF9	—
—	—	—
storage.type	—	italic
storage.modifier	—	italic
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	—	italic
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	—	italic
variable.language	—	italic
meta.decorator punctuation.decorator	—	italic
source meta.interface entity.name.type.interface	#FF9900	—
keyword.control	—	italic
meta.var.expr.ts storage.type.js, keyword.control.import.js, keyword.control.export.js, keyword.control.from.js, keyword.control.flow.js, keyword.operator.new.js, meta.var.expr.ts storage.type.ts, keyword.control.import.ts, keyword.control.export.ts, keyword.control.from.ts, keyword.control.flow.ts, keyword.operator.new.ts	#FF7DE9	—
source.js string.quoted, source.ts string.quoted	#6b89ff	—
source.js comment.line, source.ts comment.line, source.js comment.block.js, source.ts comment.block.ts	#93939366	—
source.ts meta.type.annotation.ts, source.ts meta.class.ts meta.field.declaration.ts meta.type.annotation.ts meta.object.type.ts meta.indexer.declaration.ts meta.type.annotation.ts	#bbbbbb8e	italic
source.js support.variable.dom.js, source.ts support.variable.dom.ts	#d96629	—
source.ts meta.decorator.ts	#86DE74	—
source.ts meta.decorator.ts meta.function-call.ts entity.name.function.ts	#42B97C	—
source.ts meta.decorator.ts meta.objectliteral.ts punctuation.definition.block.ts	#86DE74	—
source.ts meta.decorator.ts meta.objectliteral.ts, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member.ts meta.array.literal.ts meta.brace.square.ts	#75BFFF	—
source.ts punctuation.decorator.ts	#86DE74	—
source.ts meta.decorator.ts variable.other.readwrite.ts	#75BFFF	—
support.variable.property.dom.js, support.variable.property.dom.ts	#86DE74	—
new.expr.js meta.objectliteral.js punctuation.separator.key-value.js, new.expr.ts meta.objectliteral.ts punctuation.separator.key-value.ts	#d7d7db	—
meta.import.js variable.other.readwrite.alias.js, meta.import.ts variable.other.readwrite.alias.ts	#75BFFF	—
meta.import.js keyword.control.from.js, meta.import.ts keyword.control.from.ts	#FF7DE9	—
meta.function-call.js variable.other.object.js, meta.function-call.ts variable.other.object.ts	#B98EFF	—
meta.function-call.js entity.name.function.js, meta.function-call.ts entity.name.function.ts	#86DE74	—
meta.object-literal.key.js, meta.object-literal.key.ts	#86DE74	—
—	—	—
source.json string, source.json string.quoted	#BBBBBB	—
source.json meta meta meta meta meta meta meta meta meta.structure.dictionary string	#00F	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary string	#757873	—
source.json meta meta meta meta meta meta meta.structure.dictionary string	#d99b28	—
source.json meta meta meta meta meta meta.structure.dictionary string	#d96629	—
source.json meta meta meta meta meta.structure.dictionary string	#5e88b0	—
source.json meta meta meta meta.structure.dictionary string	#70bf53	—
source.json meta meta meta.structure.dictionary string	#df80ff	—
source.json meta meta.structure.dictionary string	#eb5368	—
source.json meta.structure.dictionary string	#46afe3	—
—	—	—
source.css comment	#93939366	—
source.css.embedded	#e0e2e4	—
punctuation.definition.entity.css	#a9bacb	—
keyword.control.at-rule.media.css, keyword.control.at-rule.import.css	#75bfff	—
meta.at-rule.import.css string.quoted	#6489ff	—
meta.at-rule.media.header.css support.type.property-name.media.css	#70bf53	—
meta.at-rule.keyframes.header.css keyword	#d96629	—
meta.at-rule.keyframes.header.css variable.parameter	#70bf53	—
meta.selector.css, meta.selector.css entity.other.attribute-name	#b6babf	—
entity.name.tag.css	#a9bacb	—
source.css.scss entity.other.attribute-name.class.css, meta.selector.css entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin	#a9bacb	—
entity.other.attribute-name.pseudo-element.css	#b6babf	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css	#FFF	—
entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css	#FFF	—
entity.other.attribute-name.id.css	#a9bacb	—
entity.other.attribute-name.id.css punctuation.definition.entity.css	#eb5368	—
support.type.property-name.css, meta.property-name.css	#75bfff	—
meta.property-value.css	#ff7de9	—
meta.property-value.css keyword.other.unit, constant.numeric.css keyword.other.unit	#ff7de9	—
source.css.scss variable.scss	#86DE74	—
source.css.scss keyword.control.at-rule.import.scss, source.css.scss keyword.control.at-rule.include.scss	#FF7DE9	—
constant.numeric.css	#ffcd22	—
constant.other.color.css	#ff7de9	—
variable.parameter.misc.css	#ff7de9	—
meta.property-value.css string.quoted constant.character.escape.codepoint.css, meta.property-value.css string.quoted punctuation.definition.string	#ff7de9	—
comment.block.sass	#208C9A	italic
entity.other.attribute-name.placeholder-selector.sass	#FF5699	bold italic
entity.other.attribute-selector.sass	#817DFF	—
keyword.other.regex.sass	#FFE4A6	—
comment.punctuation.comma.sass	#FCFDFF	—
comment.punctuation.semicolon.sass	#6969FA	—
markup.heading.markdown, punctuation.definition.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, meta.separator.markdown, punctuation.definition.raw.markdown	#bbbbbb8e	italic
markup.inline.raw.string.markdown	#bbbbbb8e	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#bb9cf1ff	—
string.other.link.title.markdown, string.other.link.description.markdown	#75bfff	—
entity.name.section.markdown	#bbbbbbff	normal

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