How to update component appearance on the fly

[Yandall]

I have set the components appearance in the client.hooks.ts but this means that whenever I change the theme on the page it doesn't reflect on the clerk ui components and a refresh is necessary to update the appearance. Is there a way to somehow do this?

[natehouk]

Using the {#key} block to force a re-render of the Clerk components when the mode changes is an effective way to ensure the theme updates properly.

import { mode } from 'mode-watcher';
import { neobrutalism, dark } from '@clerk/themes';

{#key $mode}
    <UserButton appearance={{ baseTheme: $mode === 'dark' ? dark : neobrutalism }} />
{/key}

This solution works because:

1. It creates a new instance of the component each time the key (in this case, $mode) changes.
2. This forces Svelte to destroy the old component and create a new one with the updated props.
3. As a result, the Clerk components receive the new theme and render accordingly.

It's a useful technique to keep in mind for situations where you need to ensure a component fully re-renders with new props, especially when working with third-party components that might not be as reactive as native Svelte components.

[wobsoriano]

Waiting for this PR to get merged, but you can do this later:

import { neobrutalism, dark } from '@clerk/themes'
import { useClerkContext } from 'clerk-sveltekit/client'

const { clerk } = useClerkContext()
$clerk?.__unstable__updateProps({ appearance: { baseTheme: neobrutalism } })

// or directly call Clerk from window (maybe you can do this right now, not sure)

window.Clerk.__unstable__updateProps({ appearance: { baseTheme: neobrutalism } })

[Yandall]

Using the {#key} block to force a re-render of the Clerk components when the mode changes is an effective way to ensure the theme updates properly.

I would prefer to have all my appearance in just one place, thats why I put them in the initializeClerkClient, but this could work

[Yandall]

Waiting for this PR to get merged, but you can do this later:

import { neobrutalism, dark } from '@clerk/themes'
import { clerk } from 'clerk-sveltekit/client/store'

$clerk?.__unstable__updateProps({ appearance: { baseTheme: neobrutalism } })

// or directly call Clerk from window (maybe you can do this right now, not sure)

window.Clerk.__unstable__updateProps({ appearance: { baseTheme: neobrutalism } })

Awesome. So this means that when that PR is merged we could update the appearance of all the clerk components in just one place?

[wobsoriano]

Yes!