diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index c382f6e..02f3f34 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -8,7 +8,6 @@ import ProfilePhoto from "./ProfilePhoto"; import { faCalendarDays } from "@fortawesome/free-regular-svg-icons"; import useModalStore from "@/store/modals"; import usePermissions from "@/hooks/usePermissions"; -import { useTheme } from "next-themes"; type Props = { collection: CollectionIncludingMembersAndLinkCount; @@ -25,8 +24,6 @@ type DropdownTrigger = export default function CollectionCard({ collection, className }: Props) { const { setModal } = useModalStore(); - const { theme } = useTheme(); - const formattedDate = new Date(collection.createdAt as string).toLocaleString( "en-US", { @@ -45,8 +42,8 @@ export default function CollectionCard({ collection, className }: Props) {
{ - if (theme === "dark") { - setTheme("light"); - } else { - setTheme("dark"); - } - }; - const [sidebar, setSidebar] = useState(false); const { width } = useWindowDimensions(); @@ -106,9 +95,8 @@ export default function Navbar() { href: "/settings/account", }, { - name: `Switch to ${theme === "light" ? "Dark" : "Light"}`, + name: `Switch to ${"light" ? "Dark" : "Light"}`, onClick: () => { - handleToggle(); setProfileDropdown(!profileDropdown); }, }, diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx index cff56c0..b610ac0 100644 --- a/components/ToggleDarkMode.tsx +++ b/components/ToggleDarkMode.tsx @@ -1,31 +1,56 @@ -import { useTheme } from "next-themes"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons"; +import { useEffect, useState } from "react"; type Props = { className?: string; }; export default function ToggleDarkMode({ className }: Props) { - const { theme, setTheme } = useTheme(); + const [theme, setTheme] = useState( + localStorage.getItem("theme") ? localStorage.getItem("theme") : "light" + ); - const handleToggle = () => { - if (theme === "dark") { - setTheme("light"); - } else { + const handleToggle = (e: any) => { + if (e.target.checked) { setTheme("dark"); + } else { + setTheme("light"); } }; + useEffect(() => { + localStorage.setItem("theme", theme || ""); + const localTheme = localStorage.getItem("theme"); + document + .querySelector("html") + ?.setAttribute("data-theme", localTheme || ""); + }, [theme]); + return ( -
- + -
+ + {/* sun icon */} + + + + + {/* moon icon */} + + + + ); } diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx index 492d85e..f3dfa35 100644 --- a/layouts/CenteredForm.tsx +++ b/layouts/CenteredForm.tsx @@ -1,4 +1,3 @@ -import { useTheme } from "next-themes"; import Image from "next/image"; import Link from "next/link"; import React, { ReactNode } from "react"; @@ -9,14 +8,12 @@ interface Props { } export default function CenteredForm({ text, children }: Props) { - const { theme } = useTheme(); - return (
- {theme ? ( + {true ? ( Linkwarden) { - 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({ - - - - + + ); diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index d4858e2..7f23631 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -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" diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 4469c5a..5bf2786 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -106,6 +106,8 @@ export default function Dashboard() { return ( + +
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx index 15aec43..c42e171 100644 --- a/pages/public/links/[id].tsx +++ b/pages/public/links/[id].tsx @@ -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 (
{ setSubmitLoader(true); @@ -78,11 +75,8 @@ export default function Appearance() {
setTheme("dark")} >

Dark Theme

@@ -91,11 +85,8 @@ export default function Appearance() {
setTheme("light")} >

Light Theme

diff --git a/styles/globals.css b/styles/globals.css index eaf3dbb..38abe37 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -245,13 +245,14 @@ body { .reader-view code { padding: 0.15rem 0.4rem 0.15rem 0.4rem; } -[class="dark"] .reader-view code, -[class="dark"] .reader-view pre { + +[data-theme="dark"] .reader-view code, +[data-theme="dark"] .reader-view pre { background-color: rgb(49, 49, 49); border-radius: 8px; } -[class="light"] .reader-view code, -[class="light"] .reader-view pre { +[data-theme="light"] .reader-view code, +[data-theme="light"] .reader-view pre { background-color: rgb(230, 230, 230); border-radius: 8px; } diff --git a/tailwind.config.js b/tailwind.config.js index 34690e4..796b4a4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,38 @@ /** @type {import('tailwindcss').Config} */ +const plugin = require("tailwindcss/plugin"); module.exports = { - darkMode: "class", - // daisyui: { - // themes: ["light", "dark"], - // }, + daisyui: { + themes: [ + { + light: { + primary: "#0ea5e9", + secondary: "#22d3ee", + accent: "#4f46e5", + neutral: "#6b7280", + "base-100": "#f5f5f4", + info: "#a5f3fc", + success: "#22c55e", + warning: "#facc15", + error: "#dc2626", + }, + }, + { + dark: { + primary: "#38bdf8", + secondary: "#0284c7", + accent: "#818cf8", + neutral: "#1f2937", + "base-100": "#fcfcfc", + info: "#009ee4", + success: "#00b17d", + warning: "#eac700", + error: "#f1293c", + }, + }, + ], + }, + darkMode: ["class", '[data-theme="dark"]'], content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", @@ -14,6 +42,9 @@ module.exports = { "./layouts/**/*.{js,ts,jsx,tsx}", ], plugins: [ - // require("daisyui") + require("daisyui"), + plugin(({ addVariant }) => { + addVariant("dark", '&[data-theme="dark"]'); + }), ], }; diff --git a/yarn.lock b/yarn.lock index feb1783..eec8abe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3825,11 +3825,6 @@ next-auth@^4.22.1: preact-render-to-string "^5.1.19" uuid "^8.3.2" -next-themes@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45" - integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A== - next@13.4.12: version "13.4.12" resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"