Better Approach to Global Theming

[JosipDomazetHKS]

Is there a way to globally set the text color of all buttons in Flowbite Svelte using themes? Currently, the only method I’m aware of is this approach, which involves creating custom components. However, this requires manually creating custom buttons, tables, headers, etc., to apply global changes to specific components. This approach feels like reinventing the framework, which seems inefficient for simple global customizations.

[shinokada]

You can change the primary color in tailwindcss config file, https://github.com/themesberg/flowbite-svelte/blob/main/tailwind.config.ts.

[JosipDomazetHKS]

@shinokada Thanks for the quick reply. The primary color only affects certain buttons tho and let's say my primary color is some blue and I want a generic button with black text as a default for many actions. I do not think that creating a new component for that is a solution that scales well. Imo there would need to be a extended theme for svelte components themselves just like there is a theme for tailwind.

[shinokada]

If you are using you can try https://svelte-5-ui-lib.codewithshin.com/.

1. It has more colors.
2. You need to deepmerge theme. For example, https://github.com/shinokada/svelte-5-ui-lib/blob/main/src/lib/buttons/theme.ts

[shinokada]

https://flowbite-svelte.com/docs/pages/theme-provider