added useMetaThemeColor

ganymedelabs · Aug 13, 2024 · 5ab918d · 5ab918d
1 parent dd3ede8
commit 5ab918d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -21,7 +21,7 @@ import Login from "./pages/account/Login";
 import Account from "./pages/account/Account";
 import ForgotPassword from "./pages/account/ForgotPassword";
 import firestoreDB from "./data/db/firebase/firebase";
-import { useDynamicTitle } from "./hooks/hooks.tsx";
+import { useDocumentTitle, useMetaThemeColor } from "./hooks/hooks.tsx";
 import { useToast } from "./context/ToastContext.tsx";
 import { retrieveUserData } from "./utils/dataUtils.ts";
 
@@ -30,7 +30,8 @@ export default function App() {
     const { currentUser } = useAuth();
     const dispatch = useDispatch();
     const toast = useToast();
-    useDynamicTitle();
+    useDocumentTitle();
+    useMetaThemeColor();
 
     useEffect(() => {
         dispatch(loadBibs());

diff --git a/src/hooks/hooks.tsx b/src/hooks/hooks.tsx
@@ -101,7 +101,7 @@ export function useEnhancedDispatch(config: EnhancedDispatchConfig) {
  * @param {string} fallback - Default title to use if no H1 element is found.
  * @returns {string} The dynamically generated title.
  */
-export function useDynamicTitle(
+export function useDocumentTitle(
     prefix: string = "",
     suffix: string = " - CiteEase",
     fallback: string = "CiteEase"
@@ -122,6 +122,32 @@ export function useDynamicTitle(
     return title;
 }
 
+/**
+ * Sets the theme color based on the passed color or the current background color of the page,
+ * and updates the `<meta name="theme-color">` tag accordingly.
+ *
+ * @param color - The desired theme color. Defaults to `undefined`, which means it will use the current background color of the page.
+ * @returns The final theme color set (either the passed color or the current background color).
+ */
+export function useMetaThemeColor(color?: string): string {
+    const [backgroundColor, setBackgroundColor] = useState<string>("");
+
+    useEffect(() => {
+        const style = window.getComputedStyle(document.documentElement);
+        setBackgroundColor(color || style.getPropertyValue("background-color"));
+    });
+
+    useEffect(() => {
+        // eslint-disable-next-line quotes
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute("content", backgroundColor);
+        }
+    }, [backgroundColor]);
+
+    return backgroundColor;
+}
+
 export default function useOnlineStatus() {
     const [online, setOnline] = useState(navigator.onLine);
 

diff --git a/src/index.css b/src/index.css
@@ -2,14 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-/* #FFD60A */
+/* --md-colors are based on #FFD60A, created using the Material Theme Builder at https://material-foundation.github.io/material-theme-builder/ */
 
 @layer base {
     :root {
-        --md-ref-typeface-brand: "Poppins", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
-            "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif";
-        --md-ref-typeface-plain: "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen",
-            "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif";
+        --md-ref-typeface-brand: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+            Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        --md-ref-typeface-plain: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+            Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 
         --md-sys-color-primary: #6f5d0e;
         --md-sys-color-on-primary: #ffffff;