fix darkMode color

components/organisms/custom-filter-config.tsx

@@ -26,7 +26,7 @@ export const CustomFilterConfig = () => {
 
 const PreviewFilterConfig = () => {
 	return (
-		<div className="flex flex-col w-full bg-destructive-foreground p-4">
+		<div className="flex flex-col w-full text-primary dark:text-primary-foreground bg-destructive-foreground p-4">
 			<div className="flex gap-2 w-full pb-2">
 				<Label>
 					{browser.i18n.getMessage("common_sample_custom_filter_1")}
@@ -140,7 +140,10 @@ const UserFilterConfig = () => {
 
 			<div className="flex flex-col gap-4">
 				{state.current.custom_user_filters.map((filter, i) => (
-					<div key={filter.id} className="w-full bg-destructive-foreground p-4">
+					<div
+						key={filter.id}
+						className="w-full text-primary dark:text-primary-foreground bg-destructive-foreground p-4"
+					>
 						<div className="flex gap-2">
 							<div className="flex flex-col gap-2 justify-center">
 								<Button

components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"flex h-10 w-full rounded-md border border-input text-primary bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 					className,
 				)}
 				ref={ref}