From e69d50749dbb80e0fbe136c05ea43950695e2d99 Mon Sep 17 00:00:00 2001 From: Evgeny Blokhin Date: Tue, 30 Apr 2024 00:58:07 +0200 Subject: [PATCH] Support dark theme --- webassets/js/darkmode.js | 270 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 webassets/js/darkmode.js diff --git a/webassets/js/darkmode.js b/webassets/js/darkmode.js new file mode 100644 index 0000000..0f3b19f --- /dev/null +++ b/webassets/js/darkmode.js @@ -0,0 +1,270 @@ +/* https://github.com/sandoche/Darkmode.js */ +!(function (e, t) { + 'object' == typeof exports && 'object' == typeof module + ? (module.exports = t()) + : 'function' == typeof define && define.amd + ? define('darkmode-js', [], t) + : 'object' == typeof exports + ? (exports['darkmode-js'] = t()) + : (e['darkmode-js'] = t()); +})('undefined' != typeof self ? self : this, function () { + return (function (e) { + var t = {}; + function n(o) { + if (t[o]) return t[o].exports; + var r = (t[o] = { i: o, l: !1, exports: {} }); + return e[o].call(r.exports, r, r.exports, n), (r.l = !0), r.exports; + } + return ( + (n.m = e), + (n.c = t), + (n.d = function (e, t, o) { + n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: o }); + }), + (n.r = function (e) { + 'undefined' != typeof Symbol && + Symbol.toStringTag && + Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }), + Object.defineProperty(e, '__esModule', { value: !0 }); + }), + (n.t = function (e, t) { + if ((1 & t && (e = n(e)), 8 & t)) return e; + if (4 & t && 'object' == typeof e && e && e.__esModule) return e; + var o = Object.create(null); + if ( + (n.r(o), + Object.defineProperty(o, 'default', { enumerable: !0, value: e }), + 2 & t && 'string' != typeof e) + ) + for (var r in e) + n.d( + o, + r, + function (t) { + return e[t]; + }.bind(null, r) + ); + return o; + }), + (n.n = function (e) { + var t = + e && e.__esModule + ? function () { + return e.default; + } + : function () { + return e; + }; + return n.d(t, 'a', t), t; + }), + (n.o = function (e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + }), + (n.p = ''), + n((n.s = 0)) + ); + })([ + function (e, t, n) { + 'use strict'; + Object.defineProperty(t, '__esModule', { value: !0 }), (t.default = void 0); + var o = (function (e) { + if (e && e.__esModule) return e; + var t = {}; + if (null != e) + for (var n in e) + if (Object.prototype.hasOwnProperty.call(e, n)) { + var o = + Object.defineProperty && Object.getOwnPropertyDescriptor + ? Object.getOwnPropertyDescriptor(e, n) + : {}; + o.get || o.set ? Object.defineProperty(t, n, o) : (t[n] = e[n]); + } + return (t.default = e), t; + })(n(1)); + var r = o.default; + (t.default = r), + o.IS_BROWSER && + (function (e) { + e.Darkmode = o.default; + })(window), + (e.exports = t.default); + }, + function (e, t, n) { + 'use strict'; + function o(e, t) { + for (var n = 0; n < t.length; n++) { + var o = t[n]; + (o.enumerable = o.enumerable || !1), + (o.configurable = !0), + 'value' in o && (o.writable = !0), + Object.defineProperty(e, o.key, o); + } + } + Object.defineProperty(t, '__esModule', { value: !0 }), (t.default = t.IS_BROWSER = void 0); + var r = 'undefined' != typeof window; + t.IS_BROWSER = r; + var a = (function () { + function e(t) { + if ( + ((function (e, t) { + if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function'); + })(this, e), + r) + ) { + t = Object.assign( + {}, + { + bottom: '32px', + right: '32px', + left: 'unset', + time: '0.3s', + mixColor: '#fff', + backgroundColor: '#fff', + buttonColorDark: '#100f2c', + buttonColorLight: '#fff', + label: '', + saveInCookies: !0, + autoMatchOsTheme: !0 + }, + t + ); + var n = '\n .darkmode-layer {\n position: fixed;\n pointer-events: none;\n background: ' + .concat(t.mixColor, ';\n transition: all ') + .concat( + t.time, + ' ease;\n mix-blend-mode: difference;\n }\n\n .darkmode-layer--button {\n width: 2.9rem;\n height: 2.9rem;\n border-radius: 50%;\n right: ' + ) + .concat(t.right, ';\n bottom: ') + .concat(t.bottom, ';\n left: ') + .concat( + t.left, + ';\n }\n\n .darkmode-layer--simple {\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform: scale(1) !important;\n }\n\n .darkmode-layer--expanded {\n transform: scale(100);\n border-radius: 0;\n }\n\n .darkmode-layer--no-transition {\n transition: none;\n }\n\n .darkmode-toggle {\n background: ' + ) + .concat( + t.buttonColorDark, + ';\n width: 3rem;\n height: 3rem;\n position: fixed;\n border-radius: 50%;\n border:none;\n right: ' + ) + .concat(t.right, ';\n bottom: ') + .concat(t.bottom, ';\n left: ') + .concat( + t.left, + ';\n cursor: pointer;\n transition: all 0.5s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .darkmode-toggle--white {\n background: ' + ) + .concat( + t.buttonColorLight, + ';\n }\n\n .darkmode-toggle--inactive {\n display: none;\n }\n\n .darkmode-background {\n background: ' + ) + .concat( + t.backgroundColor, + ';\n position: fixed;\n pointer-events: none;\n z-index: -10;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n\n img, .darkmode-ignore {\n isolation: isolate;\n display: inline-block;\n }\n\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .darkmode-toggle {display: none !important}\n }\n\n @supports (-ms-ime-align:auto), (-ms-accelerator:true) {\n .darkmode-toggle {display: none !important}\n }\n ' + ), + o = document.createElement('div'), + a = document.createElement('button'), + i = document.createElement('div'); + (a.innerHTML = t.label), + a.classList.add('darkmode-toggle--inactive'), + o.classList.add('darkmode-layer'), + i.classList.add('darkmode-background'); + var d = 'true' === window.localStorage.getItem('darkmode'), + s = t.autoMatchOsTheme && window.matchMedia('(prefers-color-scheme: dark)').matches, + l = null === window.localStorage.getItem('darkmode'); + ((!0 === d && t.saveInCookies) || (l && s)) && + (o.classList.add( + 'darkmode-layer--expanded', + 'darkmode-layer--simple', + 'darkmode-layer--no-transition' + ), + a.classList.add('darkmode-toggle--white'), + document.body.classList.add('darkmode--activated')), + document.body.insertBefore(a, document.body.firstChild), + document.body.insertBefore(o, document.body.firstChild), + document.body.insertBefore(i, document.body.firstChild), + this.addStyle(n), + (this.button = a), + (this.layer = o), + (this.saveInCookies = t.saveInCookies), + (this.time = t.time); + } + } + var t, n, a; + return ( + (t = e), + (n = [ + { + key: 'addStyle', + value: function (e) { + var t = document.createElement('link'); + t.setAttribute('rel', 'stylesheet'), + t.setAttribute('type', 'text/css'), + t.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(e)), + document.head.appendChild(t); + } + }, + { + key: 'showWidget', + value: function () { + var e = this; + if (r) { + var t = this.button, + n = this.layer, + o = 1e3 * parseFloat(this.time); + t.classList.add('darkmode-toggle'), + t.classList.remove('darkmode-toggle--inactive'), + t.setAttribute('aria-label', 'Activate dark mode'), + t.setAttribute('aria-checked', 'false'), + t.setAttribute('role', 'checkbox'), + n.classList.add('darkmode-layer--button'), + t.addEventListener('click', function () { + var r = e.isActivated(); + r + ? (n.classList.remove('darkmode-layer--simple'), + t.setAttribute('disabled', !0), + setTimeout(function () { + n.classList.remove('darkmode-layer--no-transition'), + n.classList.remove('darkmode-layer--expanded'), + t.removeAttribute('disabled'); + }, 1)) + : (n.classList.add('darkmode-layer--expanded'), + t.setAttribute('disabled', !0), + setTimeout(function () { + n.classList.add('darkmode-layer--no-transition'), + n.classList.add('darkmode-layer--simple'), + t.removeAttribute('disabled'); + }, o)), + t.classList.toggle('darkmode-toggle--white'), + document.body.classList.toggle('darkmode--activated'), + window.localStorage.setItem('darkmode', !r); + }); + } + } + }, + { + key: 'toggle', + value: function () { + if (r) { + var e = this.layer, + t = this.isActivated(), + n = this.button; + e.classList.toggle('darkmode-layer--simple'), + document.body.classList.toggle('darkmode--activated'), + window.localStorage.setItem('darkmode', !t), + n.setAttribute('aria-label', 'De-activate dark mode'), + n.setAttribute('aria-checked', 'true'); + } + } + }, + { + key: 'isActivated', + value: function () { + return r ? document.body.classList.contains('darkmode--activated') : null; + } + } + ]) && o(t.prototype, n), + a && o(t, a), + e + ); + })(); + t.default = a; + } + ]); +});