Can the default design of interactive shapes like buttons be changed?

[kabachello]

I really like the dropdown button and the table shapes. There are a lot of options to change their appearance. I love the different table types and the coloring system with the 4 changeable colors. Very impressive!

Is there a way to change the default colors though. I would like to make my buttons to be smaller and flat-gray when I add them. And I would love to have tables striped by default.

If this only works via code change, that would be OK too, but I could not really find the exact piece of code.

[ishubin]

Thanks for feedback!

Unfortunately this is not as flexible as we would like it to be :( Currently all the colors are hardcoded in every shape, and there is not a single place that could overwrite that. I would welcome your ideas on how this should work from your perspective. I was already thinking about this since I introduced light/dark theme switch and realized that drawing diagrams and demos on a dark background is not that great, since you have to manually invert every color property of every shape every time.

My initial idea was to introduce another layer of configuration in a diagram document, that would let users configure all the colors of all the shapes in a single page . Alternatively we could instead let users upload their own color scheme configuration in some familiar format like JSON, YAML, property files etc, and let it be attached to the saved document, so that next time, when user opens a document, it will be loaded again. I am still thinking what would work best and how to go about this since not all shapes are the same. The majority of shapes have fill, strokeColor shape properties and body text slot, but there are many shapes that have multiple text slots and additional color properties like table, component etc.

[kabachello]

Tables have a very cool set of 4 colors, that can be changed in their properties. I suppose, the defaults are stored somewhere? Where is that?

I think, a good start would be a way to easily add own shapes to the menu and, perhaps, to remove/replace existing ones - see #707. Thus, I could create a table or button with a custom color and replace the existing table or button template. In my opinion, this is a simpler solution, than to formalize colors and allow global themeing across all shapes. In fact, when it comes to buttons, themeing might not be limited to colors: the rounded corners, the color gradient, etc. may also be different for specific cases. Allowing to quickly replace default shapes may solve all these challenges at once.

[ishubin]

I suppose, the defaults are stored somewhere? Where is that?

https://github.com/ishubin/schemio/blob/master/src/ui/components/editor/items/shapes/Table.vue#L751 value field in each args object is the default value for that shape property

I think, a good start would be a way to easily add own shapes to the menu and, perhaps, to remove/replace existing ones - see https://github.com/ishubin/schemio/issues/707.

I agree about adding new shapes, especially since we already have a way of designing new simple shapes with Schemio itself. I am not sure about removing shapes as I always need to maintain the balance of the two versions of Schemio (cloud version at https://schem.io and the self-deployed version)

In my opinion, this is a simpler solution, than to formalize colors and allow global themeing across all shapes

Yeah, that's a good argument.

The biggest issue with shapes customization that I have at this moment is the problem of sharing your diagram. Right now you can make very detailed and complex diagram with a lot of scripts and custom animations. And then you can just export it as JSON and send to someone else to load in either their own Schemio service or in a cloud version. With the customized shapes it will no longer work. So I need to think this carefully through