Feat/preferred color scheme (#11)

* feat: created PreferredColorScheme

* docs: add docs for usePreferredColorScheme

Author: kimuraz

.gitignore

@@ -13,7 +13,8 @@ coverage
 .idea
 .vscode
 .vs
+*.swp
 
 # logs
 
-*.log
+*.log

docs/.vuepress/config.js

@@ -66,6 +66,7 @@ module.exports = {
         'local-storage',
         'mouse-position',
         'network',
+        'preferred-color-scheme',
         'script',
         'scroll-position',
         'window-size'

docs/guide/README.md

@@ -32,6 +32,7 @@ These are the currently implemented Web APIs and the planned ones.
 - [Local storage API](./local-storage.md).
 - [Mouse Position](./guide/mouse-position.md).
 - [Network Information API](./network.md).
+- [Preferred Color Scheme](./preferred-color-scheme.md).
 - [Script](./script.md).
 - [Window Scroll Position](./scroll-position.md).
 - [Window Size](./window-size.md).

docs/guide/preferred-color-scheme.md

@@ -0,0 +1,33 @@
+# Preferred Color Scheme
+
+> The [matchMedia preferred-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-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.
+
+```js
+import { usePreferredColorScheme } from 'vue-use-web';
+
+const scheme = usePreferredColorScheme();
+```
+
+| State     | Type       | Description                           |
+| --------- | ---------- | ------------------------------------- |
+| theme     | `String`   | Current user color scheme preferrence |
+
+## Example
+
+```vue
+<template>
+  <h1>User's preference: {{ theme  }}</h1>
+</template>
+
+<script>
+  import { usePreferredColorScheme } from 'vue-use-web';
+
+  export default {
+    setup() {
+      const theme = usePreferredColorScheme();
+
+      return { theme };
+    }
+  };
+</script>
+```

src/PreferredColorScheme.ts

@@ -0,0 +1,37 @@
+import { ref, onMounted, onUnmounted } from '@vue/composition-api';
+
+export function usePreferredColorScheme() {
+  const themesObj = {
+    light: window.matchMedia('(prefers-color-scheme: light)'),
+    dark: window.matchMedia('(prefers-color-scheme: dark)'),
+    'no-preference': window.matchMedia('(prefers-color-scheme: no-preference)')
+  };
+  const value = ref(getTheme());
+
+  function getTheme() {
+    let theme = null;
+    for (const key in themesObj) {
+      if (themesObj[key].matches) {
+        theme = key;
+        break;
+      }
+    }
+    return theme;
+  }
+
+  function handler() {
+    value.value = getTheme();
+  }
+
+  onMounted(() => {
+    Object.values(themesObj).forEach(theme => {
+      theme.addEventListener(handler);
+    });
+  });
+
+  onUnmounted(() => {
+    Object.values(themesObj).forEach(themeMedia => {
+      themeMedia.removeEventListener(handler);
+    });
+  });
+}

src/index.ts

@@ -1,15 +1,16 @@
-export * from './Network';
 export * from './Battery';
-export * from './Geolocation';
 export * from './Clipboard';
-export * from './Script';
-export * from './DeviceOrientation';
+export * from './DeviceLight';
 export * from './DeviceMotion';
+export * from './DeviceOrientation';
 export * from './Fetch';
-export * from './DeviceLight';
-export * from './WindowScrollPosition';
-export * from './WindowSize';
-export * from './IntersectionObserver';
 export * from './FullScreen';
-export * from './MousePosition';
+export * from './Geolocation';
+export * from './IntersectionObserver';
 export * from './LocalStorage';
+export * from './MousePosition';
+export * from './Network';
+export * from './PreferredColorScheme';
+export * from './Script';
+export * from './WindowScrollPosition';
+export * from './WindowSize';