From 46ea8690deafb8a1442f0ca467f953cc9133fb1c Mon Sep 17 00:00:00 2001 From: skrabanek Date: Wed, 4 Dec 2024 13:49:38 +0100 Subject: [PATCH] add color mode js files --- 11_bootstrap/template.html | 42 ++++++++++++++++++-- color-modes-bsdoc.js | 80 ++++++++++++++++++++++++++++++++++++++ color-modes.js | 33 ++++++++++++++++ 3 files changed, 152 insertions(+), 3 deletions(-) create mode 100644 color-modes-bsdoc.js create mode 100644 color-modes.js diff --git a/11_bootstrap/template.html b/11_bootstrap/template.html index 5082aca..a5cb5ed 100644 --- a/11_bootstrap/template.html +++ b/11_bootstrap/template.html @@ -16,9 +16,9 @@ - +
@@ -100,5 +100,41 @@ + + \ No newline at end of file diff --git a/color-modes-bsdoc.js b/color-modes-bsdoc.js new file mode 100644 index 0000000..8a0dabf --- /dev/null +++ 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) + }) + }) + }) +})() diff --git a/color-modes.js b/color-modes.js new file mode 100644 index 0000000..ed07647 --- /dev/null +++ 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); + }); + }); +});