How to get Stripe Elements to dynamically change styles with Next-themes

Issue

I am using stripe elements and dynamically changing the input styles depending on the theme. It works, but my only problem is if I change the theme whilst being on the page containing the stripe elements input I have to hard refresh the page in order to see the CSS changes.

What I am trying to achieve is to get the styles to change when the theme changes. Please note, I am trying to change the backgroundColor.

Here's what I currently have:

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 option I have tried is using mount and then passing DARK_CARD_OPTIONS to the Card Element.

Like so:

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>
        )}

For some reason this only makes some areas of the CardElements input change dynamically.

Please see screenshot below (please note I've used red to make it stand out):

Solution

You have to forcefully re-mounting the CardElement when the theme changes to get it to work:

<CardElement key={resolvedTheme} options={CARD_OPTIONS} />

Answered By - adherb