I've been working with Stripe Elements and implementing dynamic changes to input styles based on the theme. Everything is functioning as intended, but I'm running into an issue when switching themes while on the page containing the Stripe Elements input - I have to hard refresh the page in order for the CSS changes to take effect.
My goal is to enable the styles to update automatically when the theme changes, specifically focusing on changing the backgroundColor.
Here's the current implementation:
import { useTheme } from "next-themes";
const { resolvedTheme, setTheme } = useTheme();
const CARD_OPTIONS = {
iconStyle: "solid",
style: {
base: {
backgroundColor: `${resolvedTheme === "dark" ? "black" : "white"}`,
iconColor: "#6D28D9",
color: `${resolvedTheme === "dark" ? "white" : "#9CA3AF"}`,
fontWeight: "500",
fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
fontSize: "16px",
fontSmoothing: "antialiased",
":-webkit-autofill": {
color: "#fce883",
},
"::placeholder": {
color: "#D1D5DB",
},
},
invalid: {
iconColor: "#ef2961",
color: "#ef2961",
},
},
};
<CardElement options={CARD_OPTIONS} />
Another approach I experimented with involves using mount and passing DARK_CARD_OPTIONS to the Card Element.
Like this:
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
const DARK_CARD_OPTIONS = {
iconStyle: "solid",
style: {
base: {
backgroundColor: "red",
iconColor: "#6D28D9",
color: "white,
fontWeight: "500",
fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
fontSize: "16px",
fontSmoothing: "antialiased",
":-webkit-autofill": {
color: "#fce883",
},
"::placeholder": {
color: "#D1D5DB",
},
},
invalid: {
iconColor: "#ef2961",
color: "#ef2961",
},
},
};
{mounted && (
<div className="p-4 rounded-lg border border-gray-800 dark:border-gray-600 focus:border-purple-700">
{resolvedTheme === "dark" ? (
<CardElement options={DARK_CARD_OPTIONS} />
) : (
<CardElement options={CARD_OPTIONS} />
)}
</div>
)}
However, this method seems to only result in certain areas of the CardElements input updating dynamically.
Please refer to the screenshots below (highlighted in red):