https://utunote.com/_content/Microsoft.FluentUI.AspNetCore.Compone…/FluentDesignTheme.7i47nr1axg.razor.js

1export function addThemeChangeEvent(dotNetHelper, id) {
2    const element = document.getElementById(id);
3
4    if (element) {
5        element.addEventListener("onchange", (e) => {
6            if (e.detail.name === "mode") {
7                UpdateBodyDataSetTheme(e.detail.newValue);
8            }
9            try {
10                // setTimeout: https://github.com/dotnet/aspnetcore/issues/26809
11                setTimeout(() => {
12                    dotNetHelper.invokeMethodAsync("OnChangeRaisedAsync", e.detail.name, e.detail.newValue ?? "system");
13                }, 0);
14            } catch (error) {
15                console.error(`FluentDesignTheme: failing to call OnChangeRaisedAsync.`, error);
16            }
17        });
18
19        try {
20            // This can fail when localStorage does not contain a valid JSON object
21            const theme = element.themeStorage.readLocalStorage();
22            if (theme == null) {
23                return null;
24            }
25            else {
26                UpdateBodyDataSetTheme(theme.mode);
27                return JSON.stringify(theme);
28            }
29        } catch (error) {
30            ClearLocalStorage(id);
31            console.error(`FluentDesignTheme: failing to load theme from localStorage.`, error);
32        }
33
34    }
35
36    return null;
37}
38
39export function UpdateDirection(value) {
40    document.body.dir = value;
41}
42
43export function GetDirection() {
44    return document.body.dir;
45}
46
47export function GetGlobalLuminance() {
48    return getComputedStyle(document.documentElement).getPropertyValue('--base-layer-luminance');
49}
50
51export function ClearLocalStorage(id) {
52    const element = document.getElementById(id);
53
54    if (element) {
55        element.themeStorage.clearLocalStorage();
56    }
57}
58
59function UpdateBodyDataSetTheme(theme) {
60    if (theme) {
61        document.body.dataset.theme = theme;
62    } else {
63        const isSystemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
64        document.body.dataset.theme = isSystemDark ? 'dark' : 'light';
65    }
66}