Fix modal and dropdown colors in dark mode

and get rid of the hacky `styleModal` function

public/css/mango.css

@@ -101,3 +101,23 @@ td>.uk-dropdown {
 .grayscale {
     filter: grayscale(100%);
 }
+
+.uk-light .uk-navbar-dropdown,
+.uk-light .uk-modal-header,
+.uk-light .uk-modal-body,
+.uk-light .uk-modal-footer {
+    background: #222;
+}
+
+.uk-light .uk-dropdown {
+    background: #333;
+}
+
+.uk-light .uk-navbar-dropdown,
+.uk-light .uk-dropdown {
+    color: #ccc;
+}
+
+.uk-light .uk-nav-header {
+    color: #555;
+}

public/js/download.js

@@ -51,7 +51,6 @@ const download = () => {
 				UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
 					window.location.href = base_url + 'admin/downloads';
 				});
-				styleModal();
 			})
 			.fail((jqXHR, status) => {
 				alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
@@ -61,7 +60,6 @@ const download = () => {
 				$('#download-btn').removeAttr('hidden');
 			});
 	});
-	styleModal();
 };
 const toggleSpinner = () => {
 	var attr = $('#spinner').attr('hidden');

public/js/reader.js

@@ -3,18 +3,18 @@ $(function() {
 		var controller = new ScrollMagic.Controller();
 
 		// replace history on scroll
-		$('img').each(function(idx){
+		$('img').each(function(idx) {
 			var scene = new ScrollMagic.Scene({
-				triggerElement: $(this).get(),
-				triggerHook: 'onEnter',
-				reverse: true
-			})
+					triggerElement: $(this).get(),
+					triggerHook: 'onEnter',
+					reverse: true
+				})
 				.addTo(controller)
-				.on('enter', function(event){
+				.on('enter', function(event) {
 					current = $(event.target.triggerElement()).attr('id');
 					replaceHistory(current);
 				})
-				.on('leave', function(event){
+				.on('leave', function(event) {
 					var prev = $(event.target.triggerElement()).prev();
 					current = $(prev).attr('id');
 					replaceHistory(current);
@@ -23,12 +23,12 @@ $(function() {
 
 		// poor man's infinite scroll
 		var scene = new ScrollMagic.Scene({
-			triggerElement: $('.next-url').get(),
-			triggerHook: 'onEnter',
-			offset: -500
-		})
+				triggerElement: $('.next-url').get(),
+				triggerHook: 'onEnter',
+				offset: -500
+			})
 			.addTo(controller)
-			.on('enter', function(){
+			.on('enter', function() {
 				var nextURL = $('.next-url').attr('href');
 				$('.next-url').remove();
 				if (!nextURL) {
@@ -39,7 +39,7 @@ $(function() {
 					$('#next-btn').removeAttr('hidden');
 					return;
 				}
-				$('#hidden').load(encodeURI(nextURL) + ' .uk-container', function(res, status, xhr){
+				$('#hidden').load(encodeURI(nextURL) + ' .uk-container', function(res, status, xhr) {
 					if (status === 'error') console.log(xhr.statusText);
 					if (status === 'success') {
 						console.log(nextURL + ' loaded');
@@ -54,17 +54,18 @@ $(function() {
 
 	bind();
 });
-$('#page-select').change(function(){
+$('#page-select').change(function() {
 	jumpTo(parseInt($('#page-select').val()));
 });
+
 function showControl(idx) {
 	const pageCount = $('#page-select > option').length;
 	const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
 	$('#progress-label').text(progressText);
 	$('#page-select').val(idx);
 	UIkit.modal($('#modal-sections')).show();
-	styleModal();
 }
+
 function jumpTo(page) {
 	var ary = window.location.pathname.split('/');
 	ary[ary.length - 1] = page;
@@ -72,10 +73,12 @@ function jumpTo(page) {
 	ary.unshift(window.location.origin);
 	window.location.replace(ary.join('/'));
 }
+
 function replaceHistory(url) {
 	history.replaceState(null, "", url);
 	console.log('reading ' + url);
 }
+
 function redirect(url) {
 	window.location.replace(url);
 }

public/js/theme.js

@@ -53,13 +53,6 @@ const setTheme = (theme) => {
 	}
 };
 
-const styleModal = () => {
-	const color = loadTheme() === 'dark' ? '#222' : '';
-	$('.uk-modal-header').css('background', color);
-	$('.uk-modal-body').css('background', color);
-	$('.uk-modal-footer').css('background', color);
-};
-
 // do it before document is ready to prevent the initial flash of white on
 // 	most pages
 setTheme();

public/js/title.js

@@ -58,7 +58,6 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 	$('#modal-download-btn').attr('href', `/opds/download/${titleID}/${entryID}`);
 
 	UIkit.modal($('#modal')).show();
-	styleModal();
 }
 
 const updateProgress = (tid, eid, page) => {
@@ -144,7 +143,6 @@ const edit = (eid) => {
 	setupUpload(eid);
 
 	UIkit.modal($('#edit-modal')).show();
-	styleModal();
 };
 
 const setupUpload = (eid) => {