JavaScript Document fgColor Property

What You’ll Learn

Document.fgColor is a deprecated instance property that gets or sets the document’s foreground text color as a string. Learn how legacy pages used it with bgColor, the Firefox default, the MDN-recommended CSS color replacement, and five examples with try-it labs.

Introduction

Before CSS took over page styling, scripts could tint an entire document with Document color properties: fgColor for text (foreground), bgColor for the page background, and link colors such as linkColor, vlinkColor, and alinkColor.

MDN’s recommended alternative today is the CSS color property—for example document.body.style.color = "red", or better, a stylesheet rule.

Related Document tutorials: bgColor, alinkColor, Document constructor.

Understanding Document.fgColor

A get/set instance property on Document. It reads and writes the document foreground (text) color as a string (MDN).

• Value — color name (e.g. "red") or hex (e.g. "#ff0000").
• Get / set — both reading and assigning are supported where the property still exists.
• Deprecated — HTML specification / MDN: avoid in new code.
• Firefox default — black (#000000) per MDN.
• Modern path — CSS color on body (or a theme root).

📝 Syntax

document.fgColor
document.fgColor = colorString;

Value

A string representing the color as a word (e.g. "red") or hexadecimal value (e.g. "#ff0000") (MDN).

MDN classic pairing

document.fgColor = "white";
document.bgColor = "darkblue";

Modern replacement

document.body.style.color = "red";
// Prefer CSS: body { color: red; }

⚖️ Legacy Document color properties

Examples Gallery

Examples follow MDN Document: fgColor. Open try-it labs to see text color changes where the property still applies.

document.fgColor = "white";
document.bgColor = "darkblue";
console.log(document.fgColor, document.bgColor);

white darkblue
(light text on dark blue where supported)

console.log(document.fgColor);
// Firefox default (MDN): "#000000"
// Other browsers may differ or ignore the property in practice

#000000

document.fgColor = "#0f172a";
console.log(document.fgColor);

#0f172a
(dark slate text where supported)

// Legacy demo only — prefer CSS in real apps
document.bgColor = "#0f172a";
document.fgColor = "#f8fafc";
console.log("fg:", document.fgColor, "bg:", document.bgColor);

fg: #f8fafc bg: #0f172a

body {
  color: #f8fafc;
  background-color: #0f172a;
}

// When JavaScript must set it at runtime:
document.body.style.color = "#f8fafc";

Text color follows CSS / body.style
(light text on dark slate in try-it lab)

🚀 Common Use Cases

• Reading legacy scripts — recognize old text-color Document APIs.
• Migrating samples — replace with CSS color.
• Debugging ancient tutorials — explain why page text flashes a new color on load.
• Not for new apps — do not set text via document.fgColor.
• Teaching web history — contrast Document colors with CSS.
• Theme toggles — use CSS variables and classes instead.

📝 Notes

• fgColor is deprecated in the HTML specification (MDN).
• Firefox default is #000000 (black) per MDN.
• Sibling legacy properties: bgColor, linkColor, vlinkColor, alinkColor.
• MDN replacement: CSS color via document.body.style.color.
• Related: bgColor, alinkColor, featurePolicy.

💡 Best Practices