feat: add dark mode support

closes cookiecutter#5629
abe-101 · Jan 28, 2025 · 777f206 · 777f206
1 parent bf2a3c5
commit 777f206
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 1 deletion.
diff --git 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)
+        })
+      })
+  })
+})()
+
+
diff --git 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" />
@@ -92,16 +92,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 %}
@@ -155,6 +158,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>Palette
+              </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>