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

fix colors in 11_bootstrap

master
skrabanek 5 months ago
parent
46ea8690de
commit
6ebbbb5be7
6 changed files with 173 additions and 117 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. 36
      11_bootstrap/about.html
  2. 34
      11_bootstrap/contact.html
  3. 34
      11_bootstrap/galery.html
  4. 36
      11_bootstrap/index.html
  5. 112
      11_bootstrap/js/color-modes.js
  6. 38
      11_bootstrap/template.html

36
11_bootstrap/about.html
View File

@ -8,7 +8,39 @@
<meta name="theme-color" content="#712cf9"> <meta name="theme-color" content="#712cf9">
</head> </head>
<body>
<body>
<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"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Změna vzhledu"
>
Dark/Light</button>
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="bd-theme-text">
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
aria-pressed="false"> Light</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
aria-pressed="false"> dark</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
aria-pressed="false"> auto</button>
</li>
</ul>
</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">
<div class="container"> <div class="container">
@ -90,5 +122,7 @@
</footer> </footer>
<script src="js/bootstrap.bundle.js"></script> <script src="js/bootstrap.bundle.js"></script>
<script src="js/color-modes.js"></script>
</body> </body>
</html> </html>

34
11_bootstrap/contact.html
View File

@ -9,6 +9,38 @@
</head> </head>
<body> <body>
<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"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Změna vzhledu"
>
Dark/Light</button>
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="bd-theme-text">
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
aria-pressed="false"> Light</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
aria-pressed="false"> dark</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
aria-pressed="false"> auto</button>
</li>
</ul>
</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">
<div class="container"> <div class="container">
@ -117,5 +149,7 @@
</footer> </footer>
<script src="js/bootstrap.bundle.js"></script> <script src="js/bootstrap.bundle.js"></script>
<script src="js/color-modes.js"></script>
</body> </body>
</html> </html>

34
11_bootstrap/galery.html
View File

@ -9,6 +9,38 @@
</head> </head>
<body> <body>
<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"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Změna vzhledu"
>
Dark/Light</button>
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="bd-theme-text">
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
aria-pressed="false"> Light</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
aria-pressed="false"> dark</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
aria-pressed="false"> auto</button>
</li>
</ul>
</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">
<div class="container"> <div class="container">
@ -93,5 +125,7 @@
</footer> </footer>
<script src="js/bootstrap.bundle.js"></script> <script src="js/bootstrap.bundle.js"></script>
<script src="js/color-modes.js"></script>
</body> </body>
</html> </html>

36
11_bootstrap/index.html
View File

@ -9,6 +9,38 @@
</head> </head>
<body> <body>
<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"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Změna vzhledu"
>
Dark/Light</button>
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="bd-theme-text">
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
aria-pressed="false"> Light</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
aria-pressed="false"> dark</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
aria-pressed="false"> auto</button>
</li>
</ul>
</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">
<div class="container"> <div class="container">
@ -62,6 +94,8 @@
</footer> </footer>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/color-modes.js"></script>
</body> </body>
</html> </html>

112
11_bootstrap/js/color-modes.js
View File

@ -1,80 +1,34 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 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)
})
})
})
})()
// 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);
});
});
});

38
11_bootstrap/template.html
View File

@ -18,7 +18,7 @@
<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=" "
id="bd-theme"
type="button" type="button"
aria-expanded="false" aria-expanded="false"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
@ -100,41 +100,7 @@
</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>
<script src="js/color-modes.js"></script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save