Add dark theme based on browser preference

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())
+  })
+})()