useColorMode and useDark trigger reflows every time they are used

[jpleclerc]

Describe the bug

The bug has two parts:

1. useColorMode's default onChange function is triggered as soon as the composable is called. Unless the disableTransition: false option is used, the page will reflow and negatively impact performance on complex pages.
2. The onChange function will be triggered once per useColorMode usage whenever we toggle the dark mode, triggering a reflow each time.

This also affects useDark since it directly uses useColorMode.

Two mitigating solutions until this is fixed:

1. Use useDark and useColorMode once and share the ref across the app to avoid unnecessary calls to the onChange functions. This is not possible whenever a library uses the composable.
2. Use disableTransition: false to avoid page reflows, but then again, if a library doesn't use the option, we have the same problem.

Potential fixes I can think of:

1. Do not call the onChange function on usage
2. Do not call the onChange function if nothing changed
3. Do not register the same onChange function multiple times

Reproduction

Not required

System Info

All systems

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.