docs: Update setup and usage component

Author: ktquez

docs/guide/README.md

@@ -1,7 +1,6 @@
 # Setup
 
 ## Installation
-
 Add `@vue-a11y/dark-mode` in your Vue project.
 
 ### NPM
@@ -14,7 +13,11 @@ npm install @vue-a11y/dark-mode
 yarn add @vue-a11y/dark-mode
 ```
 
-## Basic usage
+## Usage
+
+### Globally
+
+You can use it globally in your main.js
 
 ```javascript
 import Vue from 'vue'
@@ -23,12 +26,36 @@ import VueDarkMode from '@vue-a11y/dark-mode'
 Vue.use(VueDarkMode)
 ```
 
+### Locally
+
+You can import into your component:
+
+```javascript
+import { DarkMode } from '@vue-a11y/dark-mode'
+
+export default {
+ // ...
+ components: {
+ DarkMode
+ }
+}
+```
+
+### Single file component
+<br>
+
 ```vue
-<VueDarkMode>
- <template v-slot="{ mode }">
- Color mode: {{ mode }}
- </template>
-</VueDarkMode>
+<template>
+ <DarkMode>
+ <template v-slot="{ mode }">
+ Color mode: {{ mode }}
+ </template>
+ </DarkMode>
+</template>
+
+<script>
+// ...
+</script>
 
 <style>
 :root {

docs/guide/accessibility.md

@@ -35,14 +35,14 @@ After changing the color mode, the message will be changed in the element with `
 ### Example (spanish)
 
 ```vue
-<VueDarkMode 
+<DarkMode 
  ariaLabel="Cambiar al modo de color %cm"
  ariaLive="Se eligió el modo de color %cm"
 >
  <template v-slot="{ mode }">
  Modo de color: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```
 
 **Output:**

docs/guide/class-naming.md

@@ -27,11 +27,11 @@ You can also customize the class name.
 **e.g.**
 
 ```vue
-<VueDarkMode className="%cm-theme">
+<DarkMode className="%cm-theme">
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```
 
 **Output:**

docs/guide/events.md

@@ -10,11 +10,11 @@ Event fired every color mode change.
 | `change-mode` | color mode token. (`light` \| `dark` \| `system` \| `myCustomMode`) | 
 
 ```vue
-<VueDarkMode @change-mode="myColorModeHandler">
+<DarkMode @change-mode="myColorModeHandler">
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```
 
 ```js

docs/guide/examples.md

@@ -3,22 +3,22 @@
 ## Simple button
 
 ```vue
-<vue-dark-mode>
+<DarkMode>
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</vue-dark-mode>
+</DarkMode>
 ```
 
 **Output**
 
 <div style="padding: 10px;background-color: var(--bg-secondary);">
  <ClientOnly>
- <vue-dark-mode style="padding: 8px 12px;border: 1px solid var(--border-color);">
+ <DarkMode style="padding: 8px 12px;border: 1px solid var(--border-color);">
   <template v-slot="{ mode }">
   Color mode: {{ mode }}
   </template>
- </vue-dark-mode>
+ </DarkMode>
  </ClientOnly>
 </div>
 
@@ -29,26 +29,26 @@
 ## Icon Toggle button
 
 ```vue
-<vue-dark-mode>
+<DarkMode>
  <template v-slot="{ mode }">
  <MyLightIcon v-show="mode === 'light'">
  <MyDarkIcon v-show="mode === 'dark'">
  <MySystemIcon v-show="mode === 'system'">
  </template>
-</vue-dark-mode>
+</DarkMode>
 ```
 
 **Output**
 
 <div style="padding: 10px;background-color: var(--bg-secondary);">
  <ClientOnly>
- <vue-dark-mode style="padding: 10px 14px;">
+ <DarkMode style="padding: 10px 14px;">
   <template v-slot="{ mode }">
   <svg v-show="mode === 'dark'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
   <svg v-show="mode === 'light'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
   <svg v-show="mode === 'system'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
   </template>
- </vue-dark-mode>
+ </DarkMode>
  </ClientOnly>
 </div>
 

docs/guide/meta-theme-color.md

@@ -14,7 +14,7 @@ Since `system` assumes light or dark, then you do not need to define theme-color
 :::
 
 ```vue
-<VueDarkMode 
+<DarkMode 
  :metaThemeColor="{
  light: '#f2f2f2 ',
  dark: '#232b32',
@@ -29,5 +29,5 @@ Since `system` assumes light or dark, then you do not need to define theme-color
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```

docs/guide/modes.md

@@ -33,7 +33,7 @@ Both props are optional, if not declared in the component, default values will b
 :::
 
 ```vue
-<VueDarkMode 
+<DarkMode 
  defaultMode="sepia"
  :modes="[
  'light',
@@ -45,6 +45,6 @@ Both props are optional, if not declared in the component, default values will b
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```
 

docs/guide/storage.md

@@ -7,11 +7,11 @@ By default the `@vue-a11y/dark-mode` component use **localStorage** to store the
 | `storage` | String | `localStorage` | `localStorage` or `sessionStorage` 
 
 ```vue
-<VueDarkMode storage="sessionStorage">
+<DarkMode storage="sessionStorage">
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```
 
 ::: tip

docs/howto/tailwind.md

@@ -7,11 +7,11 @@ It is possible to [changing the Selector](https://github.com/ChanceArthur/tailwi
 **e.g.**
 
 ```vue
-<VueDarkMode className="mode-%cm">
+<DarkMode className="mode-%cm">
  <template v-slot="{ mode }">
  Color mode: {{ mode }}
  </template>
-</VueDarkMode>
+</DarkMode>
 ```
 
 

docs/howto/vuepress.md

@@ -20,10 +20,10 @@ VuePress applications are rendered by the server in Node.js when generating stat
 
 ```vue
 <ClientOnly>
- <VueDarkMode>
+ <DarkMode>
  <template v-slot="{ mode }">
  Color mode: <span>{{ mode }}</span>
  </template>
- </VueDarkMode>
+ </DarkMode>
 </ClientOnly>
 ```