changed classNames

components/AnnouncementBar.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
   return (
-    <div className="fixed w-full z-20 dark:bg-neutral-900 bg-white">
+    <div className="fixed w-full z-20 bg-base-200">
       <div className="w-full h-10 rainbow flex items-center justify-center">
         <div className="w-fit font-semibold">
           🎉️{" "}

components/CollectionCard.tsx

@@ -47,19 +47,22 @@ export default function CollectionCard({ collection, className }: Props) {
             settings.theme === "dark" ? "#262626" : "#f3f4f6"
           } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
         }}
-        className={`border border-solid border-neutral self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
+        className={`border border-solid border-neutral-content self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
           className || ""
         }`}
       >
         <div
-          onClick={(e) => setExpandDropdown({ x: e.clientX, y: e.clientY })}
+          onClick={(e) => {
+            setExpandDropdown({ x: e.clientX, y: e.clientY });
+          }}
           id={"expand-dropdown" + collection.id}
-          className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+          className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10"
         >
           <FontAwesomeIcon
             icon={faEllipsis}
+            title="More"
+            className="w-5 h-5"
             id={"expand-dropdown" + collection.id}
-            className="w-5 h-5 text-neutral"
           />
         </div>
         <Link

components/Dropdown.tsx

@@ -83,7 +83,7 @@ export default function Dropdown({
       {items.map((e, i) => {
         const inner = e && (
           <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
               <p className="select-none">{e.name}</p>
             </div>
           </div>

components/FilterSearchDropdown.tsx

@@ -25,7 +25,7 @@ export default function FilterSearchDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "filter-dropdown") setFilterDropdown(false);
       }}
-      className="absolute top-8 right-0 border border-neutral shadow-md bg-base-200 rounded-md p-2 z-20 w-40"
+      className="absolute top-8 right-0 border border-neutral-content shadow-md bg-base-200 rounded-md p-2 z-20 w-40"
     >
       <p className="mb-2 text-center font-semibold">Filter by</p>
       <div className="flex flex-col gap-2">

components/LinkCard.tsx

@@ -138,7 +138,7 @@ export default function LinkCard({ link, count, className }: Props) {
   return (
     <>
       <div
-        className={`h-fit border border-solid border-neutral-content bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+        className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
           className || ""
         }`}
       >
@@ -150,7 +150,7 @@ export default function LinkCard({ link, count, className }: Props) {
               setExpandDropdown({ x: e.clientX, y: e.clientY });
             }}
             id={"expand-dropdown" + link.id}
-            className="text-neutral-content dark:text-gray-300 inline-flex rounded-md cursor-pointer btn btn-ghost btn-sm btn-square dark:hover:bg-neutral-700 absolute right-4 top-4 z-10 duration-100"
+            className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10"
           >
             <FontAwesomeIcon
               icon={faEllipsis}
@@ -221,7 +221,7 @@ export default function LinkCard({ link, count, className }: Props) {
                       </Link>
                     ))}
                   </div>
-                  <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-slate-100 dark:to-neutral-800 to-35%"></div>
+                  <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent dark:to-base-200 to-35%"></div>
                 </div>
               ) : undefined} */}
 

components/LinkPreview.tsx

@@ -49,7 +49,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
   return (
     <>
       <div
-        className={`h-fit border border-solid border-neutral-content bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+        className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
           className || ""
         }`}
       >

components/LinkSidebar.tsx

@@ -47,7 +47,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-neutral-content dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${
+      className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
         className || ""
       }`}
     >

components/Modal/Collection/CollectionInfo.tsx

@@ -79,7 +79,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
+                  className="btn btn-ghost btn-xs"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -98,7 +98,7 @@ export default function CollectionInfo({
         <div className="w-full">
           <p className="mb-2">Description</p>
           <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>

components/Modal/Link/AddOrEditLink.tsx

@@ -241,7 +241,7 @@ export default function AddOrEditLink({
                     ? "Will be auto generated if nothing is provided."
                     : ""
                 }
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
               />
             </div>
           </div>
@@ -253,7 +253,7 @@ export default function AddOrEditLink({
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`${
             method === "UPDATE" ? "hidden" : ""
-          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 flex items-center px-2 w-fit text-sm`}
+          } rounded-md cursor-pointer btn btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
         >
           <p>{optionsExpanded ? "Hide" : "More"} Options</p>
         </div>

components/Modal/index.tsx

@@ -16,7 +16,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         onClickOutside={toggleModal}
         className={`m-auto ${className || ""}`}
       >
-        <div className="slide-up relative border-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
+        <div className="slide-up relative border-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-base-100">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
             className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"

components/Navbar.tsx

@@ -50,10 +50,10 @@ export default function Navbar() {
   };
 
   return (
-    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content dark:border-b-neutral-700 border-b h-16">
+    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-neutral-content"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
@@ -82,7 +82,7 @@ export default function Navbar() {
 
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-neutral-content sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >

components/PublicPage/PublicLinkCard.tsx

@@ -28,7 +28,7 @@ export default function LinkCard({ link, count }: Props) {
   });
 
   return (
-    <div className="border border-solid border-neutral-content bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item">
+    <div className="border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item">
       <div className="flex justify-between items-end gap-5 w-full h-full z-0">
         <div className="flex flex-col justify-between w-full">
           <div className="flex items-center gap-2">

components/PublicPage/PublicSearchBar.tsx

@@ -52,7 +52,7 @@ export default function PublicSearchBar({ placeHolder }: Props) {
             );
           }
         }}
-        className="border text-sm border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
+        className="border text-sm border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
       />
     </div>
   );

components/SearchBar.tsx

@@ -36,7 +36,7 @@ export default function SearchBar() {
           e.key === "Enter" &&
           router.push("/search?q=" + encodeURIComponent(searchQuery))
         }
-        className="border border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
+        className="border border-neutral-content bg-base-200 focus:border-primary rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
       />
     </div>
   );

components/SettingsSidebar.tsx

@@ -35,7 +35,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-neutral-content dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
+      className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
         className || ""
       }`}
     >
@@ -138,7 +138,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
         <Link
           href={`https://github.com/linkwarden/linkwarden/releases`}
           target="_blank"
-          className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100"
+          className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
         >
           Linkwarden {LINKWARDEN_VERSION}
         </Link>

components/Sidebar.tsx

@@ -52,7 +52,7 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-base-200 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-neutral-content dark:border-r-neutral-700 px-2 z-20 ${
+      className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content px-2 z-20 ${
         className || ""
       }`}
     >

components/TextInput.tsx

@@ -27,7 +27,7 @@ export default function TextInput({
       value={value}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      className={`w-full rounded-md p-2 border-neutral-content bg-gray-100 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
+      className={`w-full rounded-md p-2 border-neutral-content border-solid border outline-none focus:border-primary duration-100 ${
         className || ""
       }`}
     />

hooks/useInitialData.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import useTagStore from "@/store/tags";
 import useAccountStore from "@/store/account";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function useInitialData() {
   const { status, data } = useSession();
@@ -10,10 +11,12 @@ export default function useInitialData() {
   const { setTags } = useTagStore();
   // const { setLinks } = useLinkStore();
   const { account, setAccount } = useAccountStore();
+  const { setSettings } = useLocalSettingsStore();
 
-  // Get account info
   useEffect(() => {
+    setSettings();
     if (status === "authenticated") {
+      // Get account info
       setAccount(data?.user.id as number);
     }
   }, [status, data]);

layouts/CenteredForm.tsx

@@ -1,7 +1,7 @@
 import useLocalSettingsStore from "@/store/localSettings";
 import Image from "next/image";
 import Link from "next/link";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 
 interface Props {
   text?: string;
@@ -10,10 +10,11 @@ interface Props {
 
 export default function CenteredForm({ text, children }: Props) {
   const { settings } = useLocalSettingsStore();
+
   return (
     <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">
-        {true ? (
+        {settings.theme ? (
           <Image
             src={`/linkwarden_${
               settings.theme === "dark" ? "dark" : "light"
@@ -24,30 +25,13 @@ export default function CenteredForm({ text, children }: Props) {
             className="h-12 w-fit mx-auto"
           />
         ) : undefined}
-        {/* {settings.theme === "dark" ? (
-          <Image
-            src="/linkwarden_dark.png"
-            width={640}
-            height={136}
-            alt="Linkwarden"
-            className="h-12 w-fit mx-auto"
-          />
-        ) : (
-          <Image
-            src="/linkwarden_light.png"
-            width={640}
-            height={136}
-            alt="Linkwarden"
-            className="h-12 w-fit mx-auto"
-          />
-        )} */}
         {text ? (
           <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center">
             {text}
           </p>
         ) : undefined}
         {children}
-        <p className="text-center text-xs text-gray-500 mb-5 dark:text-gray-400">
+        <p className="text-center text-xs text-neutral mb-5">
           © {new Date().getFullYear()}{" "}
           <Link href="https://linkwarden.app" className="font-semibold">
             Linkwarden

layouts/LinkLayout.tsx

@@ -86,7 +86,7 @@ export default function LinkLayout({ children }: Props) {
           <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
             {/* <div
               onClick={toggleSidebar}
-              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
             >
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
             </div> */}

layouts/SettingsLayout.tsx

@@ -53,14 +53,14 @@ export default function SettingsLayout({ children }: Props) {
           <div className="gap-2 inline-flex mr-3">
             <div
               onClick={toggleSidebar}
-              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+              className="text-neutral btn btn-square btn-ghost"
             >
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
             </div>
 
             <Link
               href="/dashboard"
-              className="inline-flex w-fit gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+              className="text-neutral btn btn-square btn-ghost"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
             </Link>

pages/_app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React 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 useLocalSettingsStore from "@/store/localSettings";
 
 export default function App({
   Component,
@@ -14,12 +13,6 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
-  const { setSettings } = useLocalSettingsStore();
-
-  useEffect(() => {
-    setSettings();
-  }, []);
-
   return (
     <SessionProvider
       session={pageProps.session}
@@ -54,7 +47,7 @@ export default function App({
           reverseOrder={false}
           toastOptions={{
             className:
-              "border border-neutral-content dark:bg-neutral-900 dark:text-white",
+              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
           }}
         />
         <Component {...pageProps} />

pages/choose-username.tsx

@@ -41,7 +41,7 @@ export default function ChooseUsername() {
   return (
     <CenteredForm>
       <form onSubmit={submitUsername}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
             Choose a Username
           </p>
@@ -55,7 +55,7 @@ export default function ChooseUsername() {
               autoFocus
               placeholder="john"
               value={inputedUsername}
-              className="bg-white"
+              className="bg-base-100"
               onChange={(e) => setInputedUsername(e.target.value)}
             />
           </div>

pages/collections/[id].tsx

@@ -127,7 +127,7 @@ export default function Index() {
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
                   id="sort-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1"
+                  className="btn btn-ghost btn-square btn-sm"
                 >
                   <FontAwesomeIcon
                     icon={faSort}
@@ -148,7 +148,7 @@ export default function Index() {
                 <div
                   onClick={() => setExpandDropdown(!expandDropdown)}
                   id="expand-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1"
+                  className="btn btn-ghost btn-square btn-sm"
                 >
                   <FontAwesomeIcon
                     icon={faEllipsis}

pages/collections/index.tsx

@@ -51,7 +51,7 @@ export default function Collections() {
               <div
                 onClick={() => setExpandDropdown(!expandDropdown)}
                 id="expand-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                className="btn btn-ghost btn-square btn-sm"
               >
                 <FontAwesomeIcon
                   icon={faEllipsis}
@@ -90,7 +90,7 @@ export default function Collections() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+              className="btn btn-ghost btn-square btn-sm"
             >
               <FontAwesomeIcon
                 icon={faSort}

pages/confirmation.tsx

@@ -5,7 +5,7 @@ import React from "react";
 export default function EmailConfirmaion() {
   return (
     <CenteredForm>
-      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-slate-50 dark:bg-neutral-800">
+      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-base-200">
         <p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
           Please check your Email
         </p>

pages/dashboard.tsx

@@ -120,7 +120,7 @@ export default function Dashboard() {
         </div>
 
         <div>
-          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200 dark:bg-neutral-800">
+          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
@@ -242,7 +242,7 @@ export default function Dashboard() {
                         <label
                           htmlFor="import-linkwarden-file"
                           title="JSON File"
-                          className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                          className="flex items-center gap-2 py-1 px-2 hover:bg-base-100  duration-100 cursor-pointer"
                         >
                           Linkwarden File...
                           <input
@@ -259,7 +259,7 @@ export default function Dashboard() {
                         <label
                           htmlFor="import-html-file"
                           title="HTML File"
-                          className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                          className="flex items-center gap-2 py-1 px-2 hover:bg-base-100  duration-100 cursor-pointer"
                         >
                           Bookmarks HTML file...
                           <input

pages/forgot.tsx

@@ -43,7 +43,7 @@ export default function Forgot() {
   return (
     <CenteredForm>
       <form onSubmit={sendConfirmation}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
             Password Recovery
           </p>
@@ -68,7 +68,7 @@ export default function Forgot() {
               type="email"
               placeholder="johnny@example.com"
               value={form.email}
-              className="bg-white"
+              className="bg-base-100"
               onChange={(e) => setForm({ ...form, email: e.target.value })}
             />
           </div>

pages/links/[id].tsx

@@ -165,7 +165,7 @@ export default function Index() {
                   height={42}
                   alt=""
                   id={"favicon-" + link.id}
-                  className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
+                  className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-base-100 bg-base-100 aspect-square"
                   draggable="false"
                   onLoad={(e) => {
                     try {

pages/links/index.tsx

@@ -37,7 +37,7 @@ export default function Links() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+              className="btn btn-ghost btn-square btn-sm"
             >
               <FontAwesomeIcon
                 icon={faSort}

pages/links/pinned.tsx

@@ -37,7 +37,7 @@ export default function PinnedLinks() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+              className="btn btn-ghost btn-square btn-sm"
             >
               <FontAwesomeIcon
                 icon={faSort}

pages/login.tsx

@@ -63,7 +63,7 @@ export default function Login() {
   return (
     <CenteredForm text="Sign in to your account">
       <form onSubmit={loginUser}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
             Enter your credentials
           </p>
@@ -80,7 +80,7 @@ export default function Login() {
               autoFocus={true}
               placeholder="johnny"
               value={form.username}
-              className="bg-white"
+              className="bg-base-100"
               onChange={(e) => setForm({ ...form, username: e.target.value })}
             />
           </div>
@@ -92,7 +92,7 @@ export default function Login() {
               type="password"
               placeholder="••••••••••••••"
               value={form.password}
-              className="bg-white"
+              className="bg-base-100"
               onChange={(e) => setForm({ ...form, password: e.target.value })}
             />
             {emailEnabled && (

pages/public/collections/[id].tsx

@@ -197,7 +197,7 @@ export default function PublicCollections() {
 
         <p className="mt-5">{collection.description}</p>
 
-        <hr className="mt-5 border-1 border-neutral-500" />
+        <hr className="mt-5 border-1 border-neutral" />
 
         <div className="flex mb-5 mt-10 flex-col gap-5">
           <div className="flex justify-between">
@@ -210,7 +210,7 @@ export default function PublicCollections() {
                 <div
                   onClick={() => setFilterDropdown(!filterDropdown)}
                   id="filter-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-neutral-500 hover:bg-opacity-40 duration-100 p-1"
+                  className="btn btn-ghost btn-square btn-sm"
                 >
                   <FontAwesomeIcon
                     icon={faFilter}
@@ -232,7 +232,7 @@ export default function PublicCollections() {
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
                   id="sort-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-neutral-500 hover:bg-opacity-40 duration-100 p-1"
+                  className="btn btn-ghost btn-square btn-sm"
                 >
                   <FontAwesomeIcon
                     icon={faSort}
@@ -271,7 +271,7 @@ export default function PublicCollections() {
               })}
           </div>
 
-          {/* <p className="text-center text-gray-500">
+          {/* <p className="text-center text-neutral">
         List created with <span className="text-black">Linkwarden.</span>
         </p> */}
         </div>

pages/public/links/[id].tsx

@@ -165,7 +165,7 @@ export default function Index() {
                   height={42}
                   alt=""
                   id={"favicon-" + link.id}
-                  className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
+                  className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-base-100 bg-base-100 aspect-square"
                   draggable="false"
                   onLoad={(e) => {
                     try {

pages/register.tsx

@@ -104,7 +104,7 @@ export default function Register() {
       }
     >
       {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
-        <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+        <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
           <p>
             Registration is disabled for this instance, please contact the admin
             in case of any issues.
@@ -112,7 +112,7 @@ export default function Register() {
         </div>
       ) : (
         <form onSubmit={registerUser}>
-          <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+          <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-base-200 rounded-2xl shadow-md border border-neutral-content">
             <p className="text-3xl text-center font-extralight">
               Enter your details
             </p>
@@ -126,7 +126,7 @@ export default function Register() {
                 autoFocus={true}
                 placeholder="Johnny"
                 value={form.name}
-                className="bg-white"
+                className="bg-base-100"
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
               />
             </div>
@@ -138,7 +138,7 @@ export default function Register() {
                 <TextInput
                   placeholder="john"
                   value={form.username}
-                  className="bg-white"
+                  className="bg-base-100"
                   onChange={(e) =>
                     setForm({ ...form, username: e.target.value })
                   }
@@ -154,7 +154,7 @@ export default function Register() {
                   type="email"
                   placeholder="johnny@example.com"
                   value={form.email}
-                  className="bg-white"
+                  className="bg-base-100"
                   onChange={(e) => setForm({ ...form, email: e.target.value })}
                 />
               </div>
@@ -167,7 +167,7 @@ export default function Register() {
                 type="password"
                 placeholder="••••••••••••••"
                 value={form.password}
-                className="bg-white"
+                className="bg-base-100"
                 onChange={(e) => setForm({ ...form, password: e.target.value })}
               />
             </div>
@@ -181,7 +181,7 @@ export default function Register() {
                 type="password"
                 placeholder="••••••••••••••"
                 value={form.passwordConfirmation}
-                className="bg-white"
+                className="bg-base-100"
                 onChange={(e) =>
                   setForm({ ...form, passwordConfirmation: e.target.value })
                 }

pages/search.tsx

@@ -58,7 +58,7 @@ export default function Search() {
               <div
                 onClick={() => setFilterDropdown(!filterDropdown)}
                 id="filter-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                className="btn btn-ghost btn-square btn-sm"
               >
                 <FontAwesomeIcon
                   icon={faFilter}
@@ -80,7 +80,7 @@ export default function Search() {
               <div
                 onClick={() => setSortDropdown(!sortDropdown)}
                 id="sort-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                className="btn btn-ghost btn-square btn-sm"
               >
                 <FontAwesomeIcon
                   icon={faSort}

pages/settings/account.tsx

@@ -206,13 +206,13 @@ export default function Account() {
                       image: "",
                     })
                   }
-                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
+                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 rounded-full bg-base-200 text-center select-none cursor-pointer duration-100 hover:text-red-500"
                 >
                   <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-                <label className="border border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
+                <label className="border border-slate-200 rounded-md bg-base-200 px-2 text-center select-none cursor-pointer duration-100 hover:border-primary">
                   Browse...
                   <input
                     type="file"
@@ -247,7 +247,7 @@ export default function Account() {
               >
                 <div
                   id="import-dropdown"
-                  className="border border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
+                  className="border border-slate-200 rounded-md bg-base-200 px-2 text-center select-none cursor-pointer duration-100 hover:border-primary"
                 >
                   Import From
                 </div>
@@ -264,7 +264,7 @@ export default function Account() {
                       <label
                         htmlFor="import-linkwarden-file"
                         title="JSON File"
-                        className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                        className="flex items-center gap-2 py-1 px-2 hover:bg-neutral-content duration-100 cursor-pointer"
                       >
                         Linkwarden File...
                         <input
@@ -281,7 +281,7 @@ export default function Account() {
                       <label
                         htmlFor="import-html-file"
                         title="HTML File"
-                        className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                        className="flex items-center gap-2 py-1 px-2 hover:bg-neutral-content  duration-100 cursor-pointer"
                       >
                         Bookmarks HTML file...
                         <input
@@ -304,7 +304,7 @@ export default function Account() {
             <div>
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
-                <div className="border w-fit border-slate-200 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
+                <div className="border w-fit border-slate-200 rounded-md bg-base-200 px-2 text-center select-none cursor-pointer duration-100 hover:border-primary">
                   Export Data
                 </div>
               </Link>
@@ -339,7 +339,7 @@ export default function Account() {
                 visibility to your profile. Separated by comma.
               </p>
               <textarea
-                className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
+                className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
                 placeholder="Your profile is hidden from everyone right now..."
                 value={whitelistedUsersTextbox}
                 onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}

pages/settings/delete.tsx

@@ -54,12 +54,15 @@ export default function Password() {
 
   return (
     <CenteredForm>
-      <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+      <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <Link
           href="/settings/account"
-          className="absolute top-4 left-4 gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+          className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
         >
-          <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
+          <FontAwesomeIcon
+            icon={faChevronLeft}
+            className="w-5 h-5 text-neutral"
+          />
         </Link>
         <div className="flex items-center gap-2 w-full rounded-md h-8">
           <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">
@@ -86,6 +89,7 @@ export default function Password() {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="••••••••••••••"
+              className="bg-base-100"
               type="password"
             />
           </div>
@@ -102,7 +106,7 @@ export default function Password() {
             <label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
               <p className="text-sm">Reason for cancellation:</p>
               <select
-                className="rounded-md p-1 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="rounded-md p-1 outline-none"
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
               >
@@ -127,7 +131,7 @@ export default function Password() {
                 value={comment}
                 onChange={(e) => setComment(e.target.value)}
                 placeholder="e.g. I needed a feature that..."
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-100 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
               />
             </div>
           </fieldset>

pages/subscribe.tsx

@@ -30,7 +30,7 @@ export default function Subscribe() {
         process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
       }-day free trial, cancel anytime!`}
     >
-      <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
+      <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
           Subscribe to Linkwarden!
         </p>

pages/tags/[id].tsx

@@ -115,14 +115,14 @@ export default function Index() {
                     <input
                       type="text"
                       autoFocus
-                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content dark:border-b-neutral-700"
+                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
                       value={newTagName}
                       onChange={(e) => setNewTagName(e.target.value)}
                     />
                     <div
                       onClick={() => submit()}
                       id="expand-dropdown"
-                      className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                      className="btn btn-ghost btn-square btn-sm"
                     >
                       <FontAwesomeIcon
                         icon={faCheck}
@@ -133,7 +133,7 @@ export default function Index() {
                     <div
                       onClick={() => cancelUpdateTag()}
                       id="expand-dropdown"
-                      className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                      className="btn btn-ghost btn-square btn-sm"
                     >
                       <FontAwesomeIcon
                         icon={faXmark}
@@ -152,7 +152,7 @@ export default function Index() {
                     <div
                       onClick={() => setExpandDropdown(!expandDropdown)}
                       id="expand-dropdown"
-                      className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+                      className="btn btn-ghost btn-square btn-sm"
                     >
                       <FontAwesomeIcon
                         icon={faEllipsis}
@@ -197,7 +197,7 @@ export default function Index() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+              className="btn btn-ghost btn-square btn-sm"
             >
               <FontAwesomeIcon
                 icon={faSort}

store/localSettings.ts

@@ -21,11 +21,9 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
     ) {
       localStorage.setItem("theme", newSettings.theme);
 
-      const localTheme = localStorage.getItem("theme");
+      const localTheme = localStorage.getItem("theme") || "";
 
-      document
-        .querySelector("html")
-        ?.setAttribute("data-theme", localTheme || "");
+      document.querySelector("html")?.setAttribute("data-theme", localTheme);
     }
 
     set((state) => ({ settings: { ...state.settings, ...newSettings } }));
@@ -35,10 +33,13 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
       localStorage.setItem("theme", "dark");
     }
 
-    const localTheme = localStorage.getItem("theme");
-    document
-      .querySelector("html")
-      ?.setAttribute("data-theme", localTheme || "");
+    const localTheme = localStorage.getItem("theme") || "";
+
+    set((state) => ({
+      settings: { ...state.settings, theme: localTheme },
+    }));
+
+    document.querySelector("html")?.setAttribute("data-theme", localTheme);
   },
 }));
 

styles/globals.css

@@ -158,7 +158,7 @@ body {
 /* react-select */
 @layer components {
   .react-select-container .react-select__control {
-    @apply dark:bg-neutral-950 bg-gray-50 dark:hover:border-neutral-500;
+    @apply bg-base-200 dark:hover:border-neutral-500 border-red-500 border;
   }
 
   .react-select-container .react-select__menu {