https://utunote.com/_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.sc1npuf73a.js

1// To avoid Flash of Unstyled Content, the body is hidden.
2// Here we'll find the first web component and wait for it to be upgraded.
3// When it is, we'll remove this invisibility from the body.
4
5class LoadingTheme extends HTMLElement {
6
7    className = "hidden-body";
8    defaultDarkColor = "#272727";
9    defaultLightColor = "#fbfbfb";
10
11    constructor() {
12        super();
13    }
14
15    // Attributes to observe
16    static observedAttributes = ["mode", "storage-name"];
17
18    // Custom element added to page.
19    connectedCallback() {
20
21        // If LocalStorage is not available, do nothing.
22        if (localStorage == null) {
23            return;
24        }
25
26        // Attributes
27        const storageName = this.getAttribute("storage-name"); 
28        const mode = this.getAttribute("mode");
29        const primaryColor = this.getAttribute("primary-color");
30        const neutralColor = this.getAttribute("neutral-color");
31
32        const isDark = (modeSaved, isSystemDark) => {
33            switch (modeSaved) {
34                case "dark":
35                    return true;
36                case "light":
37                    return false;
38                default:
39                    return isSystemDark ? true : false;
40            }
41        };
42
43        // Compute the saved or the system theme (dark/light).
44        const modeSaved = mode ?? JSON.parse(localStorage.getItem(storageName))?.mode;
45        const primaryColorSaved = primaryColor ?? JSON.parse(localStorage.getItem(storageName))?.primaryColor;
46        const neutralColorSaved = neutralColor ?? JSON.parse(localStorage.getItem(storageName))?.neutralColor;
47        const isSystemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
48        const bgColor = isDark(modeSaved, isSystemDark) ? this.defaultDarkColor : this.defaultLightColor;
49
50        // console.log("LoadingTheme", { storageName, mode, modeSaved, isSystemDark, bgColor });
51
52        // Create a ".hidden-unstyled-body" class
53        // where the background-color is dark or light.
54        var css = `.${this.className} { visibility: hidden; background-color: ${bgColor}; }`;
55
56        // Add a <style> element to the <head> element
57        const head = document.head || document.getElementsByTagName('head')[0];
58        const style = document.createElement('style');
59
60        head.appendChild(style);
61        style.appendChild(document.createTextNode(css));
62
63        document.body.classList.add(this.className);
64
65
66        // Add a <fluent-design-theme mode="dark|light" /> sub-element
67        // Do not add the "storage-name"" to avoid unwanted local storage.
68        const designTheme = document.createElement("fluent-design-theme");
69        designTheme.setAttribute("mode", modeSaved);
70        designTheme.setAttribute("primary-color", primaryColorSaved);
71        designTheme.setAttribute("neutral-color", neutralColorSaved);
72        this.appendChild(designTheme);
73
74        // Wait for the fluentui web components to be loaded
75        // and to remove the className to show the <body> content.
76        customElements.whenDefined("fluent-design-theme").then(() => {
77            document.body.classList.remove(this.className);
78        });
79    }
80
81    // Attributes has changed.
82    attributeChangedCallback(name, oldValue, newValue) {
83
84    }
85}
86
87customElements.define("loading-theme", LoadingTheme);