adwaita-web/dist/components/ThemeProvider.js

A GTK inspired toolkit designed to build awesome web apps

import React from "react";
import { Adwaita } from "../adwaita";
const themeContext = React.createContext({
  isDefault: true,
  theme: "light",
  variablesMap: /* @__PURE__ */ new Map()
});
const ThemeProvider = (props) => {
  const ctx = React.useContext(themeContext);
  if (!ctx.isDefault)
    return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
  const [theme, setTheme] = React.useState(props.theme);
  const [variablesMap, setVariablesMap] = React.useState(/* @__PURE__ */ new Map());
  React.useEffect(() => {
    switch (props.theme) {
      case "light":
        Adwaita.changeToLightTheme();
        break;
      case "dark":
        Adwaita.changeToDarkTheme();
        break;
    }
    setTheme(props.theme);
    setVariablesMap(Adwaita.getVariables());
  }, [props.theme]);
  return /* @__PURE__ */ React.createElement(themeContext.Provider, {
    value: { isDefault: false, variablesMap, theme }
  }, /* @__PURE__ */ React.createElement("div", {
    className: theme === "dark" ? "adwaita-dark-theme" : "adwaita-light-theme",
    style: { display: "contents" }
  }, props.children));
};
const useTheme = () => {
  const ctx = React.useContext(themeContext);
  return {
    theme: ctx.theme,
    variables: ctx.variablesMap
  };
};
export {
  ThemeProvider,
  useTheme
};