From ddc4cf99974b6a2c41975007eea482c1761d32d7 Mon Sep 17 00:00:00 2001
From: Krzysiej <krzysiej@gmail.com>
Date: Fri, 30 Jan 2026 15:51:40 +0100
Subject: [PATCH] Start working on dark theme

---
 templates/template.html.twig | 157 ++++++++++++++++++++++++++++++++---
 1 file changed, 147 insertions(+), 10 deletions(-)
diff --git a/templates/template.html.twig b/templates/template.html.twig
index e7b7508..ed6fede 100644
--- a/templates/template.html.twig
+++ b/templates/template.html.twig
@@ -1,11 +1,89 @@
 <!doctype html>
-<html lang="en" data-bs-theme="light">
+<html lang="en" data-bs-theme="">
 <head>
+    <script>
+        (() => {
+            '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)
+                        })
+                    })
+            })
+        })()
+
+    </script>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Ryobi crawler</title>
-    <link href="/templates/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="/templates/css/bootstrap.min.css" rel="stylesheet"/>
     <script src="/templates/js/script.js" defer></script>
 </head>
 <body>
@@ -13,32 +91,91 @@
     <div class="container-fluid">
         <a class="navbar-brand" href="{{ path('app_home') }}">Crawler</a>
 
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 {% cache "menu_count" ~ listType|default('') %}
                     <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_home') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_home') }}">All products <span class="badge text-bg-secondary">{{ allCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_home') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_home') }}">All products <span
+                                    class="badge text-bg-secondary">{{ allCount() }}</span></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_promos') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_promos') }}">Promos <span class="badge text-bg-secondary">{{ promosCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_promos') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_promos') }}">Promos <span
+                                    class="badge text-bg-secondary">{{ promosCount() }}</span></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_lowest_price') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_lowest_price') }}">Lowest price <span class="badge text-bg-secondary">{{ lowestPriceCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_lowest_price') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_lowest_price') }}">Lowest price <span
+                                    class="badge text-bg-secondary">{{ lowestPriceCount() }}</span></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_new') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_new') }}">New in last 30 days <span class="badge text-bg-secondary">{{ newCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_new') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_new') }}">New in last 30 days <span
+                                    class="badge text-bg-secondary">{{ newCount() }}</span></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link {% if app.request.pathinfo == path('app_discontinued') %}active shadow-sm bg-body rounded{% endif %}" aria-current="page" href="{{ path('app_discontinued') }}">Discontinued <span class="badge text-bg-secondary">{{ discontinuedCount() }}</span></a>
+                        <a class="nav-link {% if app.request.pathinfo == path('app_discontinued') %}active shadow-sm bg-body rounded{% endif %}"
+                           aria-current="page" href="{{ path('app_discontinued') }}">Discontinued <span
+                                    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>
             </ul>
 
             <form class="form-floating d-flex col-lg-6 col-sm-8" role="search" action="{{ path('app_search') }}">
-                <input class="form-control me-2 form-control-sm" type="search" id="floatingInputValue" name="search" placeholder="Search term eg. 36v or RCS18X" value="{{ search|default('') }}">
+                <input class="form-control me-2 form-control-sm" type="search" id="floatingInputValue" name="search"
+                       placeholder="Search term eg. 36v or RCS18X" value="{{ search|default('') }}">
                 <button class="btn btn-outline-success" type="submit">Search</button>
                 <label for="floatingInputValue">Search term eg. 36v or RCS18X</label>
             </form>
