design dark mode page user-account

app/component/EditField.js

@@ -21,7 +21,7 @@ function EditField({
         disabled={!data?.isEdit}
         placeholder={placeholder || ""}
         type="text"
-        className={`!w-full res-field-account ${
+        className={`!w-full res-field-account dark:!bg-transparent ${
           isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
         }`}
         onChange={(e) => {

app/component/element/AutoCompleteSelect.js

@@ -1,5 +1,5 @@
 import BottomSelect from "@/components/icons/BottomSelect";
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
 function AutoCompleteSelect({ list, isError, updateData, name, label }) {
@@ -38,6 +38,18 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
           border: isError ? "1px solid red !important" : "",
         },
       }}
+      renderOption={(props, option) => {
+        return (
+          <Button
+            {...props}
+            fullWidth
+            className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+            style={{}}
+          >
+            {option.label}
+          </Button>
+        );
+      }}
       renderInput={(params) => (
         <TextField
           fullWidth

app/globals.css

@@ -610,3 +610,22 @@ html {
   stroke: #a1a1a1 !important;
   fill: #a1a1a1 !important;
 }
+
+.dark .MuiOutlinedInput-notchedOutline {
+  border-color: #343645 !important;
+}
+
+.dark .Mui-disabled,
+.dark .MuiInputBase-input {
+  transition: 0.3s all;
+  -webkit-text-fill-color: #a1a1a1 !important;
+}
+
+.dark .Mui-disabled {
+  -webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important;
+}
+
+.dark .MuiPaper-root {
+  background: #1f1d2b !important;
+  box-shadow: 0px 0px 14.2px 0px rgba(74, 73, 73, 0.19) !important;
+}