update theme (#245)

Author: Arhell

_includes/header.html

@@ -63,11 +63,6 @@
             </ul>
 
             <nav class="header-nav--mobile _navToggle">
-                <div class="light-dark-auto-switcher">
-                    <a id="light-mode-button" href="#" class="light-dark-auto-button">Light</a>
-                    <a id="dark-mode-button" href="#" class="light-dark-auto-button">Dark</a>
-                    <a id="auto-mode-button" href="#" class="light-dark-auto-button">Auto</a>
-                </div>
                 <ul>
                     <li>
                         <a href="https://phalcon.io/docs">Documentation</a>
@@ -119,13 +114,6 @@
         </div>
 
         <div class="header__right">
-
-            <div class="light-dark-auto-switcher">
-                <a id="light-mode-button" href="#" class="light-dark-auto-button">Light</a>
-                <a id="dark-mode-button" href="#" class="light-dark-auto-button">Dark</a>
-                <a id="auto-mode-button" href="#" class="light-dark-auto-button">Auto</a>
-            </div>
-
             <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">

_includes/js.html

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

_includes/meta.html

@@ -4,6 +4,84 @@
 
     <meta charset="utf-8">
     <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">
     <meta name="author" content="{{ site.app.author }}">
     <meta name="generator" content="{{ site.app.generator }}">
     <meta name="application-name" content="{{ site.app.name }}">
@@ -52,11 +130,6 @@
     <meta name="theme-color" content="#273646">
 
     <link rel="stylesheet"
-          type="text/css"
-          href="https://assets.phalcon.io/phalcon/css/core.css">
-    <link rel="stylesheet"
-          type="text/css"
-          href="https://assets.phalcon.io/phalcon/css/core-custom.css">
+          href="https://assets.phalcon.io/phalcon/test/core.css">
     <link rel="stylesheet"
-          type="text/css"
-          href="./../assets/css/dark.css">
+          href="https://assets.phalcon.io/phalcon/test/custom.css">