Firefox DevTools

Name: Firefox DevTools
Author: CROST ䷎

Publisher: CROST ䷎Themes in package: 1

Syntax coloring based on Firefox Developer Tools coloring

GitHub

VS Code preview

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

Firefox DevTools — Firefox Devtools

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	—
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	—
—	—	—
text.xml, text.html.basic	#D9D9DC	—
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	#BB9CF1	—
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	—
—	—	—
source meta.interface entity.name.type.interface	#FF9900	—
source.ts meta.var.expr.ts storage.type.ts, source.ts meta.import.ts keyword.control.import.ts	#FF7DE9	—
source.ts string.quoted	#6b89ff	—
source.ts support.variable.dom.ts	#FF7DE9	—
source.ts support.variable.property.dom.ts	#86DE74	—
source.ts new.expr.ts meta.objectliteral.ts punctuation.separator.key-value.ts	#d7d7db	—
source.ts meta.import.ts variable.other.readwrite.alias.ts	#75BFFF	—
source.ts meta.import.ts keyword.control.from.ts	#FF7DE9	—
source.ts meta.function-call.ts variable.other.object.ts	#B98EFF	—
source.ts meta.function-call.ts entity.name.function.ts	#86DE74	—
source.ts 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	—
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	#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	—
constant.numeric.css	#ff7de9	—
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	—

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