How to implement global style overriding or globally apply custom styles

[chenqianhe]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

I hope to modify the primary in color through certain configurations, so that all places based on primary can automatically become the color I set. For example, after I change primary to red, buttons everywhere change to red.

I hope to make global modifications, rather than changing in every place where it is used.

I have tried Custom theme but it didn't work.

In which browser(s) did the problem occur?

Chrome, Other - list in description

Steps To Reproduce

+layout.svelte

const newTheme = createTheme("new-theme", {
	colors: {
		primary: "red",
	},
});

<SvelteUIProvider class={newTheme}>
	<NavBar {data} />
	<slot />
	<footer class="bg-white"></footer>
</SvelteUIProvider>

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Relevant Assets

No response

[plrenaudin]

This would be indeed very helpful to be able to override the primary color once and have an easy way to customize the default color palette. But it looks like the blue is hardcoded in a few places (for the buttons at least)

[charlie-roosen]

I'm also completely lost on how to redefine the Svelte color scheme. I've looked over and over at the Svelte UI documentation and stitches.js documentation. I've tried using globalCss().

I'm not sure this is a bug, or just a documentation issue. If it's just a documentation issue, it would be great to have some documentation with a specific example of how to change the primary color globally.

Thanks

[BeeMargarida]

Hey, right now we don't have a workaround besides setting the color prop in each component. We are moving away from our current styling solution, so this will definitely be changed in the future.