@twa-dev/mark42/dist/Components/AppearanceProvider/AppearanceProvider.js

Mark42 is a simple lightweight tree-shakable UI library for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps).

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { createContext, useEffect, useMemo, useState } from "react";
import WebApp from "@twa-dev/sdk";
import { jsx as _jsx } from "react/jsx-runtime";

function resolveThemeByPlatform(platform) {
  if (platform) {
    return platform === "macos" || platform === "ios" ? "apple" : "material";
  } else if (navigator.userAgent.match(/iOS|iPhone OS|iPhone|iPod|iPad|Mac OS/i)) {
    return "apple";
  } else {
    return "material";
  }
}

export var AppearanceContext = /*#__PURE__*/createContext({
  colorScheme: WebApp.colorScheme,
  theme: resolveThemeByPlatform(WebApp.platform),
  platform: WebApp.platform
});
export var AppearanceProvider = function AppearanceProvider(_ref) {
  var children = _ref.children,
      themeProp = _ref.theme,
      platformProp = _ref.platform,
      colorSchemeProp = _ref.colorScheme;

  var _useState = useState(colorSchemeProp || WebApp.colorScheme),
      _useState2 = _slicedToArray(_useState, 2),
      colorScheme = _useState2[0],
      setColorScheme = _useState2[1];

  var platform = platformProp || WebApp.platform;
  var theme = useMemo(function () {
    return themeProp || resolveThemeByPlatform(platform);
  }, [themeProp, platform]);
  useEffect(function () {
    document.body.setAttribute("data-theme", theme);
  }, [theme]);
  useEffect(function () {
    if (!colorSchemeProp) {
      var onChange = function onChange() {
        setColorScheme(WebApp.colorScheme);
      };

      WebApp.onEvent("themeChanged", onChange);
      return function () {
        WebApp.offEvent("themeChanged", onChange);
      };
    } else {
      setColorScheme(colorSchemeProp);
    }
  }, [colorSchemeProp]);
  useEffect(function () {
    document.body.setAttribute("data-color-scheme", colorScheme);
  }, [colorScheme]);
  var value = useMemo(function () {
    return {
      platform: platform,
      theme: theme,
      colorScheme: colorScheme
    };
  }, [colorScheme, theme, platform]);
  return /*#__PURE__*/_jsx(AppearanceContext.Provider, {
    value: value,
    children: children
  });
};