Adding components and properties

[Simon-U]

Hello @AnnMarieW ,

As I said, I was always struggling with building a theme, and therefore I find the idea of a theme builder amazing.

Currently, the builder allows modifying the colour. My idea would be to extend the builder to components and help the user to modify the properties of the component. For example, how the active of a tab is behaving, the radius or other parameters.

This would then be exported with the overall them and can be easily integrated into the code.
I don't know how many hours I spend to sometimes figuring out how to change certain properties of the NavLink or other components.

Basically, a full customisation of the theme while visualising it actively,

Best, Simon

[AnnMarieW]

Hi @Simon-U

Can you give a bit more detail on how the UI would work? @idling-mind had an interesting suggestion here; PR 1 comment To use a JsonInput component to update the theme.

[Simon-U]

That's also interesting., but then you need to know what the different values are to customise something.

Maybe something like this:

1. An Add button to add any component to the layout to see the changes to it.
2. Perhaps something like a pop-up if you click an icon next to the component or a tooltip. In the pop-up you can configure all the props.
3. After configuration, the props get written to the theme.

In the Pop-up we could put things like On hover, on active, the selected colour and other things.
It would basically an interface to configure everything. :D

[AnnMarieW]

That would be amazing, but it would be quite complex if it included all components. I'd be happy to look at a minimal example if you have in mind something that could work.

[Simon-U]

Yeah I agree. We could start by major things like the input. And then maybe add things continuously.

I will see if I can make a fork this week with a small example with one component.

[AnnMarieW]

That would be fantastic! If you do a PR with an example, please add a new folder and include your app there rather than changing the current app. I think it could be helpful to have different versions of the app for different purposes. The current one works well just to introduce the concept of the theme prop in the MantineProvider. This one would be for more advanced users.

[Simon-U]

By the way, I first saw you updates on the documentation. Epically, the part around the theming is amazing. That will help folks a lot.

[AnnMarieW]

Thanks @Simon-U Still lots of work to do on the docs, but chipping away at it 🙂