Material Style theme builder

Personalize Material Style to reflect your product's brand identity

Utilize this tool to effortlessly modify theme colors, border radius, and border widths, as it automatically generates the necessary CSS and SASS variables for you.

1. Choose the theme (primary, secondary, ...) you'd like to update.
2. Select a color for the theme.
   Note: The selected color serves as the base color for the theme in light mode and is used to generate different variants of the theme (hover, active, emphasis, ...) for both light and dark modes. Ensure it maintains an appropriate contrast ratio against a light background (e.g., white).
3. Adjust the border radius.
4. Set the border width.
5. Preview components in Light/Dark mode.
6. Copy the generated CSS/SASS into your codebase.

For more information on theming and how to leverage CSS and SASS to personalize Material Style, click here.