Cannot respond to real-time theme color changes

[guxuerui]

When I try to make the modal background color change with the theme color, it always fails to update in real-time unless I refresh the page. What should I do?

My code:

let modalBg = 'rgba(255, 255, 255, 1)'
$: if ($currentTheme) {
  // currentTheme is a writable value, and I can get the right value after I change theme
  console.log('[src/routes/+layout.svelte:12] $currentTheme: ', $currentTheme)
  modalBg = $currentTheme === 'dark' ? 'rgba(31, 41, 55, 1)' : 'rgba(255, 255, 255, 1)'
  console.log('[src/routes/+layout.svelte:14] modalBg: ', modalBg)
}

<Modal
  closeButton={true}
  unstyled={false}
  styleWindow={{ width: "80%", backgroundColor: modalBg }}
>
  <slot />
</Modal>

Can anyone provide me with some assistance? Thank you very much.

[flekschas]

You might need to recreate the style object to have its reference change when modalBg changes. E.g.:

$: styleWindow = { width: "80%", backgroundColor: modalBg };

and assign styleWindow to the modal's styleWindow: <Modal styleWindow={styleWindow}>...</Modal>

[guxuerui]

You might need to recreate the style object to have its reference change when modalBg changes. E.g.:

$: styleWindow = { width: "80%", backgroundColor: modalBg };

and assign styleWindow to the modal's styleWindow: <Modal styleWindow={styleWindow}>...</Modal>

OK，thanks for your reply~ I will try this again.