add switch btn (#254)

Author: Arhell

_includes/header.html

@@ -114,6 +114,7 @@
         </div>
 
         <div class="header__right">
+
             <div class="header__github">
                 <a href="https://phalcon.io/github" aria-label="github">
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -131,6 +132,8 @@
                     </svg>
                 </a>
             </div>
+
+            <div class="switcher"><button></button></div>
         </div>
     </div>
 </header>

_includes/meta.html

@@ -50,87 +50,14 @@
     <meta name="msapplication-config" content="https://assets.phalcon.io/phalcon/favicons/browserconfig.xml" />
     <meta name="msapplication-TileColor" content="#273646">
     <meta name="theme-color" content="#273646">
-
-    <script>
-        (() => {
-            'use strict'
-
-            const getStoredTheme = () => localStorage.getItem('theme')
-            const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
-            const getPreferredTheme = () => {
-                const storedTheme = getStoredTheme()
-                if (storedTheme) {
-                    return storedTheme
-                }
-
-                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-            }
-
-            const setTheme = theme => {
-                if (theme === 'auto') {
-                    document.documentElement.setAttribute('data-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
-                } else {
-                    document.documentElement.setAttribute('data-theme', theme)
-                }
-            }
-
-            setTheme(getPreferredTheme())
-
-            const showActiveTheme = (theme, focus = false) => {
-                const themeSwitcher = document.querySelector('#bd-theme')
-
-                if (!themeSwitcher) {
-                    return
-                }
-
-                const themeSwitcherText = document.querySelector('#bd-theme-text')
-                const activeThemeIcon = document.querySelector('.theme-icon-active use')
-                const btnToActive = document.querySelector(`[data-theme-value="${theme}"]`)
-                const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
-
-                document.querySelectorAll('[data-theme-value]').forEach(element => {
-                    element.classList.remove('active')
-                    element.setAttribute('aria-pressed', 'false')
-                })
-
-                btnToActive.classList.add('active')
-                btnToActive.setAttribute('aria-pressed', 'true')
-                activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-                const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-                themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
-
-                if (focus) {
-                    themeSwitcher.focus()
-                }
-            }
-
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-                const storedTheme = getStoredTheme()
-                if (storedTheme !== 'light' && storedTheme !== 'dark') {
-                    setTheme(getPreferredTheme())
-                }
-            })
-
-            window.addEventListener('DOMContentLoaded', () => {
-                showActiveTheme(getPreferredTheme())
-
-                document.querySelectorAll('[data-theme-value]')
-                    .forEach(toggle => {
-                        toggle.addEventListener('click', () => {
-                            const theme = toggle.getAttribute('data-theme-value')
-                            setStoredTheme(theme)
-                            setTheme(theme)
-                            showActiveTheme(theme, true)
-                        })
-                    })
-            })
-        })()
-    </script>
+    <script>document.documentElement.classList.add(localStorage.getItem('mode') === 'auto' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : localStorage.getItem('mode'))</script>
+    <script type="module" src="./../assets/js/theme-switcher.js"></script>
 
     <link rel="stylesheet"
-          href="https://assets.phalcon.io/phalcon/test/dark.css">
+          href="./../assets/css/dark.css">
+
     <link rel="stylesheet"
           href="https://assets.phalcon.io/phalcon/test/core.css">
     <link rel="stylesheet"
           href="https://assets.phalcon.io/phalcon/test/custom.css">
+