add theme switch btn (#311)

Author: Arhell

_includes/footer-js.html

@@ -1 +1 @@
-<script src="https://assets.phalcon.io/phalcon/test/core.js?v=111"></script>
+<script src="https://assets.phalcon.io/phalcon/test/core.js"></script>

_includes/head.html

@@ -9,86 +9,6 @@
     <meta name="MobileOptimized" content="320"/>
     <meta name="HandheldFriendly" content="true"/>
     <meta name="viewport min-width=320px" content="min-width=320, initial-scale=1.0"/>
-
-    <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>
-    <link rel="stylesheet"
-          href="https://assets.phalcon.io/phalcon/test/dark.css?v=111">
-
     <meta name="generator" content="Jekyll">
     <meta name="application-name" content="{{ site.app.name }}">
     <meta name="description" content="{{ site.app.description }}">
@@ -137,10 +57,15 @@
         gtag('config', '{{ site.app.analytics }}');
     </script>
     <!-- End Google Analytics -->
+    <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.js"></script>
+    <link rel="stylesheet"
+          href="/assets/css/dark.css">
+
     <link rel="stylesheet"
-          href="https://assets.phalcon.io/phalcon/test/core.css?v=111">
+          href="https://assets.phalcon.io/phalcon/test/core.css">
     <link rel="stylesheet"
-          href="https://assets.phalcon.io/phalcon/test/custom.css?v=111">
+          href="https://assets.phalcon.io/phalcon/test/custom.css">
 
     <title>
         {{ site.data.languages[page.language][page.title] }} - {{ site.app.title }}

_includes/header.html

@@ -251,6 +251,8 @@
                     </svg>
                 </a>
             </div>
+
+            <div class="switcher"><button></button></div>
         </div>
     </div>
 </header>