Fire Red Dark

Name: Fire Red Dark
Author: sudofinn

Publisher: sudofinnThemes in package: 1

A red colorscheme for VScode dedicated to people who love this color.

Open in VS Code GitHub

VS Code preview

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

Fire Red Dark — Fire Red

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#000000
activityBar.border#00000060
activityBar.foreground#A6A6A6
activityBarBadge.background#DD4A4E
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#980000
breadcrumb.activeSelectionForeground#980000
breadcrumb.background#000000
breadcrumb.focusForeground#A6A6A6
breadcrumb.foreground#D6414E
breadcrumbPicker.background#000000
button.background#98000050
contrastBorder#98000040
debugToolBar.background#000000
diffEditor.insertedTextBackground#5D5D5D15
diffEditor.removedTextBackground#A6A6A620
dropdown.background#000000
dropdown.border#FFFFFF10
editor.background#000000
editor.findMatchBackground#000000
editor.findMatchBorder#980000
editor.findMatchHighlightBackground#98000093
editor.findMatchHighlightBorder#FFFFFF30
editor.foreground#A6A6A6
editor.lineHighlightBackground#00000050
editor.selectionBackground#DD4A4E30
editor.selectionHighlightBackground#9800006b
editor.selectionHighlightBorder#DD4A4Ef0
editorBracketMatch.background#000000
editorBracketMatch.border#8888887f
editorCursor.foreground#888888
editorError.foreground#A6A6A670
editorGroup.border#00000030
editorGroupHeader.tabsBackground#000000
editorGutter.addedBackground#5D5D5D60
editorGutter.deletedBackground#A6A6A660
editorGutter.modifiedBackground#DD4A4E60
editorHoverWidget.background#000000
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground#777777
editorIndentGuide.background#77777770
editorInfo.foreground#DD4A4E70
editorLineNumber.activeForeground#DD4A4E
editorLineNumber.foreground#980000c0
editorLink.activeForeground#A6A6A6
editorMarkerNavigation.background#A6A6A605
editorOverviewRuler.border#000000
editorOverviewRuler.errorForeground#A6A6A640
editorOverviewRuler.findMatchForeground#980000
editorOverviewRuler.infoForeground#DD4A4E40
editorOverviewRuler.warningForeground#88888870
editorRuler.foreground#777777
editorSuggestWidget.background#000000
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#A6A6A6
editorSuggestWidget.highlightForeground#888888
editorSuggestWidget.selectedBackground#98000020
editorWarning.foreground#5D5D5D
editorWhitespace.foreground#A6A6A640
editorWidget.background#000000
editorWidget.border#888888
editorWidget.resizeBorder#980000
extensionButton.prominentBackground#5D5D5D90
extensionButton.prominentHoverBackground#A6A6A6
focusBorder#FFFFFF00
gitDecoration.conflictingResourceForeground#888888
gitDecoration.deletedResourceForeground#A6A6A6
gitDecoration.ignoredResourceForeground#980000
gitDecoration.modifiedResourceForeground#D6414E
gitDecoration.untrackedResourceForeground#DD4A4E
input.background#3F3F3F
input.border#FFFFFF10
input.foreground#A6A6A6
input.placeholderForeground#A6A6A660
inputOption.activeBackground#A6A6A630
inputOption.activeBorder#A6A6A630
inputValidation.errorBorder#A6A6A650
inputValidation.infoBorder#DD4A4E50
inputValidation.warningBorder#88888850
list.activeSelectionBackground#000000
list.activeSelectionForeground#980000
list.focusBackground#3F3F3F
list.focusForeground#DD4A4E
list.highlightForeground#980000
list.hoverBackground#777777
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#980000
list.warningForeground#888888
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#000000f8
menu.border#98000050
menu.foreground#A6A6A6
menu.selectionBackground#3F3F3F
menu.selectionBorder#00000030
menu.selectionForeground#A6A6A6
menu.separatorBackground#A6A6A6
menubar.selectionBackground#3F3F3F
menubar.selectionBorder#98000050
menubar.selectionForeground#A6A6A6
minimap.background#000000
minimapGutter.addedBackground#A6A6A6
minimapGutter.deletedBackground#888888
minimapGutter.modifiedBackground#5D5D5D
minimapSlider.activeBackground#5D5D5Db0
minimapSlider.background#5D5D5D80
minimapSlider.hoverBackground#5D5D5Da0
notificationLink.foreground#980000
notifications.background#000000
notifications.foreground#A6A6A6
panel.background#000000
panel.border#00000060
panelTitle.activeBorder#980000
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A6A6A6
peekView.border#00000030
peekViewEditor.background#A6A6A605
peekViewEditor.matchHighlightBackground#98000050
peekViewEditorGutter.background#A6A6A605
peekViewResult.background#A6A6A605
peekViewResult.matchHighlightBackground#98000050
peekViewResult.selectionBackground#98000070
peekViewTitle.background#A6A6A605
peekViewTitleDescription.foreground#A6A6A660
pickerGroup.foreground#980000
progressBar.background#980000
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#980000cc
scrollbarSlider.background#980000bb
scrollbarSlider.hoverBackground#980000ee
selection.background#980000
settings.checkboxBackground#000000
settings.checkboxForeground#A6A6A6
settings.dropdownBackground#000000
settings.dropdownForeground#A6A6A6
settings.headerForeground#980000
settings.modifiedItemIndicator#980000
settings.numberInputBackground#000000
settings.numberInputForeground#A6A6A6
settings.textInputBackground#000000
settings.textInputForeground#A6A6A6
sideBar.background#000000
sideBar.border#98000050
sideBar.foreground#DD4A4E
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#00000060
sideBarSectionHeader.foreground#DD4A4E
sideBarTitle.foreground#A6A6A6
statusBar.background#A59E9A
statusBar.border#00000060
statusBar.debuggingBackground#888888
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FF5050
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#98000020
statusBarItem.remoteBackground#980000
statusBarItem.remoteForeground#000000
tab.activeBackground#98000050
tab.activeBorder#980000
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#980000
tab.border#000000
tab.inactiveBackground#98000020
tab.inactiveForeground#A6A6A6af
tab.unfocusedActiveBackground#98000040
tab.unfocusedActiveBorder#980000
tab.unfocusedActiveForeground#A6A6A6
tab.unfocusedInactiveBackground#98000010
tab.unfocusedInactiveForeground#A6A6A67f
terminal.ansiBlack#000000
terminal.ansiBlue#DD4A4E
terminal.ansiBrightBlack#980000
terminal.ansiBrightBlue#DD4A4E
terminal.ansiBrightCyan#FF6C6C
terminal.ansiBrightGreen#5D5D5D
terminal.ansiBrightMagenta#888888
terminal.ansiBrightRed#A6A6A6
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#888888
terminal.ansiCyan#FF6C6C
terminal.ansiGreen#5D5D5D
terminal.ansiMagenta#888888
terminal.ansiRed#A6A6A6
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#888888
terminalCursor.background#000000
terminalCursor.foreground#888888
textLink.activeForeground#A6A6A6
textLink.foreground#980000
titleBar.activeBackground#000000
titleBar.activeForeground#A6A6A6
titleBar.border#00000060
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#980000
tree.indentGuidesStroke#777777
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#888888	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#5D5D5D	—
constant.other.php	#888888	—
constant.other.color	#FFFFFF	—
invalid, invalid.illegal	#A6A6A6	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#A7A8AF	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#D6414E	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#A6A6A6	—
punctuation.definition, string.quoted.single.scss	#A7A8AF	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#6D6F7C	—
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#A6A6A6	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#888888	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#D6414E
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#DD4A4E	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#FF6C6C	—
support.other.variable, string.other.link, markup.table	#A6A6A6	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#888888	—
variable.parameter.function.language.special, variable.parameter	#A6A6A6	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#5D5D5D
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#888888	—
support.type	#B2CCD6	—
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	#D6414E	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#A6A6A6	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#DD4A4E	italic
entity.other.attribute-name, support.function	#888888	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#A6A6A6	—
source.scss keyword.control	#888888	—
markup.inserted	#5D5D5D	—
markup.deleted	#A6A6A6	—
markup.changed	#888888	—
string.regexp	#FF6C6C	—
constant.character.escape	#FF6C6C	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#A6A6A6	italic
support.type.property-name.json	#A6A6A6	—
text.html.markdown, punctuation.definition.list_item.markdown	#A6A6A6	—
text.html.markdown markup.inline.raw.markdown	#888888	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#98000050	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#D6414E	bold
markup.underline	#DD4A4E	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#98000050	—
markup.quote	—	italic
string.other.link.description.title.markdown	#888888	—
constant.other.reference.link.markdown	#888888	—
markup.raw.block	#888888	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#FF6C6C	—
variable.language.fenced.markdown	#980000	—
meta.separator	#A7A8AF	bold
token.info-token	#980000	—
token.warn-token	#FF293B	—
token.error-token	#FF293B	—
token.debug-token	#FF6C6C	—

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