WIP
This commit is contained in:
parent
828e8eae2e
commit
b8b6fe24bc
|
@ -8,7 +8,6 @@ import ProfilePhoto from "./ProfilePhoto";
|
||||||
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
||||||
import useModalStore from "@/store/modals";
|
import useModalStore from "@/store/modals";
|
||||||
import usePermissions from "@/hooks/usePermissions";
|
import usePermissions from "@/hooks/usePermissions";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
collection: CollectionIncludingMembersAndLinkCount;
|
collection: CollectionIncludingMembersAndLinkCount;
|
||||||
|
@ -25,8 +24,6 @@ type DropdownTrigger =
|
||||||
export default function CollectionCard({ collection, className }: Props) {
|
export default function CollectionCard({ collection, className }: Props) {
|
||||||
const { setModal } = useModalStore();
|
const { setModal } = useModalStore();
|
||||||
|
|
||||||
const { theme } = useTheme();
|
|
||||||
|
|
||||||
const formattedDate = new Date(collection.createdAt as string).toLocaleString(
|
const formattedDate = new Date(collection.createdAt as string).toLocaleString(
|
||||||
"en-US",
|
"en-US",
|
||||||
{
|
{
|
||||||
|
@ -45,8 +42,8 @@ export default function CollectionCard({ collection, className }: Props) {
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
|
backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
|
||||||
theme === "dark" ? "#262626" : "#f3f4f6"
|
"dark" ? "#262626" : "#f3f4f6"
|
||||||
} 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
|
} 50%, ${"dark" ? "#262626" : "#f9fafb"} 100%)`,
|
||||||
}}
|
}}
|
||||||
className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
|
className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
|
||||||
className || ""
|
className || ""
|
||||||
|
|
|
@ -10,7 +10,6 @@ import SearchBar from "@/components/SearchBar";
|
||||||
import useAccountStore from "@/store/account";
|
import useAccountStore from "@/store/account";
|
||||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||||
import useModalStore from "@/store/modals";
|
import useModalStore from "@/store/modals";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
import useWindowDimensions from "@/hooks/useWindowDimensions";
|
import useWindowDimensions from "@/hooks/useWindowDimensions";
|
||||||
import ToggleDarkMode from "./ToggleDarkMode";
|
import ToggleDarkMode from "./ToggleDarkMode";
|
||||||
|
|
||||||
|
@ -23,16 +22,6 @@ export default function Navbar() {
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const { theme, setTheme } = useTheme();
|
|
||||||
|
|
||||||
const handleToggle = () => {
|
|
||||||
if (theme === "dark") {
|
|
||||||
setTheme("light");
|
|
||||||
} else {
|
|
||||||
setTheme("dark");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const [sidebar, setSidebar] = useState(false);
|
const [sidebar, setSidebar] = useState(false);
|
||||||
|
|
||||||
const { width } = useWindowDimensions();
|
const { width } = useWindowDimensions();
|
||||||
|
@ -106,9 +95,8 @@ export default function Navbar() {
|
||||||
href: "/settings/account",
|
href: "/settings/account",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
|
name: `Switch to ${"light" ? "Dark" : "Light"}`,
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
handleToggle();
|
|
||||||
setProfileDropdown(!profileDropdown);
|
setProfileDropdown(!profileDropdown);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,31 +1,56 @@
|
||||||
import { useTheme } from "next-themes";
|
import { useEffect, useState } from "react";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ToggleDarkMode({ className }: Props) {
|
export default function ToggleDarkMode({ className }: Props) {
|
||||||
const { theme, setTheme } = useTheme();
|
const [theme, setTheme] = useState(
|
||||||
|
localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"
|
||||||
|
);
|
||||||
|
|
||||||
const handleToggle = () => {
|
const handleToggle = (e: any) => {
|
||||||
if (theme === "dark") {
|
if (e.target.checked) {
|
||||||
setTheme("light");
|
|
||||||
} else {
|
|
||||||
setTheme("dark");
|
setTheme("dark");
|
||||||
|
} else {
|
||||||
|
setTheme("light");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem("theme", theme || "");
|
||||||
|
const localTheme = localStorage.getItem("theme");
|
||||||
|
document
|
||||||
|
.querySelector("html")
|
||||||
|
?.setAttribute("data-theme", localTheme || "");
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<label className="swap swap-rotate className">
|
||||||
className={`cursor-pointer flex select-none border border-sky-600 items-center justify-center dark:bg-neutral-900 bg-white hover:border-sky-500 group duration-100 rounded-full text-white w-10 h-10 ${className}`}
|
<input
|
||||||
onClick={handleToggle}
|
type="checkbox"
|
||||||
>
|
onChange={handleToggle}
|
||||||
<FontAwesomeIcon
|
className="theme-controller"
|
||||||
icon={theme === "dark" ? faSun : faMoon}
|
checked={theme === "light" ? false : true}
|
||||||
className="w-1/2 h-1/2 text-sky-600 group-hover:text-sky-500"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
{/* sun icon */}
|
||||||
|
<svg
|
||||||
|
className="swap-on fill-current w-10 h-10"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* moon icon */}
|
||||||
|
<svg
|
||||||
|
className="swap-off fill-current w-10 h-10"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import React, { ReactNode } from "react";
|
import React, { ReactNode } from "react";
|
||||||
|
@ -9,14 +8,12 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CenteredForm({ text, children }: Props) {
|
export default function CenteredForm({ text, children }: Props) {
|
||||||
const { theme } = useTheme();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
|
<div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
|
||||||
<div className="m-auto flex flex-col gap-2 w-full">
|
<div className="m-auto flex flex-col gap-2 w-full">
|
||||||
{theme ? (
|
{true ? (
|
||||||
<Image
|
<Image
|
||||||
src={`/linkwarden_${theme === "dark" ? "dark" : "light"}.png`}
|
src={`/linkwarden_${"dark" ? "dark" : "light"}.png`}
|
||||||
width={640}
|
width={640}
|
||||||
height={136}
|
height={136}
|
||||||
alt="Linkwarden"
|
alt="Linkwarden"
|
||||||
|
|
|
@ -43,7 +43,6 @@
|
||||||
"micro": "^10.0.1",
|
"micro": "^10.0.1",
|
||||||
"next": "13.4.12",
|
"next": "13.4.12",
|
||||||
"next-auth": "^4.22.1",
|
"next-auth": "^4.22.1",
|
||||||
"next-themes": "^0.2.1",
|
|
||||||
"nodemailer": "^6.9.3",
|
"nodemailer": "^6.9.3",
|
||||||
"playwright": "^1.35.1",
|
"playwright": "^1.35.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import "@/styles/globals.css";
|
import "@/styles/globals.css";
|
||||||
import { SessionProvider } from "next-auth/react";
|
import { SessionProvider } from "next-auth/react";
|
||||||
import type { AppProps } from "next/app";
|
import type { AppProps } from "next/app";
|
||||||
|
@ -6,7 +6,6 @@ import Head from "next/head";
|
||||||
import AuthRedirect from "@/layouts/AuthRedirect";
|
import AuthRedirect from "@/layouts/AuthRedirect";
|
||||||
import { Toaster } from "react-hot-toast";
|
import { Toaster } from "react-hot-toast";
|
||||||
import { Session } from "next-auth";
|
import { Session } from "next-auth";
|
||||||
import { ThemeProvider } from "next-themes";
|
|
||||||
|
|
||||||
export default function App({
|
export default function App({
|
||||||
Component,
|
Component,
|
||||||
|
@ -14,11 +13,20 @@ export default function App({
|
||||||
}: AppProps<{
|
}: AppProps<{
|
||||||
session: Session;
|
session: Session;
|
||||||
}>) {
|
}>) {
|
||||||
const defaultTheme: "light" | "dark" = "dark";
|
const [theme, setTheme] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!localStorage.getItem("theme"))
|
setTheme(
|
||||||
localStorage.setItem("theme", defaultTheme);
|
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 (
|
return (
|
||||||
|
@ -50,17 +58,15 @@ export default function App({
|
||||||
<link rel="manifest" href="/site.webmanifest" />
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
</Head>
|
</Head>
|
||||||
<AuthRedirect>
|
<AuthRedirect>
|
||||||
<ThemeProvider attribute="class">
|
<Toaster
|
||||||
<Toaster
|
position="top-center"
|
||||||
position="top-center"
|
reverseOrder={false}
|
||||||
reverseOrder={false}
|
toastOptions={{
|
||||||
toastOptions={{
|
className:
|
||||||
className:
|
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||||
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
<Component {...pageProps} />
|
||||||
<Component {...pageProps} />
|
|
||||||
</ThemeProvider>
|
|
||||||
</AuthRedirect>
|
</AuthRedirect>
|
||||||
</SessionProvider>
|
</SessionProvider>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,15 +18,12 @@ import useModalStore from "@/store/modals";
|
||||||
import useLinks from "@/hooks/useLinks";
|
import useLinks from "@/hooks/useLinks";
|
||||||
import usePermissions from "@/hooks/usePermissions";
|
import usePermissions from "@/hooks/usePermissions";
|
||||||
import NoLinksFound from "@/components/NoLinksFound";
|
import NoLinksFound from "@/components/NoLinksFound";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { setModal } = useModalStore();
|
const { setModal } = useModalStore();
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const { theme } = useTheme();
|
|
||||||
|
|
||||||
const { links } = useLinkStore();
|
const { links } = useLinkStore();
|
||||||
const { collections } = useCollectionStore();
|
const { collections } = useCollectionStore();
|
||||||
|
|
||||||
|
@ -54,8 +51,8 @@ export default function Index() {
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(-45deg, ${
|
backgroundImage: `linear-gradient(-45deg, ${
|
||||||
activeCollection?.color
|
activeCollection?.color
|
||||||
}30 10%, ${theme === "dark" ? "#262626" : "#f3f4f6"} 50%, ${
|
}30 10%, ${"dark" ? "#262626" : "#f3f4f6"} 50%, ${
|
||||||
theme === "dark" ? "#262626" : "#f9fafb"
|
"dark" ? "#262626" : "#f9fafb"
|
||||||
} 100%)`,
|
} 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"
|
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 (
|
return (
|
||||||
<MainLayout>
|
<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 style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
|
|
|
@ -9,7 +9,6 @@ import {
|
||||||
} from "@/types/global";
|
} from "@/types/global";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import ColorThief, { RGBColor } from "colorthief";
|
import ColorThief, { RGBColor } from "colorthief";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
import unescapeString from "@/lib/client/unescapeString";
|
import unescapeString from "@/lib/client/unescapeString";
|
||||||
import isValidUrl from "@/lib/client/isValidUrl";
|
import isValidUrl from "@/lib/client/isValidUrl";
|
||||||
import DOMPurify from "dompurify";
|
import DOMPurify from "dompurify";
|
||||||
|
@ -31,7 +30,6 @@ type LinkContent = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { theme } = useTheme();
|
|
||||||
const { links, getLink } = useLinkStore();
|
const { links, getLink } = useLinkStore();
|
||||||
const { setModal } = useModalStore();
|
const { setModal } = useModalStore();
|
||||||
|
|
||||||
|
@ -140,13 +138,13 @@ export default function Index() {
|
||||||
)})30`;
|
)})30`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [colorPalette, theme]);
|
}, [colorPalette]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LinkLayout>
|
<LinkLayout>
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col max-w-screen-md h-full ${
|
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
|
<div
|
||||||
|
|
|
@ -12,7 +12,6 @@ import ProfilePhoto from "@/components/ProfilePhoto";
|
||||||
import useModalStore from "@/store/modals";
|
import useModalStore from "@/store/modals";
|
||||||
import ModalManagement from "@/components/ModalManagement";
|
import ModalManagement from "@/components/ModalManagement";
|
||||||
import ToggleDarkMode from "@/components/ToggleDarkMode";
|
import ToggleDarkMode from "@/components/ToggleDarkMode";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
@ -46,8 +45,6 @@ export default function PublicCollections() {
|
||||||
: (document.body.style.overflow = "auto");
|
: (document.body.style.overflow = "auto");
|
||||||
}, [modal]);
|
}, [modal]);
|
||||||
|
|
||||||
const { theme } = useTheme();
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const [collectionOwner, setCollectionOwner] = useState({
|
const [collectionOwner, setCollectionOwner] = useState({
|
||||||
|
@ -106,8 +103,8 @@ export default function PublicCollections() {
|
||||||
className="h-screen"
|
className="h-screen"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
|
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
|
||||||
theme === "dark" ? "#262626" : "#f3f4f6"
|
"dark" ? "#262626" : "#f3f4f6"
|
||||||
} 50%, ${theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
} 50%, ${"dark" ? "#171717" : "#ffffff"} 100%)`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ModalManagement />
|
<ModalManagement />
|
||||||
|
|
|
@ -9,7 +9,6 @@ import {
|
||||||
} from "@/types/global";
|
} from "@/types/global";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import ColorThief, { RGBColor } from "colorthief";
|
import ColorThief, { RGBColor } from "colorthief";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
import unescapeString from "@/lib/client/unescapeString";
|
import unescapeString from "@/lib/client/unescapeString";
|
||||||
import isValidUrl from "@/lib/client/isValidUrl";
|
import isValidUrl from "@/lib/client/isValidUrl";
|
||||||
import DOMPurify from "dompurify";
|
import DOMPurify from "dompurify";
|
||||||
|
@ -31,7 +30,6 @@ type LinkContent = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { theme } = useTheme();
|
|
||||||
const { links, getLink } = useLinkStore();
|
const { links, getLink } = useLinkStore();
|
||||||
const { setModal } = useModalStore();
|
const { setModal } = useModalStore();
|
||||||
|
|
||||||
|
@ -140,13 +138,13 @@ export default function Index() {
|
||||||
)})30`;
|
)})30`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [colorPalette, theme]);
|
}, [colorPalette]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LinkLayout>
|
<LinkLayout>
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col max-w-screen-md h-full ${
|
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
|
<div
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import SettingsLayout from "@/layouts/SettingsLayout";
|
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||||
import { useTheme } from "next-themes";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
|
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
@ -16,8 +15,6 @@ import Checkbox from "@/components/Checkbox";
|
||||||
import LinkPreview from "@/components/LinkPreview";
|
import LinkPreview from "@/components/LinkPreview";
|
||||||
|
|
||||||
export default function Appearance() {
|
export default function Appearance() {
|
||||||
const { theme, setTheme } = useTheme();
|
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
setSubmitLoader(true);
|
setSubmitLoader(true);
|
||||||
|
|
||||||
|
@ -78,11 +75,8 @@ export default function Appearance() {
|
||||||
<div className="flex gap-3 w-full">
|
<div className="flex gap-3 w-full">
|
||||||
<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-black ${
|
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" ? "dark:outline-sky-500 text-sky-500" : "text-white"
|
||||||
? "dark:outline-sky-500 text-sky-500"
|
|
||||||
: "text-white"
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setTheme("dark")}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
|
<FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
|
||||||
<p className="text-2xl">Dark Theme</p>
|
<p className="text-2xl">Dark Theme</p>
|
||||||
|
@ -91,11 +85,8 @@ export default function Appearance() {
|
||||||
</div>
|
</div>
|
||||||
<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 ${
|
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"
|
"light" ? "outline-sky-500 text-sky-500" : "text-black"
|
||||||
? "outline-sky-500 text-sky-500"
|
|
||||||
: "text-black"
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setTheme("light")}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
|
<FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
|
||||||
<p className="text-2xl">Light Theme</p>
|
<p className="text-2xl">Light Theme</p>
|
||||||
|
|
|
@ -245,13 +245,14 @@ body {
|
||||||
.reader-view code {
|
.reader-view code {
|
||||||
padding: 0.15rem 0.4rem 0.15rem 0.4rem;
|
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);
|
background-color: rgb(49, 49, 49);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
[class="light"] .reader-view code,
|
[data-theme="light"] .reader-view code,
|
||||||
[class="light"] .reader-view pre {
|
[data-theme="light"] .reader-view pre {
|
||||||
background-color: rgb(230, 230, 230);
|
background-color: rgb(230, 230, 230);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,38 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
const plugin = require("tailwindcss/plugin");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
darkMode: "class",
|
daisyui: {
|
||||||
// daisyui: {
|
themes: [
|
||||||
// themes: ["light", "dark"],
|
{
|
||||||
// },
|
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: [
|
content: [
|
||||||
"./app/**/*.{js,ts,jsx,tsx}",
|
"./app/**/*.{js,ts,jsx,tsx}",
|
||||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||||
|
@ -14,6 +42,9 @@ module.exports = {
|
||||||
"./layouts/**/*.{js,ts,jsx,tsx}",
|
"./layouts/**/*.{js,ts,jsx,tsx}",
|
||||||
],
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
// require("daisyui")
|
require("daisyui"),
|
||||||
|
plugin(({ addVariant }) => {
|
||||||
|
addVariant("dark", '&[data-theme="dark"]');
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -3825,11 +3825,6 @@ next-auth@^4.22.1:
|
||||||
preact-render-to-string "^5.1.19"
|
preact-render-to-string "^5.1.19"
|
||||||
uuid "^8.3.2"
|
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:
|
next@13.4.12:
|
||||||
version "13.4.12"
|
version "13.4.12"
|
||||||
resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"
|
resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"
|
||||||
|
|
Ŝarĝante…
Reference in New Issue