From c64e4fe3d6d33124ac6c690d09c79150bd0fe2c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <jan.h.boehmer@gmx.de>
Date: Sat, 30 Nov 2019 22:28:14 +0100
Subject: [PATCH] Added an toggle to activate a simple dark mode.

The dark mode is only available on browsers that support mix-blend-mode. There are some quirks with hover images...
---
 assets/css/app.css          | 15 +++++++++++++--
 assets/js/app.js            | 22 ++++++++++++++++++++++
 package.json                |  1 +
 templates/_navbar.html.twig | 15 +++++++++++----
 yarn.lock                   |  5 +++++
 5 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 8021b679..d9b9616c 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -165,7 +165,7 @@ showing the sidebar (on devices with md or higher)
 .toast-container {
     position: fixed;
     top: auto;
-    z-index: 1;
+    z-index: 3000; /* Over darkmode layer for correct colors! */
     right: 25px;
 }
 
@@ -347,7 +347,6 @@ btn-xs
     display: block;
     margin-left: auto;
     margin-right: auto;
-
 }
 
 .hoverpic:hover {
@@ -356,6 +355,10 @@ btn-xs
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+.darkmode--activated .hoverpic:hover {
+    background: black;
+}
+
 
 .thumbnail-sm {
     max-height: 100px;
@@ -790,3 +793,11 @@ table.dataTable {
     font-size: 17.5px;
     border-left: 5px solid #eee;
 }
+
+.darkmode-layer {
+    z-index: 2020;
+}
+
+.darkmode--activated img {
+    mix-blend-mode: difference;
+}
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
index 535f0afc..9287e85d 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -88,6 +88,8 @@ require('../css/tagsinput.css');
 //Tristate checkbox support
 require('./jquery.tristate.js');
 
+require('darkmode-js');
+
 require('../ts_src/ajax_ui');
 import {ajaxUI} from "../ts_src/ajax_ui";
 
@@ -97,6 +99,26 @@ window.ajaxUI = ajaxUI;
 require('../ts_src/event_listeners');
 
 
+
+//Register darkmode (we must do it here, TS does not support ES6 constructor...
+try {
+    //The browser needs to support mix blend mode
+    if(typeof window.getComputedStyle(document.body).mixBlendMode !== 'undefined') {
+        const darkmode = new Darkmode();
+
+        $(document).on("ajaxUI:start ajaxUI:reload", function () {
+            //Show darkmode toggle to user
+            $('#toggleDarkmodeContainer, #toggleDarkmodeSeparator').removeAttr('hidden');
+            $('#toggleDarkmode').prop('checked', darkmode.isActivated());
+            $('#toggleDarkmode').change(function () {
+                darkmode.toggle();
+            });
+        });
+    }
+} catch (e) {
+    //Ignore all errors (for compatibiltiy with old browsers)
+}
+
 //Start AjaxUI AFTER all event has been registered
 $(document).ready(ajaxUI.start());
 
diff --git a/package.json b/package.json
index ef8453b1..683a80ee 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
         "bootswatch": "^4.3.1",
         "copy-webpack-plugin": "^5.0.4",
         "corejs-typeahead": "^1.2.1",
+        "darkmode-js": "^1.5.3",
         "datatables.net-bs4": "^1.10.19",
         "datatables.net-buttons-bs4": "^1.5.4",
         "datatables.net-colreorder-bs4": "^1.5.1",
diff --git a/templates/_navbar.html.twig b/templates/_navbar.html.twig
index ef5401c0..40958da6 100644
--- a/templates/_navbar.html.twig
+++ b/templates/_navbar.html.twig
@@ -58,13 +58,13 @@
                         {% if true %}
                             <div class="custom-control custom-checkbox">
                                 <input type="checkbox" class="custom-control-input" id="search_manufacturer" name="search_manufacturer" value="true">
-                            <label for="search_manufacturer" class="custom-control-label">{% trans %}manufacturer.label{% endtrans %}</label>
+                                <label for="search_manufacturer" class="custom-control-label">{% trans %}manufacturer.label{% endtrans %}</label>
                             </div>
                         {% endif %}
                         {% if true %}
                             <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" id="search_footprint" name="search_footprint" value="true">
-                            <label for="search_footprint" class="custom-control-label">{% trans %}footprint.label{% endtrans %}</label>
+                                <input type="checkbox" class="custom-control-input" id="search_footprint" name="search_footprint" value="true">
+                                <label for="search_footprint" class="custom-control-label">{% trans %}footprint.label{% endtrans %}</label>
                             </div>
                         {% endif %}
                         <div class="custom-control custom-checkbox">
@@ -104,8 +104,15 @@
                     {% else %}
                         <a class="dropdown-item" href="{{ path('login', {'_target_path': app.request.pathinfo | loginPath}) }}" id="login-link"><i class="fa fa-sign-in-alt fa-fw" aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
                     {% endif %}
+                    <li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator" hidden></li>
+                    <div class="px-4 px-3" id="toggleDarkmodeContainer" hidden>
+                        <div class="custom-control custom-switch">
+                            <input type="checkbox" class="custom-control-input" id="toggleDarkmode">
+                            <label class="custom-control-label" for="toggleDarkmode">{% trans %}ui.toggle_darkmode{% endtrans %}</label>
+                        </div>
+                    </div>
                     <li role="separator" class="dropdown-divider"></li>
-                    <a class="dropdown-item disabled" href="#">{% trans %}user.language_select{% endtrans %}</a>
+                    <h6 class="dropdown-header">{% trans %}user.language_select{% endtrans %}</h6>
                     <a class="dropdown-item" data-no-ajax href="{{ path(app.request.attributes.get('_route'),
                         app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}">
                         {% trans %}language.english{% endtrans %}</a>
diff --git a/yarn.lock b/yarn.lock
index 879fc426..ee01c5c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2275,6 +2275,11 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
+darkmode-js@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/darkmode-js/-/darkmode-js-1.5.3.tgz#89a5b72681d58a9b11b079fdeba7abc7c7b75ee9"
+  integrity sha512-Az6X5E6RJ72TQls1v3wIWuknb6J7XjRReMMOpMM8SXXbeO4bxGKJeJDtf7GdcIgmiTQ/cPqqObpr7LRzsAJDow==
+
 datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.19:
   version "1.10.20"
   resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.20.tgz#beff1c8d3510826c0678eaa055270607c0e53882"