exporting setContext with store up the component tree and re-using it in the same component

[bartcuijpers]

I'm wondering if there's a best pratice to create an initialization function containing a setContext with a store, which is then executed in a component up in the comonent tree, and re-used in the same component.
I came up with two options...

option 1;

// component.svelte
<script context="module">
   export function initiateInLayout() {
      const themeStore = writable('light')
      setContext('theme', themeStore);
   }
</script>
<script>
   const themeStore = getContext('theme').
   function clickHandler() {
      themeStore.set('dark')
   }
</script>

{$themeStore}

// +layout.svelte
<script>
   import {initiateInLayout} from '$lib/component.svelte'
   // initiate in layout so that the store gets the correct scope in the whole application on the client side
   initiateInLayout()
</script>

option 2;

// component.svelte
<script context="module">
   const themeStore = writable('light')
   export function initiateInLayout() {
      setContext('theme', themeStore);
   }
</script>
<script>
   function clickHandler() {
      themeStore.set('dark')
   }
</script>

{$themeStore}

// +layout.svelte
<script>
   import {initiateInLayout} from '$lib/component.svelte'
   // initiate in layout so that the store gets the correct scope in the whole application on the client side
   initiateInLayout()
</script>

In the second option the initilization of the store const is at the top level making the store directly available in the component itself. But I'm concerned about SSR data leakage...