final touch on darkmode

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="./assets/icon.png" width="100px" />
+  <img src="./assets/logo.png" width="100px" />
   <h1>Linkwarden</h1>
 
 <a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat-square" alt="Discord"></a>

components/Modal/User/BillingPortal.tsx

@@ -17,8 +17,8 @@ export default function PaymentPortal() {
 
   return (
     <div className="mx-auto sm:w-[35rem] w-80">
-      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-md text-gray-500 dark:text-gray-400">
+      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md text-black dark:text-white">
           To manage/cancel your subsciption, visit the billing portal.
         </p>
 
@@ -30,7 +30,7 @@ export default function PaymentPortal() {
           className="mx-auto mt-2"
         />
 
-        <p className="text-md text-gray-500 dark:text-gray-400">
+        <p className="text-md text-black dark:text-white">
           If you still need help or encountered any issues, feel free to reach
           out to us at:{" "}
           <a

components/Modal/User/ProfileSettings.tsx

@@ -170,12 +170,12 @@ export default function ProfileSettings({
 
           {emailEnabled ? (
             <div>
-              <p className="text-sm text-black mb-2">Email</p>
+              <p className="text-sm text-black dark:text-white mb-2">Email</p>
               <input
                 type="text"
                 value={user.email || ""}
                 onChange={(e) => setUser({ ...user, email: e.target.value })}
-                className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+                className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
               />
             </div>
           ) : undefined}

layouts/CenteredForm.tsx

@@ -1,4 +1,6 @@
+import { useTheme } from "next-themes";
 import Image from "next/image";
+import Link from "next/link";
 import React, { ReactNode } from "react";
 
 interface Props {
@@ -7,24 +9,39 @@ interface Props {
 }
 
 export default function CenteredForm({ text, children }: Props) {
+  const { theme } = useTheme();
   return (
-    <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-2">
+    <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">
-        <Image
-          src="/linkwarden.png"
-          width={518}
-          height={145}
-          alt="Linkwarden"
-          className="h-12 w-fit mx-auto"
-        />
+        {theme === "light" ? (
+          <Image
+            src="/linkwarden.png"
+            width={518}
+            height={145}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : (
+          <Image
+            src="/linkwarden_darkmode.png"
+            width={518}
+            height={145}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        )}
         {text ? (
           <p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black dark:text-white px-2 text-center">
             {text}
           </p>
         ) : undefined}
         {children}
-        <p className="text-center text-xs text-gray-500 dark:text-gray-400">
-          © {new Date().getFullYear()} Linkwarden. All rights reserved.
+        <p className="text-center text-xs text-gray-500 mb-5 dark:text-gray-400">
+          © {new Date().getFullYear()}{" "}
+          <Link href="https://linkwarden.app" className="font-semibold">
+            Linkwarden
+          </Link>
+          . All rights reserved.
         </p>
       </div>
     </div>

pages/_app.tsx

@@ -14,8 +14,11 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
+  const defaultTheme: "light" | "dark" = "dark";
+
   useEffect(() => {
-    if (!localStorage.getItem("theme")) localStorage.setItem("theme", "light");
+    if (!localStorage.getItem("theme"))
+      localStorage.setItem("theme", defaultTheme);
   }, []);
 
   return (

pages/collections/[id].tsx

@@ -116,7 +116,7 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-500 dark:text-gray-300 flex justify-between items-end gap-5">
+          <div className="text-black dark:text-white flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">

pages/forgot.tsx

@@ -41,7 +41,7 @@ export default function Forgot() {
   return (
     <CenteredForm>
       <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
-        <p className="text-2xl text-black dark:text-white font-bold">
+        <p className="text-2xl text-center text-black dark:text-white font-bold">
           Password Recovery
         </p>
         <div>

pages/login.tsx

@@ -55,7 +55,7 @@ export default function Login() {
         <div>
           <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Username
-            {emailEnabled ? "/Email" : undefined}
+            {emailEnabled ? " or Email" : undefined}
           </p>
 
           <input