Customizing or creating a theme

Pre-built themes uses these custom properties:

Name	CSS rule	Description
--confirm-toast-bg	background-color	Background color of the confirm toast.
--confirm-toast-box-shadow	box-shadow	Box shadow of the confirm toast.
--confirm-toast-text-color	color	Color of the message text in the confirm toast.
--confirm-toast-btn-close-color	color	Color of the button-close in the confirm toast.
--confirm-toast-btn-yes-bg	background-color	Background color of the button-yes in the confirm toast.
--confirm-toast-btn-yes-color	color	Color of the button-yes text in the confirm toast.
--confirm-toast-btn-no-bg	background-color	Background color of the button-no in the confirm toast.
--confirm-toast-btn-no-color	color	Color of the button-no text in the confirm toast.
--confirm-toast-btn-hover	filter	Filter value for each button’s hover effect in the confirm toast.
--confirm-toast-btn-yes-focus	outline	Outline value for the focus effect in the button-yes.
--confirm-toast-btn-no-focus	outline	Outline value for the focus effect in the button-no.
--confirm-toast-btn-close-focus	outline	Outline value for the focus effect in the button-close.
--confirm-toast-btn-no-disabled	filter	Filter value for the disabled style in the button-no.
--confirm-toast-btn-yes-disabled	filter	Filter value for the disabled style in the button-yes.

If we want to create or update a theme, there are some custom properties that we can override. For this purpose, we need to pass a class to the className property to override those custom properties.

For theme creation, refer to this example. For theme customization, see this example.

Why custom properties?

Deriving settings to CSS helps maintain a lighter bundle weight.

By adopting this approach, we do not bundle more JS than the necessary.

This method offers increased flexibility and responsiveness, while you can even use media queries or dynamic JS styles.