skrabanek
/
3J_WTL_2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add color mode js files

master
skrabanek 5 months ago
parent
ae6497bbc6
commit
46ea8690de
3 changed files with 152 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      11_bootstrap/template.html
  2. 80
      color-modes-bsdoc.js
  3. 33
      color-modes.js

42
11_bootstrap/template.html
View File

@ -16,9 +16,9 @@
</style> </style>
</head> </head>
<body> <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" <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
id=" "
type="button" type="button"
aria-expanded="false" aria-expanded="false"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
@ -46,7 +46,7 @@
aria-pressed="false"> auto</button> aria-pressed="false"> auto</button>
</li> </li>
</ul> </ul>
</div> -->
</div>
<header data-bs-theme="dark"> <header data-bs-theme="dark">
<div class="collapse text-bg-dark" id="navbarHeader"> <div class="collapse text-bg-dark" id="navbarHeader">
@ -100,5 +100,41 @@
</footer> </footer>
<script src="js/bootstrap.bundle.js"></script> <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> </body>
</html> </html>

80
color-modes-bsdoc.js
View File

@ -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)
})
})
})
})()

33
color-modes.js
View File

@ -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);
});
});
});
Write Preview
Loading…
Cancel
Save