# 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'


This composable function uses useMedia internally.

# Example

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

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

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

    return { theme };

# Demo