creating custom themes that include defaults

[mzanelee]

hey I'm really liking this library so far, just wanted to ask if there's a way to create a custom theme based on the default theme? When I create a custom theme it only has the tokens I provide it, but would like to have all the default values that have not been overridden. Suggestions on how I'd be able to do that?

[BeeMargarida]

Hi! Yes, it's possible:

<script>
    import { createTheme, useSvelteUITheme, SvelteUIProvider } from '@svelteuidev/core';

    const newTheme = createTheme('<class name of the new theme>', {
        ...useSvelteUITheme(),
        // override with your styles
    });
</script>

<SvelteUIProvider class={newTheme}>
	<slot />
</SvelteUIProvider>

[mzanelee]

seems to be a type mismatch between the returned value from useSvelteUITheme() and the expected type for createTheme()

ie

gives a type error:
Argument of type 'SvelteUITheme' is not assignable to parameter of type 'string | ({ colors?: { dark50?: string | number | boolean | undefined; dark100?: string | number | boolean | undefined; dark200?: string | number | boolean | undefined; dark300?: string | number | boolean | undefined; ... 138 more ...; black?: string | ... 2 more ... | undefined; } | undefined; ... 13 more ...; tran...'. Type 'SvelteUITheme' is not assignable to type '{ colors?: { dark50?: string | number | boolean | undefined; dark100?: string | number | boolean | undefined; dark200?: string | number | boolean | undefined; dark300?: string | number | boolean | undefined; ... 138 more ...; black?: string | ... 2 more ... | undefined; } | undefined; ... 13 more ...; transitions?: ...'. Type 'SvelteUITheme' is not assignable to type '{ colors?: { dark50?: string | number | boolean | undefined; dark100?: string | number | boolean | undefined; dark200?: string | number | boolean | undefined; dark300?: string | number | boolean | undefined; ... 138 more ...; black?: string | ... 2 more ... | undefined; } | undefined; ... 13 more ...; transitions?: ...'. The types of 'colors.dark50' are incompatible between these types. Type 'Token<"dark50", string, "colors", "svelteui">' is not assignable to type 'string | number | boolean | undefined'.ts(2345)

[mzanelee]

also this <SvelteUIProvider class={newTheme}> is a bit confusing? pardon my ignorance but what does it mean to create a class from a theme? Using the theme like this, I wasn't able to access the theme when creating styles in my child components. It worked as expected when I used <SvelteUIProvider theme={newTheme}>

[BeeMargarida]

Hum, nice catch, we need to fix this. Also, since this question has been asked more than once, we will add this example to the docs.

Regarding the class or theme, it basically works the same, since we are using the theme prop to pass it to the stitches config and then use the generated class in the SvelteUIProvider.

[mzanelee]

OK so to get the default theme, I had to do it like:

const defaultTheme = useSvelteUITheme();
const newTheme = {
    ...useSvelteUITheme(),
    ...(createTheme('new-theme', {...}) as object)
}