vue-a11y
diff --git a/‎docs/.vuepress/config.js‎
Lines changed: 2 additions & 0 deletions b/‎docs/.vuepress/config.js‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎docs/.vuepress/public/favicon-dark.svg‎
Lines changed: 1 addition & 0 deletions b/‎docs/.vuepress/public/favicon-dark.svg‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎docs/.vuepress/public/favicon.svg‎
Lines changed: 1 addition & 0 deletions b/‎docs/.vuepress/public/favicon.svg‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎docs/guide/favicon.md‎
Lines changed: 50 additions & 1 deletion b/‎docs/guide/favicon.md‎
Lines changed: 50 additions & 1 deletion
diff --git a/‎src/DarkMode.vue‎
Lines changed: 24 additions & 5 deletions b/‎src/DarkMode.vue‎
Lines changed: 24 additions & 5 deletions
@@ -5,6 +5,7 @@ module.exports = {
  serviceWorker: true,
  head: [
  ['meta', { name: 'theme-color', content: '#fff' }],
+ ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }]
  ],
  themeConfig: {
  home: false,
@@ -41,6 +42,7 @@ module.exports = {
  '/guide/modes.md',
  '/guide/events.md',
  '/guide/storage.md',
+ '/guide/favicon.md',
  '/guide/meta-theme-color.md',
  '/guide/accessibility.md',
  '/guide/examples.md'
 
@@ -1,3 +1,52 @@
 # Favicon
 
-Coming soon
+| prop | Type | default
+| ----------- | --------- | ---------- 
+| `favicon` | Boolean | `true`
+
+You can switch the favicon according to the `prefers-color-scheme`.
+
+## Naming favicons 
+
+Favicons should be named as follows: 
+
+- For `light` the default favicon will be used, for example: `https://example.com/favicon.svg` or `/favicon.svg`
+- For `dark` will be used, for example: `https://example.com/favicon-dark.svg` or `/favicon-dark.svg`
+
+::: tip
+For `@vue-a11y/dark-mode`:
+- You can use absolute URL (`https://example.com/favicon.svg`) or relative (`/favicon.svg`);
+- You can use any extension for the favicon. `svg` is currently the most recommended and supported in modern browsers. See more about [svg favicons](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/#why-svg);
+:::
+
+Insert default favicon into your `index.html`
+
+e.g.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <!-- omitted -->
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+```
+
+If the user has defined in his `dark` operating system as color mode preference for applications. `@vue-a11y/dark-mode` will identify and make the change to your favicon.
+
+e.g.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <!-- omitted -->
+ <link rel="icon" type="image/svg+xml" href="/favicon-dark.svg">
+```
+
+---
+
+::: tip
+You can see this working, just go to your operating system's color settings and change to `dark`, go back to that documentation and check the favicon has changed.
+
+This is a practice used by several sites, one of which is github.
+:::
@@ -48,15 +48,19 @@ export default {
  ariaLive: {
  type: String,
  default: '%cm color mode is enabled'
+ },
+ favicon: {
+ type: Boolean,
+ default: true
  }
  },
 
  data () {
  return {
- elementMetaThemeColor: null,
  chosenMode: null,
  currentMode: null,
- listenerDark: null
+ listenerDark: null,
+ metaThemeColorElement: null
  }
  },
 
@@ -106,9 +110,10 @@ export default {
  },
 
  mounted () {
- this.elementMetaThemeColor = document.querySelector('meta[name="theme-color"]')
+ this.metaThemeColorElement = document.querySelector('meta[name="theme-color"]')
  this.listenerDark = this.getMediaQueryList('dark')
  this.listenerDark.addListener(this.handlePreferColorScheme)
+ this.toggleFavicon(this.getPrefersColorScheme)
  },
 
  beforeDestroy () {
@@ -131,20 +136,34 @@ export default {
  setMetaThemeColor (color) {
  if (color) {
  this.$nextTick(() => {
- if (this.elementMetaThemeColor) this.elementMetaThemeColor.setAttribute('content', color)
+ if (this.metaThemeColorElement) this.metaThemeColorElement.setAttribute('content', color)
  })
  }
  },
 
+ toggleFavicon (mode) {
+ if (!this.favicon) return
+ this.$nextTick(() => {
+ const favicon = document.querySelector('link[rel="icon"]')
+ if (!favicon) return
+ const href = favicon.getAttribute('href')
+ const lastFour = href.substr(-4, 4)
+ const favDarkStr = `-dark${lastFour}`
+ favicon.setAttribute('href', mode === 'light' ? href.replace(favDarkStr, lastFour) : href.replace(lastFour, favDarkStr))
+ })
+ },
+
  handleColorModeClass (action) {
  if (this.$isServer) return
  return document.documentElement.classList[action](`${this.className.replace(/%cm/g, this.currentMode)}`)
  },
 
  handlePreferColorScheme (e) {
+ const colorMatch = e.matches ? 'dark' : 'light'
+ this.toggleFavicon(colorMatch)
  if (this.isSystem) {
  this.handleColorModeClass('remove')
- this.currentMode = e.matches ? 'dark' : 'light'
+ this.currentMode = colorMatch
  this.setMode('system')
  }
  },