Dark Mode

Our components will automatically adjust to the current system or browser settings of the user. This means that if a user has enabled dark mode in their operating system or browser, our components will seamlessly switch to a dark theme, providing a consistent and comfortable user experience.

However, you can also force the components to always be in dark mode or light mode by setting the dark or light attribute.

Automatic Dark Mode

Switch between light and dark mode in your browser or in your operating system to see the components adjust automatically.

Note!

The light mode switch on the top right of the page is only for the documentation site and does not affect the components.

Example:

Forcing Dark Mode

If you want your components to always be in dark mode, you can set the dark attribute in the component. This will force the component to always be in dark mode, regardless of the user's system or browser settings.

Example:

Forcing Light Mode

If you want your components to always be in light mode, you can set the light attribute in the component. This will force the component to always be in light mode, regardless of the user's system or browser settings.

Example: