Dark mode implementation with VueUse.
{{ code5 }}
The VueUse useDark composable makes use of the `dark` class on the html tag so you can easily take advantage of the UnoCSS `dark` variant.
{{ code4 }}
You can implement a toggle button easily by doing:
{{ code2 }}
{{ code1 }}
A number of shortcuts are available to make your life with colors easier.
For each color utilities: `bg`, `text`, `border`, `ring` and `divide`, shortcuts for `white`, `black` and `gray` colors are generated (based on your prefix `u` by default) that handles the dark mode automatically:
{{ code3 }}
For example `u-bg-gray-100` is a shortcut for `bg-gray-100 dark:bg-gray-800`. Take a look at the shortcuts definitions.