mui-extended/dist/ThemeModeSwitch.js

Extended UI Components built on Material UI

import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMediaQuery, ButtonGroup, Button } from "@mui/material";
import { useEffect } from "react";
import { useThemeOptions } from "./ThemeOptionsContext";
import { useStateWithLocalStorage } from "./utils/WebStorage";
import LightModeIcon from "@mui/icons-material/LightMode";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import InvertColorsIcon from "@mui/icons-material/InvertColors";
var resolveThemeMode = function (themeMode, systemPrefersDarkMode, checkedPreference) {
    if (!checkedPreference) {
        return "light";
    }
    if (themeMode == "system") {
        return systemPrefersDarkMode ? "dark" : "light";
    }
    else if (themeMode == "dark") {
        return "dark";
    }
    else {
        return "light";
    }
};
export var ThemeModeSwitch = function (props) {
    var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
    var _a = useStateWithLocalStorage("theme-mode", "system"), themeMode = _a[0], setThemeMode = _a[1], checked = _a[2];
    var setThemeOptions = useThemeOptions().setThemeOptions;
    useEffect(function () {
        setThemeOptions({
            palette: {
                mode: resolveThemeMode(themeMode, prefersDarkMode, checked)
            }
        });
    }, [themeMode, prefersDarkMode, setThemeOptions, checked]);
    return (_jsxs(ButtonGroup, __assign({}, props, { variant: "outlined", "aria-label": "theme-chooser", color: resolveThemeMode(themeMode, prefersDarkMode, checked) == "light"
            ? "primary"
            : "secondary", children: [_jsx(Button, { onClick: function () {
                    setThemeMode("system");
                }, startIcon: _jsx(InvertColorsIcon, {}), disabled: themeMode == "system", children: "System" }), _jsx(Button, { onClick: function () {
                    setThemeMode("dark");
                }, startIcon: _jsx(DarkModeIcon, {}), disabled: themeMode == "dark", children: "Dark" }), _jsx(Button, { onClick: function () {
                    setThemeMode("light");
                }, startIcon: _jsx(LightModeIcon, {}), disabled: themeMode == "light", children: "Light" })] })));
};