JavaScript Document styleSheetSets Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property

Definition

Document.styleSheetSets is a read-only live list of currently available style sheet set names (MDN). Names come from titled stylesheets on the page.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.styleSheetSets. Start with this line.

JavaScript
document.styleSheetSets
CallWhat it does
document.styleSheetSetsPrimary signature.

Built into the browser. Read or assign document.styleSheetSets — no import required.

Library declarations
JavaScript
document.styleSheetSets

Parameters

ParameterDescription
SetterOptional. Read-only
Modern pathRequired. Own theme list + class / CSS

Return Value

Return ValueDescription
*The current value of document.styleSheetSets.

JavaScript Examples

Example 1 — List styleSheetSets

MDN-style loop — collect available set names into an array.

JavaScript
if ("styleSheetSets" in document) {
  const names = [];
  for (const sheet of document.styleSheetSets) {
    names.push(sheet);
  }
  console.log(names);
} else {
  console.log("API not available");
}
Try It Yourself

How It Works

  1. Feature-detect first. The API is non-standard and often missing.
  2. Iterate the list. Each item is a set name string (MDN).
  3. Legacy only. Useful for auditing old alternate-stylesheet pages.
  4. Expect empty. Modern pages usually have no titled set groups.

Example 2 — Feature Detect Safely

Always check existence before reading the list.

JavaScript
const supported = "styleSheetSets" in document;
console.log(supported);

if (supported) {
  console.log(document.styleSheetSets.length);
} else {
  console.log("API not available");
}
Try It Yourself

How It Works

  1. Use in. Safer than reading a missing property.
  2. Branch. Read length only when the list exists.
  3. Expect gaps. Deprecated non-standard APIs are often incomplete.
  4. Do not polyfill. Migrate themes instead of shimming this API.

Example 3 — Prefer a Modern Theme List

Own theme names + a class toggle — no style sheet sets required.

JavaScript
// Prefer this over styleSheetSets for new apps
const themes = ["light", "dark"];
console.log(themes.join(", "));

document.documentElement.classList.toggle("dark");
console.log(
  document.documentElement.classList.contains("dark")
);
Try It Yourself

How It Works

  1. Own the list. Theme names live in your app config, not the DOM API.
  2. Toggle a class. Put theme styles under .dark (or similar).
  3. Standard APIs. Works everywhere without alternate stylesheet menus.
  4. Pair with CSS. Custom properties and prefers-color-scheme complete the story.

Browser Support

Document.styleSheetSets is Deprecated and Non-standard (MDN). Support is incomplete — feature-detect, and do not ship new features on it.

✓ Deprecated · Non-standard

Document.styleSheetSets

Legacy live list of style sheet set names — avoid in new apps.

Legacy Avoid in new apps
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
styleSheetSets Deprecated

Bottom line: Safe to recognize in old code. For themes: your own name list, documentElement classes, CSS variables, prefers-color-scheme, or adoptedStyleSheets.

Frequently Asked Questions

A live list of all currently available style sheet set names on the document (MDN). Each item is a string title identifying a set.
Yes. MDN marks Document.styleSheetSets as Deprecated and Non-standard. Do not use it in new projects.
MDN Notes: enumerate document.styleSheets in order, add each sheet title that has a title, and drop duplicates using a case-sensitive comparison.
No. styleSheets returns CSSStyleSheet objects. styleSheetSets returns deduplicated string names of alternate sets derived from those sheets’ titles.
No. It is read-only (MDN). To switch sets in the legacy API, assign selectedStyleSheetSet instead.
Build a list from your own theme config, toggle a class on document.documentElement, use CSS custom properties, or adoptedStyleSheets.

Next: linkColor

Learn the legacy document link color property.

linkColor tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

11 people found this page helpful