Merge pull request #36 from ryjac/main

fix: 💚 Dark Mode Support

Author: pcbowers

src/components/TagsInput.module.css

@@ -4,6 +4,10 @@
   transition: none !important;
 }
 
+.input {
+  color: var(--input-fg-color) !important;
+}
+
 .control:hover {
   border-color: var(--card-border-color) !important;
 }
@@ -15,6 +19,7 @@
 
 .option {
   background-color: var(--card-bg-color) !important;
+  color: var(--input-fg-color) !important;
 }
 
 .option:hover {
@@ -27,7 +32,7 @@
 
 .placeholder,
 .singleValue {
-  color: var(--card-fg-color) !important;
+  color: var(--input-fg-color) !important;
 }
 
 .multiValue {

src/components/TagsInput.tsx

@@ -225,13 +225,15 @@ export const TagsInput = forwardRef<StateManagedSelect, TagsInputProps>(
       styles: {
         menu: (base) => ({
           ...base,
-          zIndex: 11, // Adjusted dropdown menu z-index to prevent overlap with background items
+          zIndex: 15, // Adjusted dropdown menu z-index to prevent overlap with background items
         }),
       },
       classNames: prefersDark
-        ? {
+        ? undefined
+        : {
             container: () => styles.container,
             control: () => styles.control,
+            input: () => styles.input,
             menu: () => styles.menu,
             option: () => styles.option,
             indicatorSeparator: () => styles.indicatorSeparator,
@@ -240,8 +242,7 @@ export const TagsInput = forwardRef<StateManagedSelect, TagsInputProps>(
             multiValue: () => styles.multiValue,
             multiValueLabel: () => styles.multiValueLabel,
             multiValueRemove: () => styles.multiValueRemove,
-          }
-        : undefined,
+          },
       ...reactSelectOptions,
     } as SelectProps