ダークモードを実装

.gitignore

@@ -12,4 +12,5 @@ node_modules
 localhost-key.pem
 localhost.pem
 /app/embeddingBatch.ts
-/docs/secretvariables.md
+/docs/secretvariables.md
+memo.md

app/components/CommentCard.tsx

@@ -1,10 +1,9 @@
-// CommentCard.tsx
-import clockIcon from "~/src/assets/clock_icon.svg";
-import thumb_up from "~/src/assets/thumb_up.svg";
-import thumb_down from "~/src/assets/thumb_down.svg";
 import { useState } from "react";
 import CommentInputBox from "./CommentInputBox";
 import { useSubmit } from "@remix-run/react";
+import ClockIcon from "./icons/ClockIcon";
+import ThumbsUpIcon from "./icons/ThumbsUpIcon";
+import ThumbsDownIcon from "./icons/ThumbsDownIcon";
 
 interface CommentCardProps {
   commentId: number;
@@ -96,33 +95,37 @@ export default function CommentCard({
   }
 
   return (
-    <div className="bg-white p-4 mb-4" style={{ marginLeft }}>
+    <div className="bg-base-100 p-4 mb-4" style={{ marginLeft }}>
       <div className="flex items-center">
-        <p className="text-green-900 font-bold mr-4">{commentAuthor}</p>
-        <img src={clockIcon} alt="Comment Date" className="h-5 w-5 mr-2" />
-        <p className="text-gray-600 text-sm">{formattedCommentDate}</p>
+        <p className="text-green-700 font-bold mr-4">{commentAuthor}</p>
+        <ClockIcon  />
+        <p className="text-sm ml-2">{formattedCommentDate}</p>
       </div>
       <p className="mt-2 whitespace-pre-wrap">{commentContent}</p>
       <div className="flex items-center mt-4">
         <button
-          className={`flex items-center mr-4 bg-gray-200 rounded-md px-2 py-2 ${
+          className={`flex items-center mr-4 bg-inherit rounded-md px-2 py-2 border ${
             isLiked ? "text-blue-500 fonr-bold" : ""
           }`}
           onClick={() => (onCommentVote(commentId, "like"), setIsCommentLikeButtonPushed(true))}
           disabled={isCommentLikeButtonPushed || isLiked}
         >
-          <img src={thumb_up} alt="Like" className="h-5 w-5 mr-2" />
+          <ThumbsUpIcon />
+          <p className="ml-2">
           {likesCount}
+          </p>
         </button>
         <button
-          className={`flex items-center bg-gray-200 rounded-md px-2 py-2 ${
+          className={`flex items-center bg-inherit rounded-md px-2 py-2 border ${
             isDisliked ? "text-red-500 font-bold" : ""
           }`}
           onClick={() => (onCommentVote(commentId, "dislike"), setIsCommentDislikeButtonPushed(true))}
           disabled={isCommentDislikeButtonPushed || isDisliked}
         >
-          <img src={thumb_down} alt="Dislike" className="h-5 w-5 mr-2" />
+          <ThumbsDownIcon />
+          <p className="ml-2">
           {dislikesCount}
+          </p>
         </button>
       </div>
     <button

app/components/CommentInputBox.tsx

@@ -50,7 +50,7 @@ export default function CommentInputBox({
         type="submit"
         className={`px-4 py-2 mx-1 w-full ${
           isCommentOpen
-            ? "bg-blue-500 text-white"
+            ? "bg-primary text-white"
             : "bg-gray-200 text-gray-500 cursor-not-allowed"
         } rounded`}
         disabled={!isCommentOpen}

app/components/CommentShowCard.tsx

@@ -1,6 +1,6 @@
 import { NavLink } from "@remix-run/react";
-import commentIcon from "~/src/assets/comment_icon.svg";
-import articleIcon from "~/src/assets/article_icon.svg";
+import CommentIcon from "./icons/CommentIcon";
+import ArticleIcon from "./icons/ArticleIcon";
 
 interface CommentShowCardProps {
   commentContent: string;
@@ -30,19 +30,23 @@ export default function CommentShowCard({
   }).replace(/\//g, "-");
 
   return (
-      <div className="bg-white border-2 rounded-lg p-4 mb-4">
+      <div className="bg-base-100 border-2 rounded-lg p-4 mb-4">
           <div className="flex justify-between items-center mb-2">
-              <p className="text-gray-600 text-sm comment-timestamp">{formattedCommentDate}</p>
-              <span className="text-lg font-bold text-gray-800 comment-author">{commentAuthor}</span>
+              <p className="text-base-content text-sm comment-timestamp">{formattedCommentDate}</p>
+              <span className="text-lg font-bold text-base-content comment-author">{commentAuthor}</span>
           </div>
-          <div className="flex items-center mb-2">
-              <img src={commentIcon} alt="Comment icon" className="h-5 w-5 mr-2" />
-              <p className="text-gray-700 comment-content">{commentContent}</p>
+          <div className="grid grid-cols-[auto_1fr] gap-2 mb-2 items-center">
+              <div className="w-6 h-6">
+                  <CommentIcon />
+              </div>
+              <p className="text-base-content comment-content">{commentContent}</p>
           </div>
-          <div className="flex items-center">
-              <img src={articleIcon} alt="Article icon" className="h-5 w-5 mr-2" />
-              <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-blue-600 underline underline-offset-4 decoration-blue-700 post-title">{dimPosts.postTitle}</NavLink>
+          <div className="grid grid-cols-[auto_1fr] gap-2 items-center">
+              <div className="w-6 h-6">
+                  <ArticleIcon />
+              </div>
+              <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-info underline underline-offset-4 post-title">{dimPosts.postTitle}</NavLink>
           </div>
       </div>
   );
-}
+}

app/components/PostCard.tsx

@@ -1,10 +1,10 @@
 import { NavLink } from "@remix-run/react";
 import parse from "html-react-parser";
 import TagCard from "./TagCard";
-import articleIcon from "~/src/assets/article_icon.svg";
-import tagIcon from "~/src/assets/tag_icon.svg";
-import thumbUpIcon from "~/src/assets/thumb_up.svg";
-import thumbDownIcon from "~/src/assets/thumb_down.svg";
+import ArticleIcon from "./icons/ArticleIcon";
+import TagIcon from "./icons/TagIcon";
+import ThumbsUpIcon from "./icons/ThumbsUpIcon";
+import ThumbsDownIcon from "./icons/ThumbsDownIcon";
 
 interface PostCardProps {
     postId: number;
@@ -46,20 +46,20 @@ export default function PostCard({
     });
 
     return (
-        <div className="bg-white border-2 rounded-lg p-4 mb-4">
+        <div className="bg-base-100 border-2 rounded-lg p-4 mb-4">
             <div className="flex justify-between items-center mb-2">
-                <p className="text-gray-600 text-sm post-timestamp">{formattedPostDate}</p>
+                <p className="text-base-content text-sm post-timestamp">{formattedPostDate}</p>
             </div>
-            <div className="flex items-center mb-2">
-                <img src={articleIcon} alt="Article icon" className="h-5 w-5 mr-2" />
-                <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-blue-600 hover:underline underline underline-offset-4 decoration-blue-700 post-title">{postTitle}</NavLink>
+            <div className="grid grid-cols-[auto_1fr] gap-2 mb-2 items-center">
+                <ArticleIcon/>
+                <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-info underline underline-offset-4 post-title">{postTitle}</NavLink>
             </div>
             {highLightedText && (
-                <p className="text-gray-700">{parse(highLightedText)}</p>
+                <p className="neutral-content">{parse(highLightedText)}</p>
             )}
-            <div className="mt-2 flex items-center">
-                <img src={tagIcon} alt="Tag icon" className="h-5 w-5 mr-2" />
-                <div className="flex flex-wrap">
+            <div className="grid grid-cols-[auto_1fr] gap-2 mt-2 items-center">
+                <TagIcon/>
+                <div className="flex flex-wrap items-center">
                     {tagNames && tagNames.map((tag, index) => (
                         <span key={index} className="inline-block text-sm font-semibold mr-1 mb-1">
                             <TagCard tagName={tag} />
@@ -69,14 +69,14 @@ export default function PostCard({
             </div>
             <div className="flex items-center mt-2">
                 <div className="flex items-center mr-4">
-                    <img src={thumbUpIcon} alt="Thumb up" className="h-5 w-5 text-blue-500" />
-                    <span className="text-sm text-gray-600 ml-1">{countLikes}</span>
+                    <ThumbsUpIcon/>
+                    <span className="text-sm text-base-content ml-1">{countLikes}</span>
                 </div>
                 <div className="flex items-center">
-                    <img src={thumbDownIcon} alt="Thumb down" className="h-5 w-5 text-red-500" />
-                    <span className="text-sm text-gray-600 ml-1">{countDislikes}</span>
+                    <ThumbsDownIcon/>
+                    <span className="text-sm text-base-content ml-1">{countDislikes}</span>
                 </div>
             </div>
         </div>
     );
-}
+}

app/components/SubmitFormComponents/ClearLocalStorageButton.tsx

@@ -18,7 +18,7 @@ const ClearLocalStorageButton = ({ clearInputs }: ClearLocalStorageButtonProps)
       <H3>入力内容をクリア</H3>
       <p>入力内容をクリアします。</p>
       <button
-        className="inline-flex items-center px-4 py-2 my-4 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        className="inline-flex items-center px-4 py-2 my-4 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
         onClick={() => setShowModal(true)}
         type='button'
       >
@@ -27,13 +27,13 @@ const ClearLocalStorageButton = ({ clearInputs }: ClearLocalStorageButtonProps)
 
       {showModal && (
         <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+          <div className="fixed inset-0 bg-base-200 bg-opacity-75 transition-opacity"></div>
           <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div className="inline-block align-bottom bg-base-200 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <div className="bg-base-200 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                    <h3 className="text-lg leading-6 font-medium" id="modal-title">
                       確認
                     </h3>
                     <div className="mt-2">
@@ -44,17 +44,17 @@ const ClearLocalStorageButton = ({ clearInputs }: ClearLocalStorageButtonProps)
                   </div>
                 </div>
               </div>
-              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+              <div className="bg-base-200 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                 <button
                   type="button"
-                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                  className="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-warning text-base font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                   onClick={handleClearLocalStorage}
                 >
                   はい
                 </button>
                 <button
                   type="button"
-                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                  className="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-white text-base font-medium text-black hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                   onClick={() => setShowModal(false)}
                 >
                   いいえ

app/components/SubmitFormComponents/DynamicTextInput.tsx

@@ -29,7 +29,7 @@ const DynamicTextInput: React.FC<DynamicTextInputProps> = ({
 
   return (
     <div className="mb-8">
-      {description && <p className="text-gray-600 mb-4">{description}</p>}
+      {description && <p className="mb-4">{description}</p>}
       <Form className="space-y-4">
         {parentComponentStateValues.map((value, index) => (
           <div key={`input-${index}`} className="flex items-center space-x-2">
@@ -38,7 +38,7 @@ const DynamicTextInput: React.FC<DynamicTextInputProps> = ({
               id={`input-${index}`}
               value={value}
               onChange={(e) => handleInputChange(index, e.target.value)}
-              className="flex-grow px-3 py-2 text-gray-700 border rounded-lg focus:outline-none"
+              className="flex-grow px-3 py-2 border rounded-lg focus:outline-none"
             />
             <button
               type="button"

app/components/SubmitFormComponents/Preview.tsx

@@ -18,38 +18,38 @@ const Preview: React.FC<PreviewProps> = ({
   selectedType,
 }) => {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md">
+    <div className="bg-base-300 p-6 rounded-lg shadow-md">
       <div>
         <h1 className="text-3xl font-bold mb-4">プレビュー</h1>
-        <p className="text-gray-600 mb-6">入力した内容を確認します</p>
+        <p className="mb-6">入力した内容を確認します</p>
         <table className="w-full border-collapse border border-gray-300">
           <tbody>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Who(誰が)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Who(誰が)</th>
               <td className="p-2 border border-gray-300">{situationValues.who}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">When(いつ)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">When(いつ)</th>
               <td className="p-2 border border-gray-300">{situationValues.when}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Where(どこで)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Where(どこで)</th>
               <td className="p-2 border border-gray-300">{situationValues.where}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Why(なぜ)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Why(なぜ)</th>
               <td className="p-2 border border-gray-300">{situationValues.why}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">What(何を)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">What(何を)</th>
               <td className="p-2 border border-gray-300">{situationValues.what}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">How(どうした)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">How(どうした)</th>
               <td className="p-2 border border-gray-300">{situationValues.how}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Then(どうなった)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Then(どうなった)</th>
               <td className="p-2 border border-gray-300">{situationValues.then}</td>
             </tr>
           </tbody>
@@ -58,7 +58,7 @@ const Preview: React.FC<PreviewProps> = ({
         <h4 className="text-xl font-bold mt-8 mb-4">前提条件</h4>
         <ul className="list-disc list-inside mb-6">
           {assumptionValues.map((value, index) => (
-            <li key={index} className="text-gray-700">{value}</li>
+            <li key={index}>{value}</li>
           ))}
         </ul>
 
@@ -67,14 +67,14 @@ const Preview: React.FC<PreviewProps> = ({
             <h3 className="text-2xl font-bold mt-8 mb-4">健常行動ブレイクポイント</h3>
             <ul className="list-disc list-inside mb-6">
               {reflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
 
             <h3 className="text-2xl font-bold mt-8 mb-4">どうすればよかったか</h3>
             <ul className="list-disc list-inside mb-6">
               {counterFactualReflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
           </>
@@ -83,14 +83,14 @@ const Preview: React.FC<PreviewProps> = ({
             <h3 className="text-2xl font-bold mt-8 mb-4">なぜやってよかったのか</h3>
             <ul className="list-disc list-inside mb-6">
               {reflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
 
             <h3 className="text-2xl font-bold mt-8 mb-4">やらなかったらどうなっていたか</h3>
             <ul className="list-disc list-inside mb-6">
               {counterFactualReflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
           </>
@@ -99,7 +99,7 @@ const Preview: React.FC<PreviewProps> = ({
         <h3 className="text-2xl font-bold mt-8 mb-4">備考</h3>
         <ul className="list-disc list-inside">
           {noteValues.map((value, index) => (
-            <li key={index} className="text-gray-700">{value}</li>
+            <li key={index}>{value}</li>
           ))}
         </ul>
       </div>

app/components/SubmitFormComponents/SituationInput.tsx

@@ -117,7 +117,7 @@ const SituationInput = ({
           <div key={index} className="mb-4">
             <label
               htmlFor={data.key}
-              className="block text-gray-700 font-bold mb-2"
+              className="block font-bold mb-2"
             >
               {data.description}
             </label>
@@ -127,7 +127,7 @@ const SituationInput = ({
               value={parentComponentStateValues[data.key] || ""}
               rows={data.rows}
               onChange={(e) => handleInputChange(data.key, e.target.value)}
-              className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none"
+              className="w-full px-3 py-2 text-base-content border rounded-lg focus:outline-none placeholder-slate-500"
             />
           </div>
         ))}