Add dark theme based on browser preference

apps/participation/templates/participation/participation_detail.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 {% trans "any" as any %}
-    <div class="card bg-light shadow">
+    <div class="card bg-body shadow">
         <div class="card-header text-center">
             <h4>{% trans "Participation of team" %} {{ participation.team.name }} ({{ participation.team.trigram }})</h4>
         </div>

apps/participation/templates/participation/passage_detail.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 {% trans "any" as any %}
-    <div class="card bg-light shadow">
+    <div class="card bg-body shadow">
         <div class="card-header text-center">
             <h4>{{ passage }}</h4>
         </div>
@@ -59,7 +59,7 @@
 
         {% render_table notes %}
 
-        <div class="card bg-light shadow">
+        <div class="card bg-body shadow">
             <div class="card-body">
                 <dl class="row">
                     <dt class="col-sm-8">{% trans "Average points for the defender writing:" %}</dt>

apps/participation/templates/participation/pool_detail.html

@@ -3,7 +3,7 @@
 {% load django_tables2 i18n %}
 
 {% block content %}
-    <div class="card bg-light shadow">
+    <div class="card bg-body shadow">
         <div class="card-header text-center">
             <h4>{{ pool }}</h4>
         </div>
@@ -36,7 +36,7 @@
                 <dd class="col-sm-9">{{ pool.bbb_url|urlize }}</dd>
             </dl>
 
-            <div class="card bg-light shadow">
+            <div class="card bg-body shadow">
                 <div class="card-header text-center">
                     <h5>{% trans "Ranking" %}</h5>
                 </div>

apps/participation/templates/participation/team_detail.html

@@ -4,7 +4,7 @@
 {% load crispy_forms_filters %}
 
 {% block content %}
-    <div class="card bg-light shadow">
+    <div class="card bg-body shadow">
         <div class="card-header text-center">
             <h4>{{ team.name }}</h4>
         </div>

apps/participation/templates/participation/tournament_detail.html

@@ -3,7 +3,7 @@
 {% load getconfig i18n django_tables2 %}
 
 {% block content %}
-    <div class="card bg-light shadow">
+    <div class="card bg-body shadow">
         <div class="card-header text-center">
             <h4>{{ tournament.name }}</h4>
         </div>
@@ -92,7 +92,7 @@
     {% if notes %}
         <hr>
 
-        <div class="card bg-light shadow">
+        <div class="card bg-body shadow">
             <div class="card-header text-center">
                 <h5>{% trans "Ranking" %}</h5>
             </div>

apps/registration/templates/registration/email_validation_complete.html

@@ -5,7 +5,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% load i18n %}
 
 {% block content %}
-<div class="card bg-light">
+<div class="card bg-body">
     <h3 class="card-header text-center">
         {{ title }}
     </h3>

apps/registration/templates/registration/email_validation_email_sent.html

@@ -5,7 +5,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% load i18n %}
 
 {% block content %}
-<div class="card bg-light">
+<div class="card bg-body">
     <h3 class="card-header text-center">
         {% trans "Account activation" %}
     </h3>

apps/registration/templates/registration/user_detail.html

@@ -5,7 +5,7 @@
 {% block content %}
 {% trans "any" as any %}
 
-    <div class="card bg-light shadow">
+    <div class="card bg-body shadow">
         <div class="card-header text-center">
             <h4>{{ user_object.first_name }} {{ user_object.last_name }}</h4>
         </div>

tfjm/static/main.js

@@ -0,0 +1,15 @@
+function initModal(target, url, content_id = 'form-content') {
+    document.querySelector('[data-bs-target="#' + target + 'Modal"]').addEventListener('click', () => {
+        let modalBody = document.querySelector("#" + target + "Modal div.modal-body")
+
+        if (!modalBody.innerHTML.trim()) {
+            if (url instanceof Function) url = url()
+
+            fetch(url, {headers: {'CONTENT-ONLY': '1'}})
+                .then(resp => resp.text())
+                .then(resp => new DOMParser().parseFromString(resp, 'text/html'))
+                .then(res => modalBody.innerHTML = res.getElementById(content_id).outerHTML)
+                .then(() => $('.selectpicker').selectpicker())  // TODO Update that when the library will be JQuery-free
+        }
+    })
+}

tfjm/static/tfjm.svg

@@ -14,8 +14,18 @@
    sodipodi:docname="logo.svg"
    width="30.311995"
    height="9.7779999"
-   style="fill:black"
    inkscape:version="0.92.2 2405546, 2018-03-11">
+  <style>
+    path {
+      fill: black;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: white;
+      }
+    }
+  </style>
   <metadata
      id="metadata31">
     <rdf:RDF>

tfjm/static/theme.js

@@ -0,0 +1,27 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getPreferredTheme = () => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    setTheme(getPreferredTheme())
+  })
+})()

tfjm/templates/base.html

@@ -38,10 +38,10 @@
     {% block extracss %}{% endblock %}
 </head>
 <body class="d-flex w-100 h-100 flex-column">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-navbar shadow-sm">
+    <nav class="navbar navbar-expand-lg fixed-navbar shadow-sm">
         <div class="container-fluid">
         <a class="navbar-brand" href="https://tfjm.org/">
-            <img src="{% static "tfjm.svg" %}" style="width: 42px;" alt="Logo TFJM²" id="navbar-logo">
+            <img src="{% static "tfjm.svg" %}" style="height: 2em;" alt="Logo TFJM²" id="navbar-logo">
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarNavDropdown"
@@ -107,7 +107,7 @@
                         <div class="input-group">
                             <input type="text" class="form-control" placeholder="{% trans "Search…" %}" name="q" id="search-term" value="{{ request.GET.q }}">
                             <div class="input-group-btn">
-                                <button class="btn btn-default" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></button>
+                                <button class="btn btn-default" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search text-body"></i></button>
                             </div>
                         </div>
                     </form>
@@ -174,7 +174,7 @@
     {% endblock %}
 </main>
 
-<footer class="bg-light text-primary mt-auto py-2">
+<footer class="text-primary mt-auto py-2">
     <div class="container-fluid">
         <div class="row">
             <div class="col-sm-1">
@@ -248,26 +248,13 @@
     {% include "base_modal.html" with modal_id="login" %}
 {% endif %}
 
+<script src="{% static 'main.js' %}"></script>
+<script src="{% static 'theme.js' %}"></script>
+
 <script>
     CSRF_TOKEN = "{{ csrf_token }}";
     document.querySelectorAll(".invalid-feedback").forEach(elem => elem.classList.add('d-block'))
 
-    function initModal(target, url, content_id = 'form-content') {
-        document.querySelector('[data-bs-target="#' + target + 'Modal"]').addEventListener('click', () => {
-            let modalBody = document.querySelector("#" + target + "Modal div.modal-body")
-
-            if (!modalBody.innerHTML.trim()) {
-                if (url instanceof Function) url = url()
-
-                fetch(url, {headers: {'CONTENT-ONLY': '1'}})
-                    .then(resp => resp.text())
-                    .then(resp => new DOMParser().parseFromString(resp, 'text/html'))
-                    .then(res => modalBody.innerHTML = res.getElementById(content_id).outerHTML)
-                    .then(() => $('.selectpicker').selectpicker())  // TODO Update that when the library will be JQuery-free
-            }
-        })
-    }
-
     document.addEventListener('DOMContentLoaded', () => {
         initModal("tournamentList", "{% url "participation:tournament_list" %}")
 

tfjm/templates/index.html

@@ -14,7 +14,7 @@
         </p>
     </div>
 
-    <div class="jumbotron bg-white  p-5">
+    <div class="jumbotron p-5">
         <div class="row text-center">
             <h1 class="display-4">
                 Bienvenue sur le site d'inscription au <a href="https://tfjm.org/" target="_blank">𝕋𝔽𝕁𝕄²</a> !
@@ -22,7 +22,7 @@
         </div>
     </div>
 
-    <div class="row bg-white  p-5">
+    <div class="row p-5">
         <div class="col-sm">
             <h3>
                 Tu souhaites participer au 𝕋𝔽𝕁𝕄² ?
@@ -33,12 +33,12 @@
         <div class="col-sm text-end">
             <div class="btn-group-vertical">
                 <a class="btn btn-primary btn-lg" href="{% url "registration:signup" %}" role="button">Inscris-toi maintenant !</a>
-                <a class="btn btn-light btn-lg" href="{% url "login" %}" role="button">J'ai déjà un compte</a>
+                <a class="btn btn-light text-dark btn-lg" href="{% url "login" %}" role="button">J'ai déjà un compte</a>
             </div>
         </div>
     </div>
 
-    <div class="jumbotron p-5 border rounded-5 bg-light">
+    <div class="jumbotron p-5 border rounded-5">
         <h5 class="display-4">Comment ça marche ?</h5>
         <p>
             Pour participer au 𝕋𝔽𝕁𝕄², il suffit de créer un compte sur la rubrique <strong><a href="{% url "registration:signup" %}">Inscription</a></strong>.