Theme

[Mhirji]

Hi @skclusive, great progress!! I saw the video clip on the ming and am wondering if you could publish the documentation on how to achieve it.

[skclusive]

hi. documentation app is already live with 2.0.0-rc

https://skclusive.github.io/Skclusive.Material.Docs/ (weassembly based)

https://skclusive-ui.azurewebsites.net/ (server rendered)

could you please try it out and provide your feedback?

[Mhirji]

The docs are really helpful, there are some broken links, those which link to overriding styles. What I was wondering, is how to set the primary/secondary colors for the Theme Provider, if that is possible.

[skclusive]

please report the broken links.

yes it is possible to provide custom primary/secondary colors. yea that custom theming documentation is missing.

ThemeProvider component accepts Light and Dark ThemeConfig object which custom values.

https://github.com/skclusive/Skclusive.Material.Component/blob/master/Theme/src/Theme/ThemeProvider.razor

you can find the default ThemeConfigBuilder class, you can follow similar to create your custom theme and pass it to theme provider.

https://github.com/skclusive/Skclusive.Material.Component/blob/master/Theme/src/Theme/ThemeBuilder.cs

let me know for more info.

[Mhirji]

Thanks @skclusive , that worked! Will close this, unless you feel otherwise, once the docs for Theme has been published.

[skclusive]

thats great. do you think the current API for customizing the theme is good enough or want to have additional builder API requiring few inputs from users and returning the ThemeConfig?

yea. we can close this after documentation update.

[Mhirji]

I think that there is a lot to customize now, especially to maintain a whole theme when you just want to change a couple of colors. Though you should allow for customizing the entire theme, the idea of just setting a primary and secondary color, similar to the way mui does it, would be good. Perhaps the theme could accept vales for each part of the class as an input but keep a default value when one is not supplied. Also, calculating specific colors where possible based on a primary or secondary color which is supplied would be really cool.

[skclusive]

great points. so following are the few approaches.

1. higher order API to be used collect fewer colors (primary and secondary etc)

2. possibility of getting partial config and populate default value for missing values.

Also, calculating specific colors where possible based on a primary or secondary color which is supplied would be really cool

yes. currently we have the colors statically (even values derived from primary/secondary colors).

In Material-UI, JS is used to manipulate the colors. Either need to check whether we can do the same in C# or some other .NET API providing color manipulation like, fade.

[skclusive]

ThemeProvider updated to received theme configuration equivalent to material-ui configuration. we could serialize the material-ui json to ThemeConfig.

public static ThemeConfig Light = new ThemeConfig
    {
        Palette = new PaletteConfig
        {
            Type = PaletteType.Light,

            Primary = new PaletteColorConfig
            {
                Main = PaletteColors.Blue.X700
            },

            Secondary = new PaletteColorConfig
            {
                Main = PaletteColors.Pink.A400.Darken(0.1m)
            }
        }
    };