feature: UNI/277: Dark Mode Flashing when content is not mounted (#300)

KevinSutandi · web-flow · commit 9b9efd86c5e9 · 2024-06-12T13:04:03.000+10:00
* dark mode border on navbar changed

* provided fix for flashing when refreshing or changing pages in dark mode

* fixed flashing when content is not mounted

* addes session user accessToken back

* updated theme-color colors to match bg

* removed scraper files

* added more docs to the functions and descriptions

---------
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -14,13 +14,33 @@ export default async function RootLayout({
   const session = await getServerSession(authOptions);
 
   return (
-    <html lang='en' className='font-custom'>
-      <body>
+    <html lang='en' className='font-custom '>
+      <head>
+        {/* Only used in Safari - Change Navbar to slate-800 colors when dark mode */}
+        <meta name="theme-color" content="#ffffff" />
+        {/* Fetch theme of user before page is loaded in order to avoid flashing in safari.
+         also sets theme-color meta tag to the appropriate color */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+                try {
+                  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                    document.documentElement.classList.add('dark')
+                    document.querySelector('meta[name="theme-color"]').setAttribute('content', '#1e293b')
+                  } else {
+                    document.documentElement.classList.remove('dark')
+                  }
+                } catch (_) {}
+              `,
+          }}
+        />
+      </head>
+      <body className="bg-white dark:bg-slate-800 dark:text-gray-200">
         <Provider session={session}>
           <AlertProvider>
             <ThemeProviderComponent>
               <Navbar userZid={session?.user?.id} />
-              <div className='ml-20 xs:ml-15 bg-white dark:bg-slate-800 dark:text-gray-200 h-screen overflow-y-scroll'>
+              <div className='ml-20 xs:ml-15 h-screen overflow-y-scroll'>
                 {children}
               </div>
             </ThemeProviderComponent>
diff --git a/frontend/src/app/user/[zid]/page.tsx b/frontend/src/app/user/[zid]/page.tsx
@@ -30,7 +30,7 @@ export default async function UserPage({
   const { user } = await validatedReq(
     "GET",
     `/user/${params.zid}`,
-    "",
+    session?.user?.accessToken ?? "",
     params.zid
   );
 
diff --git a/frontend/src/components/ThemeComponents/ThemeProvider.tsx b/frontend/src/components/ThemeComponents/ThemeProvider.tsx
@@ -9,7 +9,14 @@ type Props = {
   children: string | React.ReactNode;
 };
 
-export default function ThemeProviderComponent({ children }: Props) {
+/**
+ * Component that provides a theme to its child components.
+ *
+ * @param {Props} props - The component props.
+ * @param {React.ReactNode} props.children - The child components to be wrapped by the theme provider.
+ * @returns {JSX.Element | null} - If page is mounted then show the page otherwise it will make browser show no content.
+ */
+export default function ThemeProviderComponent({ children }: Props): JSX.Element | null {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
diff --git a/frontend/src/components/ThemeComponents/ThemeSwitcher.tsx b/frontend/src/components/ThemeComponents/ThemeSwitcher.tsx
@@ -5,22 +5,44 @@ import { useTheme } from "next-themes";
 import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
 import Tooltip from "@/components/Tooltip/Tooltip";
 
-interface ThemeSwitcherProps {
-  collapsed: boolean;
-}
+/**
+ * Renders a theme switcher component.
+ *
+ * @param {object} props - The component props.
+ * @param {boolean} props.collapsed - Indicates whether the theme switcher is collapsed.
+ * @returns {JSX.Element | null} The rendered theme switcher component or null if not mounted.
+ */
 
-export default function ThemeSwitcher({ collapsed }: ThemeSwitcherProps) {
+export default function ThemeSwitcher({ collapsed }: { collapsed: boolean }): JSX.Element | null {
   const [mounted, setMounted] = useState<boolean>(false);
-  const { systemTheme, theme, setTheme } = useTheme();
+  const { systemTheme, theme, setTheme, resolvedTheme } = useTheme();
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    if (resolvedTheme === 'dark') {
+      // Change theme-color meta tag to slate-800 color when dark mode
+      document
+        .querySelector('meta[name="theme-color"]')!
+        .setAttribute('content', '#1e293b')
+    } else {
+      // Change theme-color meta tag to white when light mode
+      document
+        .querySelector('meta[name="theme-color"]')!
+        .setAttribute('content', '#ffffff')
+    }
+  }, [resolvedTheme])
+
   if (!mounted) {
     return null;
   }
 
+  /**
+   * Renders the theme changer component based on the current theme.
+   * @returns The rendered theme changer component.
+   */
   const renderThemeChanger = () => {
     const currentTheme = theme === "system" ? systemTheme : theme;
 
