render a style tag with values sent from the server in a svelte kit app?

Question

Can i render a style tag on the client with attributes sent from the server in a svelte kit app?

I want my +layout.svelte to have a background color fetched from the server.

I am using tailwind and this was my approach but it did not work since you can't use variables inside style tags.

// +layout.ts
// sends the css color attributes server side
import type { LayoutLoad } from './$types'

export const ssr = true

export const load: LayoutLoad<{}> = (data) => {
    return {
        props: {
            theme: {
                primary: 'red',
                secondary: 'blue',
            },
        },
    }
}

<script lang="ts">
   // +layout.svelte
   // loads the props sent from the server and renders them in a style tag
    import type { LayoutData } from './$types'

    export let data: LayoutData
    const themeBgColor = `
        :global(.bg-primary) {
          background-color:  ${data.props.theme.primary};
    }
    `
 </script>


<style lang="postcss">
    {themeBgColor}
</style>

this works fine

<style lang="postcss">
    :global(.bg-primary-gray) {
        background-color: red;
    }
</style>

But what do I do if I want the value 'red' to come from the server?