Client-server mismatch when the color mode is set to system

[obulat]

Description

When the color mode is set to default system, and the user's preference is dark, there is a client-server mismatch which probably causes the page to re-render.

The problem is with the use of usePreferredColorScheme in osColorMode: on the server, the media query is not available, so the value is set to default no-preference, setting the effective color mode to "light". If the user's system is set to dark, the media query returns "dark" on the client. Normally, this would not cause a mismatch since only the rendering of the CSS values would change, but we use different icons (for the theme switcher - sun/moon, and for the licenses) in different color modes, so this causes client-server mismatch.

Reproduction

1. Run the app in dev mode, and set the color mode to system.
2. Go to https://localhost:8443/search?q=cat
3. Refresh the app
4. See error: console logs about hydration mismatch.

Screenshots

runtime-core.esm-bundler.js?v=bd1a66ef:50 [Vue warn]: Hydration attribute mismatch on <use href=​"/​_nuxt/​assets/​svg/​sprite/​icons.svg#sun" data-v-inspector=​"src/​components/​VIcon/​VIcon.vue:​89:​5" data-v-0335fe76>​…​</use>​ 
  - rendered on server: href="/_nuxt/assets/svg/sprite/icons.svg#sun"
  - expected on client: href="/_nuxt/assets/svg/sprite/icons.svg#moon"

Additional context