src/client/assets/scss/App.scss

@@ -366,7 +366,7 @@ pre {
 
 // comicvine metadata
 .comicvine-metadata {
-  background-color: #f2f1f9;
+  background-color: #d6cc99;
   padding: 0.8rem;
   border-radius: 0.5rem;
 }
@@ -381,7 +381,8 @@ pre {
 }
 
 .comicInfo-metadata {
-  background-color: #f7ebdd;
+  background-color: #d6cc99;
+  color: #000;
   padding: 0.8rem;
   border-radius: 0.5rem;
 }

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -69,17 +69,29 @@ export const Menu = (props): ReactElement => {
         break;
     }
   };
+  const customStyles = {
+    option: (base, { data, isDisabled, isFocused, isSelected }) => {
+      return {
+        ...base,
+        backgroundColor: isFocused ? "gray" : "black",
+      };
+    },
+    control: (base) => ({
+      ...base,
+      backgroundColor: "black",
+      border: "1px solid #CCC",
+    }),
+  };
 
   return (
     <Select
-      className="basic-single"
-      classNamePrefix="select"
       components={{ Placeholder }}
       placeholder={
         <span>
           <i className="fa-solid fa-list"></i> Actions
         </span>
       }
+      styles={customStyles}
       name="actions"
       isSearchable={false}
       options={filteredActionOptions}