RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://Tarektouati.github.io/vue-use-web/functions/preferred-color-scheme.html below:

Website Navigation

Preferred Color Scheme | useWeb

# 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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4