creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.51k stars 307 forks source link

Spinner custom theming #504

Open francescocretti opened 7 months ago

francescocretti commented 7 months ago

Hi, sorry if this has already been asked, but I cant' find any thread or documentation. How can I customize the <Spinner /> color? I mean the rotating part of the spinner. I am aware that the circle color can be customized simply applying a text-[color] class to the element, but I can't find how to change the other part. Furthermore there's no custom theming documentation about the Spinner: would it be possible to add a custom theme?

francescocretti commented 7 months ago

I actually managed to add custom colors to the <Spinner /> to my theme like this:

const spinner = {
  defaultProps: {
    color: 'primary',
  },
  valid: {
    colors: [
      'primary',
      'accent',
    ],
  },
  styles: {
    colors: {
      primary: {
        color: "text-primary-500",
      },
      accent: {
        color: "text-accent-500",
      },
    },
  },
};

export const customTheme = { spinner };

Maybe it's worth adding it to docs, together with the other custom theming props?