This code is a JavaScript function, executed immediately as an...

May 18, 2025 at 12:01 PM

(function () {
    "use strict";

    const STORAGE_KEY_WAS_ENABLED_FOR_HOST = "__darkreader__wasEnabledForHost";
    function wasEnabledForHost() {
        try {
            const value = sessionStorage.getItem(
                STORAGE_KEY_WAS_ENABLED_FOR_HOST
            );
            if (value === "true") {
                return true;
            }
            if (value === "false") {
                return false;
            }
        } catch (err) {}
        return null;
    }

    if (
        document.documentElement instanceof HTMLHtmlElement &&
        matchMedia("(prefers-color-scheme: dark)").matches &&
        wasEnabledForHost() !== false &&
        !document.querySelector(".darkreader--fallback") &&
        !document.querySelector(".darkreader")
    ) {
        const css = [
            "html, body, body :not(iframe) {",
            "    background-color: #181a1b !important;",
            "    border-color: #776e62 !important;",
            "    color: #e8e6e3 !important;",
            "}",
            "html, body {",
            "    opacity: 1 !important;",
            "    transition: none !important;",
            "}",
            'div[style*="background-color: rgb(135, 135, 135)"] {',
            "    background-color: #878787 !important;",
            "}"
        ].join("\n");
        const fallback = document.createElement("style");
        fallback.classList.add("darkreader");
        fallback.classList.add("darkreader--fallback");
        fallback.media = "screen";
        fallback.textContent = css;
        if (document.head) {
            document.head.append(fallback);
        } else {
            const root = document.documentElement;
            root.append(fallback);
            const observer = new MutationObserver(() => {
                if (document.head) {
                    observer.disconnect();
                    if (fallback.isConnected) {
                        document.head.append(fallback);
                    }
                }
            });
            observer.observe(root, {childList: true});
        }
    }
    if (location.host === "teams.live.com") {
        (() => {
            const descriptor = Object.getOwnPropertyDescriptor(
                CSSStyleSheet.prototype,
                "cssRules"
            );
            Object.defineProperty(CSSStyleSheet.prototype, "cssRules", {
                ...descriptor,
                get: function () {
                    var _a, _b;
                    if (
                        (_b =
                            (_a = this.ownerNode) === null || _a === void 0
                                ? void 0
                                : _a.classList) === null || _b === void 0
                            ? void 0
                            : _b.contains("darkreader")
                    ) {
                        return [];
                    }
                    return descriptor.get.call(this);
                }
            });
        })();
    }
})();

This code is a JavaScript function, executed immediately as an IIFE (Immediately Invoked Function Expression), that adds a dark theme fallback to a webpage if certain conditions are met. Here's a breakdown of what the code does:

Strict Mode:
- The code uses "use strict"; to enforce stricter parsing and error handling in JavaScript, preventing certain silent errors.
Session Storage Key Management (wasEnabledForHost function):
- The wasEnabledForHost function retrieves a value ("true" or "false") from the session storage for the key __darkreader__wasEnabledForHost. If the value exists:
  - "true" indicates that the user enabled dark mode for the host, so the function returns true.
  - "false" indicates it was disabled, so the function returns false.
  - If the key does not exist or any error occurs, the function returns null.
Conditions for Applying the Dark Fallback CSS:
- The dark fallback CSS will be applied to the webpage if all these conditions are met:
  - The document has an <html> element (checked using document.documentElement instanceof HTMLHtmlElement).
  - The user's system preference is set to dark mode (checked using matchMedia("(prefers-color-scheme: dark)").matches).
  - The wasEnabledForHost function returns true or null, meaning dark mode is enabled or not explicitly disabled for the host.
  - There are no existing elements with the class names "darkreader--fallback" or "darkreader" already on the page.
Dark Fallback CSS Insertion:
- If the conditions above are met, dark mode fallback styles (defined as a CSS string) are created and inserted into the page using a <style> element. The styles include:
  - Setting a dark background (#181a1b), border color (#776e62), and light text color (#e8e6e3) for most elements.
  - Applying specific styles for div elements with certain inline background color styles.
- If the HTML document already has a <head> element, the style is appended there.
- If <head> doesn't exist (e.g., due to the page loading in progress), the code appends the style to the <html> element and observes for the creation of <head>. When it is created, the style is moved into the <head>.
Specific Behavior for teams.live.com:
- If the webpage's host is teams.live.com, the code overrides the cssRules getter of the CSSStyleSheet prototype. This is done to hide CSS rules of stylesheets associated with the dark mode (detected by the darkreader class on the <style> element). For dark mode-related styles, the getter will return an empty array, effectively making those stylesheets appear "empty."

Purpose of the Code:

The script is likely part of a "dark mode" extension or feature designed to dynamically apply a dark theme fallback to webpages.
It checks whether dark mode should be enabled based on user preferences (both system-wide and host-specific) and ensures that custom styles are not overridden by conflicts or redundant styles.
The override for teams.live.com addresses a specific issue, possibly to ensure compatibility with their CSS structure or prevent conflicts with their styles.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr