krzysiej/ryobi-crawler
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

feature/dark-theme #75

Merged
krzysiej merged 3 commits from feature/dark-theme into master 2026-03-01 15:11:23 +01:00
Conversation 0 Commits 3 Files Changed 2 +13 -55
2 changed files with 13 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8a520b11d6 - Show all commits

9
templates/footer.html.twig Normal file
View File

@@ -0,0 +1,9 @@
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-body-secondary">© 2025 Company, Inc</span>
<a class="align-items-center text-decoration-none" data-bs-theme-value="light">☀️ Light</a>
<a class="align-items-center text-decoration-none" data-bs-theme-value="dark">🌕 Dark</a>
</div>
</footer>
</div>

59
templates/template.html.twig
View File

@@ -34,21 +34,13 @@
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()
@@ -124,53 +116,9 @@
class="badge text-bg-secondary">{{ discontinuedCount() }}</span></a>
</li>
{% endcache %}
<li class="nav-item dropdown">
<button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
data-bs-display="static" aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
<use href="#circle-half"></use>
</svg>
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span></button>
<ul class="dropdown-menu dropdown-menu-end" 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">
<svg class="bi me-2 opacity-50" aria-hidden="true">
<use href="#sun-fill"></use>
</svg>
Light
<svg class="bi ms-auto d-none" aria-hidden="true">
<use href="#check2"></use>
</svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50" aria-hidden="true">
<use href="#moon-stars-fill"></use>
</svg>
Dark
<svg class="bi ms-auto d-none" aria-hidden="true">
<use href="#check2"></use>
</svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50" aria-hidden="true">
<use href="#circle-half"></use>
</svg>
Auto
<svg class="bi ms-auto d-none" aria-hidden="true">
<use href="#check2"></use>
</svg>
</button>
</li>
</ul>
</li>
{# <li class="nav-item dropdown"> #}
{# #}
{# </li> #}
</ul>
<form class="form-floating d-flex col-lg-6 col-sm-8" role="search" action="{{ path('app_search') }}">
@@ -184,6 +132,7 @@
</nav>
{% block content %}{% endblock %}
{{ include('footer.html.twig') }}
<script src="/templates/js/bootstrap.bundle.min.js"></script>
</body>
</html>