fix: Reset fontsize when the fontsize of the html element is changed. (#348)

src/hooks/Theme.js

@@ -9,7 +9,7 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
  * @param {*} param0
  * @returns
  */
-export default function Theme({ children, options, styles }) {
+export default function Theme({ children, options = {}, styles = {} }) {
   const { darkMode } = useDarkMode();
   const [systemMode, setSystemMode] = useState(THEME_LIGHT);
 
@@ -27,17 +27,6 @@ export default function Theme({ children, options, styles }) {
   }, []);
 
   const theme = useMemo(() => {
-    let htmlFontSize = 16;
-    try {
-      const s = window.getComputedStyle(document.body.parentNode).fontSize;
-      const fontSize = parseInt(s.replace("px", ""));
-      if (fontSize > 0 && fontSize < 1000) {
-        htmlFontSize = fontSize;
-      }
-    } catch (err) {
-      //
-    }
-
     const isDarkMode =
       darkMode === "dark" || (darkMode === "auto" && systemMode === THEME_DARK);
 
@@ -46,7 +35,7 @@ export default function Theme({ children, options, styles }) {
         mode: isDarkMode ? THEME_DARK : THEME_LIGHT,
       },
       typography: {
-        htmlFontSize,
+        htmlFontSize: document.documentElement.style.fontSize ? "16px" : 16,
       },
       ...options,
     });