Add themes

- Light, Dark, auto
- Add option to change theme
- Add script which sets the theme automatically
- Add 3 new icons for themes

backend/static/js/auto_darktheme.js

@@ -0,0 +1,67 @@
+/*!
+ * 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) => {
+
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+
+    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')
+  }
+
+
+  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)
+        })
+      })
+  })
+
+})()

frontend/static/icons/LICENSE.txt

@@ -1,6 +1,15 @@
 Font license info
 
 
+## Entypo
+
+   Copyright (C) 2012 by Daniel Bruce
+
+   Author:    Daniel Bruce
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://www.entypo.com
+
+
 ## Font Awesome
 
    Copyright (C) 2016 by Dave Gandy

frontend/static/icons/config.json

@@ -53,6 +53,24 @@
       "css": "menu",
       "code": 61762,
       "src": "fontawesome"
+    },
+    {
+      "uid": "f8e120c48c070f8afd2d072651b4fb9f",
+      "css": "light-up",
+      "code": 59392,
+      "src": "entypo"
+    },
+    {
+      "uid": "0d03db7afd4857accf1821efdc8ea72b",
+      "css": "moon",
+      "code": 59393,
+      "src": "entypo"
+    },
+    {
+      "uid": "f6fa10cb3ffec7becb60834f50bb0182",
+      "css": "adjust",
+      "code": 59395,
+      "src": "entypo"
     }
   ]
 }

frontend/static/icons/css/songs-codes.css

@@ -1,5 +1,8 @@
 
+.icon-light-up:before { content: '\e800'; } /* '' */
+.icon-moon:before { content: '\e801'; } /* '' */
 .icon-trash-empty:before { content: '\e802'; } /* '' */
+.icon-adjust:before { content: '\e803'; } /* '' */
 .icon-plus:before { content: '\e804'; } /* '' */
 .icon-minus:before { content: '\e805'; } /* '' */
 .icon-up-open:before { content: '\e806'; } /* '' */

frontend/static/icons/css/songs-ie7-codes.css

@@ -1,5 +1,8 @@
 
+.icon-light-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-moon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-trash-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-up-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

frontend/static/icons/css/songs-ie7.css

@@ -10,7 +10,10 @@
   /* font-size: 120%; */
 }
 
+.icon-light-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-moon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-trash-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-up-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

frontend/static/icons/css/songs.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'songs';
-  src: url('../font/songs.eot?84746066');
-  src: url('../font/songs.eot?84746066#iefix') format('embedded-opentype'),
-       url('../font/songs.woff2?84746066') format('woff2'),
-       url('../font/songs.woff?84746066') format('woff'),
-       url('../font/songs.ttf?84746066') format('truetype'),
-       url('../font/songs.svg?84746066#songs') format('svg');
+  src: url('../font/songs.eot?15005186');
+  src: url('../font/songs.eot?15005186#iefix') format('embedded-opentype'),
+       url('../font/songs.woff2?15005186') format('woff2'),
+       url('../font/songs.woff?15005186') format('woff'),
+       url('../font/songs.ttf?15005186') format('truetype'),
+       url('../font/songs.svg?15005186#songs') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'songs';
-    src: url('../font/songs.svg?84746066#songs') format('svg');
+    src: url('../font/songs.svg?15005186#songs') format('svg');
   }
 }
 */
@@ -54,7 +54,10 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
+.icon-light-up:before { content: '\e800'; } /* '' */
+.icon-moon:before { content: '\e801'; } /* '' */
 .icon-trash-empty:before { content: '\e802'; } /* '' */
+.icon-adjust:before { content: '\e803'; } /* '' */
 .icon-plus:before { content: '\e804'; } /* '' */
 .icon-minus:before { content: '\e805'; } /* '' */
 .icon-up-open:before { content: '\e806'; } /* '' */

frontend/static/styles.sass

@@ -2,8 +2,16 @@ $bgDefault      : #f9f9f9
 $bgHighlight    : #c4c2bd
 $colDefault     : #7793f3
 $colHighlight   : #e81c1c
+$absoluteBlack  : #000000
+$originalDark   : #212529
 $border-color: $bgHighlight
 
+[data-bs-theme="dark"]
+  --bs-body-bg: #{$absoluteBlack}
+
+[data-bs-theme="dark"] .navbar
+  background: #{$originalDark}
+
 .navbar
   --bs-navbar-color: #{$colDefault}
   --bs-navbar-hover-color: #{$colHighlight}

frontend/templates/base/index.html

@@ -23,6 +23,9 @@
     <script   src="{% static "js/jquery-3.7.1.min.js" %}"
               type="text/javascript"
               defer></script>
+    <script   src="{% static "js/auto_darktheme.js" %}"
+              type="text/javascript"
+              defer></script>
     <link rel="stylesheet" type="text/css" href="{% static 'icons/css/songs.css' %}">
     <link rel="stylesheet" type="text/css" href="{% sass_src 'styles.sass' %}">
     {% block extra_head %} {% endblock %}
@@ -74,6 +77,11 @@
                                 {% trans "Language" %}
                             </label>
                         </div>
+                        <div class="mb-1 d-flex ms-2 me-2 justify-content-center">
+                            <button class="btn btn-outline-secondary me-2" type="button" data-bs-theme-value="light"><i class="icon-light-up"></i></button>
+                            <button class="btn btn-outline-secondary me-2" type="button" data-bs-theme-value="dark"><i class="icon-moon"></i></button>
+                            <button class="btn btn-outline-secondary" type="button" data-bs-theme-value="auto"><i class="icon-adjust"></i></button>
+                        </div>
                         {% for locale in languages %}
                             <form id="{{ locale.code }}" action="{% url 'set_language' %}" method="post">
                                 {% csrf_token %}