Merge d82cf2ac24 into bf9ac68fed

2025-04-10 11:54:15 +03:00 · 2025-04-04 14:03:28 +01:00 · 2025-04-04 14:03:28 +01:00 · 4b87b0d661
commit 4b87b0d661
parent bf9ac68fed d82cf2ac24
3 changed files with 124 additions and 7 deletions
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/js/theme-toggler.js
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/js/theme-toggler.js
@ -0,0 +1,82 @@
+/*!
+ * 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)
+        })
+      })
+  })
+})()
+
+
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/allauth/layouts/entrance.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/allauth/layouts/entrance.html
@ -1,6 +1,5 @@
 {% raw %}{% extends "base.html" %}
 {% load i18n %}
-{% block bodyclass %}bg-light{% endblock bodyclass %}

 {% block css %}{{ block.super }}{% endblock css %}
 {% block title %}
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
@ -8,7 +8,7 @@
  {% endraw %}
 {%- endif %}{% raw %}<!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
-<html lang="{{ LANGUAGE_CODE }}">
+<html lang="{{ LANGUAGE_CODE }}" data-bs-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
@ -29,8 +29,13 @@
    {%- raw %}
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"
-          integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA=="
+          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
+          integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer" />
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
+          integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
  {%- endraw %}
@ -79,8 +84,8 @@
 {% raw %}
 <!-- Bootstrap JS -->
 <script defer
-        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"
-        integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g=="
+        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"
+        integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
 <!-- Your stuff: Third-party javascript libraries go here -->
@ -92,16 +97,19 @@
 {% if cookiecutter.frontend_pipeline == 'None' %}
  {% raw %}
  <script defer src="{% static 'js/project.js' %}"></script>
+  <script defer src="{% static 'js/theme-toggler.js' %}"></script>
 {%- endraw %}
 {% elif cookiecutter.frontend_pipeline == 'Django Compressor' %}
 {% raw %}
 {% compress js %}
  <script defer src="{% static 'js/project.js' %}"></script>
+  <script defer src="{% static 'js/theme-toggler.js' %}"></script>
 {% endcompress %}
 {%- endraw %}
 {% elif cookiecutter.frontend_pipeline == 'Gulp' %}
 {% raw %}
 <script defer src="{% static 'js/project.min.js' %}"></script>
+<script defer src="{% static 'js/theme-toggler.js' %}"></script>
 {%- endraw %}
 {% elif cookiecutter.frontend_pipeline == "Webpack" %}
 {% raw %}
@ -114,7 +122,7 @@
 <body class="{% block bodyclass %}{% endblock bodyclass %}">
  {% block body %}
  <div class="mb-1">
-    <nav class="navbar navbar-expand-md navbar-light bg-light">
+    <nav class="navbar navbar-expand-md bg-body-tertiary shadow-sm">
      <div class="container-fluid">
        <button class="navbar-toggler navbar-toggler-right"
                type="button"
@ -155,6 +163,34 @@
                <a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
              </li>
            {% endif %}
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle"
+                 href="#"
+                 id="themeDropdown"
+                 role="button"
+                 data-bs-toggle="dropdown"
+                 aria-expanded="false">
+                <i class="bi bi-palette"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-end"
+                  aria-labelledby="themeDropdown">
+                <li>
+                  <button class="dropdown-item" type="button" data-bs-theme-value="light">
+                    <i class="bi bi-sun-fill me-2"></i>Light
+                  </button>
+                </li>
+                <li>
+                  <button class="dropdown-item" type="button" data-bs-theme-value="dark">
+                    <i class="bi bi-moon-stars-fill me-2"></i>Dark
+                  </button>
+                </li>
+                <li>
+                  <button class="dropdown-item" type="button" data-bs-theme-value="auto">
+                    <i class="bi bi-circle-half me-2"></i>Auto
+                  </button>
+                </li>
+              </ul>
+            </li>
          </ul>
        </div>
      </div>