From 6ebbbb5be7e86f517eb3f1f9df7b197efac435be Mon Sep 17 00:00:00 2001 From: skrabanek Date: Wed, 4 Dec 2024 14:32:47 +0100 Subject: [PATCH] fix colors in 11_bootstrap --- 11_bootstrap/about.html | 36 ++++++++++- 11_bootstrap/contact.html | 34 ++++++++++ 11_bootstrap/galery.html | 34 ++++++++++ 11_bootstrap/index.html | 36 ++++++++++- 11_bootstrap/js/color-modes.js | 112 ++++++++++----------------------- 11_bootstrap/template.html | 38 +---------- 6 files changed, 173 insertions(+), 117 deletions(-) diff --git a/11_bootstrap/about.html b/11_bootstrap/about.html index 8d4cc21..5a09be9 100644 --- a/11_bootstrap/about.html +++ b/11_bootstrap/about.html @@ -8,7 +8,39 @@ - + +
+ + +
+
@@ -90,5 +122,7 @@ + + \ No newline at end of file diff --git a/11_bootstrap/contact.html b/11_bootstrap/contact.html index 061bf1d..06c5e4c 100644 --- a/11_bootstrap/contact.html +++ b/11_bootstrap/contact.html @@ -9,6 +9,38 @@ +
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
@@ -117,5 +149,7 @@ + + \ No newline at end of file diff --git a/11_bootstrap/galery.html b/11_bootstrap/galery.html index 142c7c7..60032d3 100644 --- a/11_bootstrap/galery.html +++ b/11_bootstrap/galery.html @@ -9,6 +9,38 @@ +
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
@@ -93,5 +125,7 @@ + + \ No newline at end of file diff --git a/11_bootstrap/index.html b/11_bootstrap/index.html index 419064c..96af263 100644 --- a/11_bootstrap/index.html +++ b/11_bootstrap/index.html @@ -9,6 +9,38 @@ +
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
@@ -62,6 +94,8 @@ - + + + \ No newline at end of file diff --git a/11_bootstrap/js/color-modes.js b/11_bootstrap/js/color-modes.js index 31f22f9..6ea6412 100644 --- a/11_bootstrap/js/color-modes.js +++ b/11_bootstrap/js/color-modes.js @@ -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); + }); + }); + }); \ No newline at end of file diff --git a/11_bootstrap/template.html b/11_bootstrap/template.html index a5cb5ed..e47effd 100644 --- a/11_bootstrap/template.html +++ b/11_bootstrap/template.html @@ -18,7 +18,7 @@