Merge pull request #37 from kawamataryo/add-darkmode

🎨 add darkmode

src/lib/components/Modal.tsx

@@ -10,7 +10,7 @@ const Modal = ({ children, anchorRef, open = false }: Props) => {
   return (
     <>
       <dialog className="modal" ref={anchorRef} open={open}>
-        <div className="modal-box p-10 bg-white w-[750px] max-w-none text-gray-800">
+        <div className="modal-box p-10 bg-base-100 w-[750px] max-w-none text-base-content">
           {children}
         </div>
         <form method="dialog" className="modal-backdrop">

src/lib/components/UserCard.tsx

@@ -117,7 +117,7 @@ const UserCard = ({ user, actionMode, clickAction }: Props) => {
                   {user.displayName}
                 </a>
               </h2>
-              <p className="whitespace-nowrap w-fit break-all text-gray-500 text-sm">
+              <p className="whitespace-nowrap w-fit break-all text-gray-500 dark:text-gray-400 text-sm">
                 <a
                   href={`https://bsky.app/profile/${user.handle}`}
                   target="_blank"

src/lib/constants.ts

@@ -70,6 +70,6 @@ export const MATCH_TYPE_LABEL_AND_COLOR = {
   },
   [BSKY_USER_MATCH_TYPE.DESCRIPTION]: {
     label: "Included handle name in description",
-    color: "neutral",
+    color: "secondary",
   },
 };

src/popup.tsx

@@ -131,7 +131,7 @@ function IndexPopup() {
 
   return (
     <div className="px-5 pt-3 pb-4 w-[380px]">
-      <h1 className="text-primary text-2xl font-thin flex gap-2 items-center">
+      <h1 className="text-primary dark:text-white text-2xl font-thin flex gap-2 items-center">
         <svg
           className="w-5 h-5"
           xmlns="http://www.w3.org/2000/svg"
@@ -210,7 +210,7 @@ function IndexPopup() {
         <button
           type="submit"
           className={
-            "disabled:text-gray-600 mt-3 normal-case btn btn-primary btn-sm w-full"
+            "disabled:text-gray-600 dark:disabled:bg-gray-700 dark:disabled:text-gray-300 mt-3 normal-case btn btn-primary btn-sm w-full"
           }
           disabled={isDisabled}
         >

tailwind.config.js

@@ -18,7 +18,12 @@ module.exports = {
           primary: "#1D4ED8"
         }
       },
+      {
+        dark: {
+          ...require("daisyui/src/theming/themes").night,
+          primary: "#1D4ED8"
+        }
+      }
     ],
   },
-  darkMode: ['class', '[data-theme="night"]']
 }