aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js')
-rw-r--r--vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js62
1 files changed, 62 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js
new file mode 100644
index 000000000..41b6b893e
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js
@@ -0,0 +1,62 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+ 'use strict'
+
+ const storedTheme = localStorage.getItem('theme')
+
+ const getPreferredTheme = () => {
+ if (storedTheme) {
+ return storedTheme
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+
+ const setTheme = function (theme) {
+ if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.setAttribute('data-bs-theme', 'dark')
+ } else {
+ document.documentElement.setAttribute('data-bs-theme', theme)
+ }
+ }
+
+ setTheme(getPreferredTheme())
+
+ const showActiveTheme = theme => {
+ 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')
+ })
+
+ btnToActive.classList.add('active')
+ activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+ }
+
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ 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')
+ localStorage.setItem('theme', theme)
+ setTheme(theme)
+ showActiveTheme(theme)
+ })
+ })
+ })
+})()