WIP

2023-11-24 03:06:33 -05:00
parent 828e8eae2e
commit b8b6fe24bc
15 changed files with 121 additions and 99 deletions
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import "@/styles/globals.css";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
@@ -6,7 +6,6 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
-import { ThemeProvider } from "next-themes";

 export default function App({
  Component,
@@ -14,11 +13,20 @@ export default function App({
 }: AppProps<{
  session: Session;
 }>) {
-  const defaultTheme: "light" | "dark" = "dark";
+  const [theme, setTheme] = useState("");

  useEffect(() => {
-    if (!localStorage.getItem("theme"))
-      localStorage.setItem("theme", defaultTheme);
+    setTheme(
+      localStorage.getItem("theme")
+        ? (localStorage.getItem("theme") as string)
+        : "light"
+    );
+
+    if (theme) localStorage.setItem("theme", theme as string);
+    const localTheme = localStorage.getItem("theme");
+    document
+      .querySelector("html")
+      ?.setAttribute("data-theme", localTheme || "");
  }, []);

  return (
@@ -50,17 +58,15 @@ export default function App({
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <AuthRedirect>
-        <ThemeProvider attribute="class">
-          <Toaster
-            position="top-center"
-            reverseOrder={false}
-            toastOptions={{
-              className:
-                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-            }}
-          />
-          <Component {...pageProps} />
-        </ThemeProvider>
+        <Toaster
+          position="top-center"
+          reverseOrder={false}
+          toastOptions={{
+            className:
+              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+          }}
+        />
+        <Component {...pageProps} />
      </AuthRedirect>
    </SessionProvider>
  );
@@ -18,15 +18,12 @@ import useModalStore from "@/store/modals";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
-import { useTheme } from "next-themes";

 export default function Index() {
  const { setModal } = useModalStore();

  const router = useRouter();

-  const { theme } = useTheme();
-
  const { links } = useLinkStore();
  const { collections } = useCollectionStore();

@@ -54,8 +51,8 @@ export default function Index() {
          style={{
            backgroundImage: `linear-gradient(-45deg, ${
              activeCollection?.color
-            }30 10%, ${theme === "dark" ? "#262626" : "#f3f4f6"} 50%, ${
-              theme === "dark" ? "#262626" : "#f9fafb"
+            }30 10%, ${"dark" ? "#262626" : "#f3f4f6"} 50%, ${
+              "dark" ? "#262626" : "#f9fafb"
            } 100%)`,
          }}
          className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
@@ -106,6 +106,8 @@ export default function Dashboard() {

  return (
    <MainLayout>
+      <button className="btn btn-primary">Primary</button>
+      <button className=" dark:bg-red-500">Primary</button>
      <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
        <div className="flex items-center gap-3">
          <FontAwesomeIcon
@@ -9,7 +9,6 @@ import {
 } from "@/types/global";
 import Image from "next/image";
 import ColorThief, { RGBColor } from "colorthief";
-import { useTheme } from "next-themes";
 import unescapeString from "@/lib/client/unescapeString";
 import isValidUrl from "@/lib/client/isValidUrl";
 import DOMPurify from "dompurify";
@@ -31,7 +30,6 @@ type LinkContent = {
 };

 export default function Index() {
-  const { theme } = useTheme();
  const { links, getLink } = useLinkStore();
  const { setModal } = useModalStore();

@@ -140,13 +138,13 @@ export default function Index() {
        )})30`;
      }
    }
-  }, [colorPalette, theme]);
+  }, [colorPalette]);

  return (
    <LinkLayout>
      <div
        className={`flex flex-col max-w-screen-md h-full ${
-          theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
+          "dark" ? "banner-dark-mode" : "banner-light-mode"
        }`}
      >
        <div
@@ -12,7 +12,6 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import useModalStore from "@/store/modals";
 import ModalManagement from "@/components/ModalManagement";
 import ToggleDarkMode from "@/components/ToggleDarkMode";
-import { useTheme } from "next-themes";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
 import Link from "next/link";
@@ -46,8 +45,6 @@ export default function PublicCollections() {
      : (document.body.style.overflow = "auto");
  }, [modal]);

-  const { theme } = useTheme();
-
  const router = useRouter();

  const [collectionOwner, setCollectionOwner] = useState({
@@ -106,8 +103,8 @@ export default function PublicCollections() {
      className="h-screen"
      style={{
        backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
-          theme === "dark" ? "#262626" : "#f3f4f6"
-        } 50%, ${theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+          "dark" ? "#262626" : "#f3f4f6"
+        } 50%, ${"dark" ? "#171717" : "#ffffff"} 100%)`,
      }}
    >
      <ModalManagement />
@@ -9,7 +9,6 @@ import {
 } from "@/types/global";
 import Image from "next/image";
 import ColorThief, { RGBColor } from "colorthief";
-import { useTheme } from "next-themes";
 import unescapeString from "@/lib/client/unescapeString";
 import isValidUrl from "@/lib/client/isValidUrl";
 import DOMPurify from "dompurify";
@@ -31,7 +30,6 @@ type LinkContent = {
 };

 export default function Index() {
-  const { theme } = useTheme();
  const { links, getLink } = useLinkStore();
  const { setModal } = useModalStore();

@@ -140,13 +138,13 @@ export default function Index() {
        )})30`;
      }
    }
-  }, [colorPalette, theme]);
+  }, [colorPalette]);

  return (
    <LinkLayout>
      <div
        className={`flex flex-col max-w-screen-md h-full ${
-          theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
+          "dark" ? "banner-dark-mode" : "banner-light-mode"
        }`}
      >
        <div
@@ -1,5 +1,4 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import { useTheme } from "next-themes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 import { useState, useEffect } from "react";
@@ -16,8 +15,6 @@ import Checkbox from "@/components/Checkbox";
 import LinkPreview from "@/components/LinkPreview";

 export default function Appearance() {
-  const { theme, setTheme } = useTheme();
-
  const submit = async () => {
    setSubmitLoader(true);

@@ -78,11 +75,8 @@ export default function Appearance() {
          <div className="flex gap-3 w-full">
            <div
              className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
-                theme === "dark"
-                  ? "dark:outline-sky-500 text-sky-500"
-                  : "text-white"
+                "dark" ? "dark:outline-sky-500 text-sky-500" : "text-white"
              }`}
-              onClick={() => setTheme("dark")}
            >
              <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
              <p className="text-2xl">Dark Theme</p>
@@ -91,11 +85,8 @@ export default function Appearance() {
            </div>
            <div
              className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
-                theme === "light"
-                  ? "outline-sky-500 text-sky-500"
-                  : "text-black"
+                "light" ? "outline-sky-500 text-sky-500" : "text-black"
              }`}
-              onClick={() => setTheme("light")}
            >
              <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
              <p className="text-2xl">Light Theme</p>