Add theme and color config

apps/readest-app/src/components/Dropdown.tsx

@@ -42,11 +42,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         <div
           tabIndex={-1}
           onClick={toggleDropdown}
-          className={clsx(
-            'dropdown-toggle hover:bg-gray-300',
-            buttonClassName,
-            isOpen && 'bg-base-300',
-          )}
+          className={clsx('dropdown-toggle', buttonClassName, isOpen && 'bg-base-200')}
         >
           {toggleButton}
         </div>

apps/readest-app/src/components/MenuItem.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import React from 'react';
+
+interface MenuItemProps {
+  label: string;
+  shortcut?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ label, shortcut, icon, onClick, disabled }) => {
+  return (
+    <button
+      className={clsx(
+        'hover:bg-neutral text-base-content flex w-full items-center justify-between rounded-md p-2',
+        disabled && 'btn-disabled text-gray-400',
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <div className='flex items-center'>
+        {<span style={{ minWidth: '20px' }}>{icon}</span>}
+        <span className='ml-2'>{label}</span>
+      </div>
+      {shortcut && <span className='text-neutral-content text-sm'>{shortcut}</span>}
+    </button>
+  );
+};
+
+export default MenuItem;

apps/readest-app/src/components/WindowButtons.tsx

@@ -84,7 +84,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
       {showMinimize && (
         <button
           onClick={handleMinimize}
-          className='window-button'
+          className='window-button text-base-content'
           aria-label='Minimize'
           id='titlebar-minimize'
         >
@@ -97,7 +97,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
       {showMaximize && (
         <button
           onClick={handleMaximize}
-          className='window-button'
+          className='window-button text-base-content'
           aria-label='Maximize/Restore'
           id='titlebar-maximize'
         >
@@ -110,7 +110,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
       {showClose && (
         <button
           onClick={handleClose}
-          className='window-button'
+          className='window-button text-base-content'
           aria-label='Close'
           id='titlebar-close'
         >