useMediaQuery is not working as expected

[jd-solanki]

Describe the bug

I am using usePreferredColorScheme composable but I wasn't returning the value I wanted so I dig down and tried to use useMediaQuery.

I noticed that useMediaQuery('(prefers-color-scheme: dark)') is returning false. However, if I run below code, I get DARK MODE... logged to console.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
  console.log('DARK MODE...')

Full code

const colorScheme = usePreferredColorScheme()
console.log('colorScheme.value :>> ', colorScheme.value)

const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
console.log('isPreferredDark :>> ', isPreferredDark.value)

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
  console.log('DARK MODE...')

Output

Reproduction

https://stackblitz.com/edit/vitejs-vite-dlmmn4?file=src/App.vue

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 1.07 GB / 7.71 GB
    Container: Yes
    Shell: 0.12.1 - /home/jd/.xonsh/.venv/bin/xonsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
  npmPackages:
    @vueuse/core: ^8.2.6 => 8.4.2 
    vue: ^3.2.33 => 3.2.33

Used Package Manager

yarn

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.

[alokVishu]

Yes, I am also feeling the same issue.
+1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jd-solanki]

Keep it open

[GODLiangCY]

It should be solved in #2178 . How about trying again with the newest version of VueUse?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jd-solanki]

It is working as expected after trying posted code with the latest version.