add color mode js files

5 months ago · 46ea8690de
3 changed files with 152 additions and 3 deletions
--- a/11_bootstrap/template.html
+++ b/11_bootstrap/template.html
@ -16,9 +16,9 @@
    </style>
 </head>
 <body>
-    <!-- <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+     <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
        <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
-                id="bd-theme"
+                id="    "
                type="button"
                aria-expanded="false"
                data-bs-toggle="dropdown"
@ -46,7 +46,7 @@
                        aria-pressed="false"> auto</button>
            </li>
        </ul>
-    </div> -->
+    </div>  

    <header data-bs-theme="dark">
        <div class="collapse text-bg-dark" id="navbarHeader">
@ -100,5 +100,41 @@
    </footer>

    <script src="js/bootstrap.bundle.js"></script>
+    <script>
+        // Funkce pro přepnutí tématu
+        document.addEventListener('DOMContentLoaded', function () {
+            const themeToggle = document.getElementById('bd-theme');
+            const themeButtons = document.querySelectorAll('[data-bs-theme-value]');
+            const root = document.documentElement;
+    
+            // Nastavení aktuálního tématu
+            function setTheme(theme) {
+                root.setAttribute('data-bs-theme', theme);
+                localStorage.setItem('theme', theme); // Uloží výběr do localStorage
+                updateActiveButton(theme);
+            }
+    
+            // Aktualizace aktivního tlačítka
+            function updateActiveButton(theme) {
+                themeButtons.forEach(button => {
+                    const isActive = button.getAttribute('data-bs-theme-value') === theme;
+                    button.setAttribute('aria-pressed', isActive);
+                });
+            }
+    
+            // Načtení uloženého tématu (pokud existuje)
+            const storedTheme = localStorage.getItem('theme') || 'auto';
+            setTheme(storedTheme);
+    
+            // Přidání události pro kliknutí na tlačítka
+            themeButtons.forEach(button => {
+                button.addEventListener('click', function () {
+                    const theme = this.getAttribute('data-bs-theme-value');
+                    setTheme(theme);
+                });
+            });
+        });
+    </script>
+    
 </body>
 </html>
--- a/color-modes-bsdoc.js
+++ b/color-modes-bsdoc.js
@ -0,0 +1,80 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  '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-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-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-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-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-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()
--- a/color-modes.js
+++ b/color-modes.js
@ -0,0 +1,33 @@
+// Funkce pro přepnutí tématu
+document.addEventListener('DOMContentLoaded', function () {
+    const themeToggle = document.getElementById('bd-theme');
+    const themeButtons = document.querySelectorAll('[data-bs-theme-value]');
+    const root = document.documentElement;
+
+    // Nastavení aktuálního tématu
+    function setTheme(theme) {
+        root.setAttribute('data-bs-theme', theme);
+        localStorage.setItem('theme', theme); // Uloží výběr do localStorage
+        updateActiveButton(theme);
+    }
+
+    // Aktualizace aktivního tlačítka
+    function updateActiveButton(theme) {
+        themeButtons.forEach(button => {
+            const isActive = button.getAttribute('data-bs-theme-value') === theme;
+            button.setAttribute('aria-pressed', isActive);
+        });
+    }
+
+    // Načtení uloženého tématu (pokud existuje)
+    const storedTheme = localStorage.getItem('theme') || 'auto';
+    setTheme(storedTheme);
+
+    // Přidání události pro kliknutí na tlačítka
+    themeButtons.forEach(button => {
+        button.addEventListener('click', function () {
+            const theme = this.getAttribute('data-bs-theme-value');
+            setTheme(theme);
+        });
+    });
+});