Add theme and color config

apps/readest-app/src/app/reader/components/notebook/Header.tsx

@@ -14,7 +14,7 @@ const NotebookHeader: React.FC<{
     <div className='z-10 flex items-center space-x-3'>
       <button
         onClick={handleTogglePin}
-        className={`${isPinned ? 'bg-gray-300' : 'bg-base-300'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
+        className={`${isPinned ? 'bg-base-300' : 'bg-base-300/65'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
       >
         {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
       </button>

apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx

@@ -48,7 +48,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
   };
 
   return (
-    <div className='note-editor-container mt-2 rounded-md bg-white p-2'>
+    <div className='note-editor-container bg-base-100 mt-2 rounded-md p-2'>
       <div className='flex w-full justify-between space-x-2'>
         <div className='settings-content relative w-full'>
           <textarea

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -145,7 +145,7 @@ const Notebook: React.FC = ({}) => {
               <li key={`${index}-${item.id}`} className='my-2'>
                 <div
                   tabIndex={0}
-                  className='collapse-arrow border-base-300 collapse border bg-white'
+                  className='collapse-arrow border-base-300 bg-base-100 collapse border'
                 >
                   <div
                     className='collapse-title h-9 min-h-9 p-2 pr-8 text-sm font-medium'