Device Light

The DeviceLightEvent provides web developers with information from photo sensors or similar detectors about ambient light levels near the device. For example this may be useful to adjust the screen's brightness based on the current ambient light level in order to save energy or provide better readability.

State

The useDeviceLight function exposes the following reactive state:

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

const { value } = useDeviceLight();

State	Type	Description
value	Number	The level of the ambient light in lux.

Use-cases

Detecting the ambient light around user devices can have some applications:

• Toggling between themes to adjust to the light level like using a dark theme in dark environments.

Example

You can test the following example on Firefox browser with an Andriod device with a light sensor. You should enable ambient light sensor in firefox's settings' about:config.

<template>
  <div>Current Value is: {{ value }}</div>
</template>

<script>
import { useDeviceLight } from "vue-use-web";

export default {
  setup() {
    const { value } = useDeviceLight();

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