mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-24 18:58:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added an toggle to activate a simple dark mode.

Browse source 
The dark mode is only available on browsers that support mix-blend-mode. There are some quirks with hover images...
This commit is contained in:
Jan Böhmer 2019-11-30 22:28:14 +01:00
parent 6882f91ef2
commit c64e4fe3d6
5 changed files with 52 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/js/app.js
View file

@ -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());