Visual settings

For customizing the UI, you can create these custom properties and add them in your CSS root. They will be used instead of the default value.

Custom Property	Default Value	Definition
--zi-button-background	#bcbcbc	Background color of the button
--zi-button-color	black	Text color of the button
--zi-button-focus-outline	4px solid #9000a3	Outline focus style of the button
--zi-button-outline	none	Outline style of the button
--zi-button-position-right	Desktop: -16px Mobile: -10px	Right position of the button
--zi-button-position-top	Desktop: -16px Mobile: -10px	Top position of the button
--zi-image-max-height	92vh	Maximum image height
--zi-image-max-width	92vw	Maximum image width
--zi-image-outline	none	Outline property style of the image

Why custom properties?

Deriving settings to CSS helps maintain a lighter bundle weight.

By adopting this approach, we invoke these methods just once and integrate the custom properties within the desired scope. Remember the new image will be created as the next sibling to the original image.

This method offers increased flexibility and responsiveness.