Preferred Color Scheme

The matchMedia preferred-color-scheme is used to detect the user's preference for a light or dark theme. This can be useful when you should adapt your UI depending on the user preference.

State

import { usePreferredColorScheme } from 'vue-use-web';

const scheme = usePreferredColorScheme();

State	Type	Description
theme	Ref<String>	Current user color scheme preference, will be one of 'dark', 'light' and 'no-preference'

TIP

This composable function uses useMedia internally.

Example

<template>
  <h1>User's preference: {{ theme }}</h1>
</template>

<script>
import { usePreferredColorScheme } from 'vue-use-web';

export default {
  setup() {
    const theme = usePreferredColorScheme();

    return { theme };
  }
};
</script>

Demo