feat: Toggle favicon by prefer-color-scheme

ktquez · ktquez · commit 987a555ea23c · 2020-06-09T19:51:42.000-03:00
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -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'
diff --git a/docs/.vuepress/public/favicon-dark.svg b/docs/.vuepress/public/favicon-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><clipPath id="b"><rect width="32" height="32"/></clipPath></defs><g id="a" clip-path="url(#b)"><path d="M15.853,0A15.853,15.853,0,1,0,31.706,15.853,15.853,15.853,0,0,0,15.853,0Zm-.24,3.148A2.051,2.051,0,1,1,13.565,5.2,2.052,2.052,0,0,1,15.612,3.148ZM24.5,9.769l-6.1.771,0,6.105,2.955,9.864a1.149,1.149,0,0,1-.835,1.4,1.135,1.135,0,0,1-1.4-.808l-3.027-8.979H15.16l-2.785,9.165a1.143,1.143,0,0,1-1.5.64,1.194,1.194,0,0,1-.719-1.5l2.558-9.68V10.54L7.1,9.775a1.02,1.02,0,0,1-.921-1.131A1.061,1.061,0,0,1,7.32,7.678l6.827.588h2.994l7.27-.6a1.052,1.052,0,0,1,.086,2.1Z" transform="translate(0.1 0.1)" fill="#fff"/></g></svg>
diff --git a/docs/.vuepress/public/favicon.svg b/docs/.vuepress/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><clipPath id="b"><rect width="32" height="32"/></clipPath></defs><g id="a" clip-path="url(#b)"><path d="M15.853,0A15.853,15.853,0,1,0,31.706,15.853,15.853,15.853,0,0,0,15.853,0Zm-.24,3.148A2.051,2.051,0,1,1,13.565,5.2,2.052,2.052,0,0,1,15.612,3.148ZM24.5,9.769l-6.1.771,0,6.105,2.955,9.864a1.149,1.149,0,0,1-.835,1.4,1.135,1.135,0,0,1-1.4-.808l-3.027-8.979H15.16l-2.785,9.165a1.143,1.143,0,0,1-1.5.64,1.194,1.194,0,0,1-.719-1.5l2.558-9.68V10.54L7.1,9.775a1.02,1.02,0,0,1-.921-1.131A1.061,1.061,0,0,1,7.32,7.678l6.827.588h2.994l7.27-.6a1.052,1.052,0,0,1,.086,2.1Z" transform="translate(0.1 0.1)" fill="#35363a"/></g></svg>
diff --git a/docs/guide/favicon.md b/docs/guide/favicon.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.
+:::
diff --git a/src/DarkMode.vue b/src/DarkMode.vue
@@ -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')
       }
     },
