From 52e7f04e46206c693351fca7c52859e11b920585 Mon Sep 17 00:00:00 2001
From: b1rdhous3 <mail@jpfischer.de>
Date: Sun, 5 Apr 2020 20:08:56 +0200
Subject: [PATCH] Introduce Dark Mode (#752)

* Introduce Dark Mode

* Auto Detect Dark Mode from OS

Some OS (iOS or Mac OS e.g.) can give the browser an information if system wide dark mode is set or not. If the OS shares this information, webui is set automatically to the mode. Manual overwrite is still possible by pressing button on the webui. This is valid as long the session in the client is open.

* Burger Button Dark Mode

Dark Mode for Burger Button (Mobile View)
---
 assets/webconfig/css/darkMode.css      | 244 +++++++++++++++++++++++++
 assets/webconfig/css/hyperion.css      |   3 +
 assets/webconfig/index.html            |   7 +-
 assets/webconfig/js/content_index.js   |  34 ++++
 assets/webconfig/js/content_logging.js |   2 +-
 assets/webconfig/js/ui_utils.js        |  12 ++
 6 files changed, 300 insertions(+), 2 deletions(-)
 create mode 100644 assets/webconfig/css/darkMode.css

diff --git a/assets/webconfig/css/darkMode.css b/assets/webconfig/css/darkMode.css
new file mode 100644
index 00000000..c6965427
--- /dev/null
+++ b/assets/webconfig/css/darkMode.css
@@ -0,0 +1,244 @@
+/*General Elements*/
+body {
+    background-color: #080808;
+    color: #D3D3D3;
+}
+
+#page-wrapper {
+    background-color:#080808;
+}
+
+.navbar-default {
+    background-color:#080808;
+}
+
+.panel-body {
+    background-color: #121212;
+}
+
+hr {
+    border-top: 1px solid #D3D3D3;
+}
+
+a {
+    color: #005d5c;
+}
+
+a:hover {
+    color: #018786;
+}
+
+a:focus {
+    color: #018786;
+}
+
+a:active {
+    color: #018786
+}
+
+p {
+    color: #D3D3D3;
+}
+
+h4 {
+    color: #D3D3D3;
+}
+
+/*Buttons*/
+.btn-primary {
+    background-color: #005d5c;
+    border-color: #D3D3D3;
+}
+
+.btn-primary:hover{
+    background-color: #018786;
+    border-color: #D3D3D3;
+}
+
+.btn-primary:focus{
+    background-color: #018786;
+    border-color: #D3D3D3;
+}
+
+.btn-primary[disabled]:hover {
+    background-color: #018786;
+    border-color: #D3D3D3;
+}
+
+.btn-warning {
+    background-color: #ec971f;
+    border-color: #D3D3D3;
+}
+
+.btn-warning:hover {
+    background-color: #f0ad4e;
+    border-color: #D3D3D3;
+}
+
+.btn-warning:focus {
+    background-color: #f0ad4e;
+    border-color: #D3D3D3;
+}
+
+.btn-danger {
+    background-color: #ca2f4bd4;
+    border-color: #D3D3D3;
+}
+
+.btn-danger:hover {
+    background-color: #cf6679;
+    border-color: #D3D3D3;
+}
+
+.btn-danger:focus {
+    background-color: #cf6679;
+    border-color: #D3D3D3;
+}
+
+/*Tables*/
+tr:hover td {
+    background-color: #018786;
+    }
+
+/*Navigation Sidebar*/
+.sidebar ul li {
+    background-color: #080808;
+}
+
+.sidebar ul li a.active{
+    background-color: #121212;
+}
+
+.sidebar ul li a:hover{
+    background-color: #121212;
+}
+
+.sidebar ul li a:focus{
+    background-color: #121212;
+}
+
+/*Navigation Topbar*/
+.navbar-top-links li a:hover {
+    background-color: #121212;
+}
+
+.navbar-top-links li a:focus {
+    background-color: #121212;
+}
+
+.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
+    background-color: #121212;
+}
+
+.dropdown-menu {
+    background-color: #080808;
+    border-color: #D3D3D3;
+}
+
+.dropdown-menu>li>a {
+    color: #018786;
+}
+
+/*Panels*/
+.panel-default {
+	background-color:#121212 !important;
+	border-color:#D3D3D3 !important;
+}
+
+.panel-primary {
+    background-color:#121212 !important;
+	border-color:#D3D3D3 !important;
+}
+
+.panel-primary>.panel-heading {
+    background-color:#121212 !important;
+	border-color:#D3D3D3 !important;
+}
+
+.panel-primary>.panel-heading+.panel-collapse>.panel-body {
+    border-top-color: #D3D3D3;
+}
+
+.panel-default>.panel-heading{
+	background-color:#121212 !important;
+    border-color:#D3D3D3 !important;
+    color: #D3D3D3;
+}
+
+.panel-footer {
+    background-color:#121212 !important;
+}
+
+/*JSON Editor Inputs*/
+[id^=editor_container] .well {
+    background-color: #121212 !important;
+}
+
+.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
+    border-color: #D3D3D3;
+}
+
+.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
+    border-color: #D3D3D3;
+}
+
+.introd h4 {
+    border-left: 5px solid #03dac6;
+}
+
+.bs-callout-primary h4 {
+    color: #03dac6;
+}
+
+.bs-callout-primary {
+    border-left-color: #03dac6;
+}
+
+/* Tabs Buttons */
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+    color: #D3D3D3;
+    background-color: #018786;
+}
+
+.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
+    color: #D3D3D3;
+    background-color: #005d5c;
+}
+
+/*Modals*/
+.modal-content {
+    background-color: #121212;
+}
+
+button.close {
+    color: #D3D3D3;
+}
+
+button.close:hover {
+    color: #ffffff;
+}
+
+/*Bootstrap Notify*/
+[data-notify="container"] {
+    background-color: #121212;
+}
+
+.support-container:hover .fa {
+    background-color: #005d5c;
+}
+
+.navbar-top-links .dropdown-menu li a:hover{
+    background-color: #121212;
+    color: #03dac6;
+}
+
+/*Burger Button*/
+.navbar-default .navbar-toggle {
+    border-color: #005d5c;
+    background-color: #080808;
+}
+
+.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+    border-color: #005d5c;
+    background-color: #080808;
+}
\ No newline at end of file
diff --git a/assets/webconfig/css/hyperion.css b/assets/webconfig/css/hyperion.css
index cedfaa45..d8112bf0 100644
--- a/assets/webconfig/css/hyperion.css
+++ b/assets/webconfig/css/hyperion.css
@@ -49,6 +49,9 @@ body{
   transform: rotate(-45deg);
   transform-origin: 10% 90%;
 }
+.navbar-toggle.closed {
+  background-color: #d0d0d0;
+}
 .navbar-toggle.closed .top-bar {
   transform: rotate(0);
 }
diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html
index fd6b662e..cf0f0b3e 100644
--- a/assets/webconfig/index.html
+++ b/assets/webconfig/index.html
@@ -88,7 +88,7 @@
 		<!-- Navigation -->
 		<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle closed" aria-controls="navbar" style="background-color:#d0d0d0;">
+				<button type="button" class="navbar-toggle closed" aria-controls="navbar">
 					<span class="sr-only">Toggle navigation</span>
 					<span class="icon-bar top-bar"></span>
 					<span class="icon-bar middle-bar"></span>
@@ -109,6 +109,11 @@
 						<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
 					</a>
 				</li>
+				<li class="dropdown" id="btn_darkmode">
+				<a>
+					<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
+				</a>
+			</li>
 				<!-- instance switcher -->
 				<li class="dropdown" id="btn_hypinstanceswitch" style="display:none">
 					<a class="dropdown-toggle" data-toggle="dropdown" href="#">
diff --git a/assets/webconfig/js/content_index.js b/assets/webconfig/js/content_index.js
index 89689b43..cbb5d200 100644
--- a/assets/webconfig/js/content_index.js
+++ b/assets/webconfig/js/content_index.js
@@ -2,6 +2,24 @@ var instNameInit = false
 
 $(document).ready(function () {
 
+	var darkModeOverwrite = getStorage("darkModeOverwrite", true);
+
+	if(darkModeOverwrite == "false" || darkModeOverwrite == null)
+	{
+		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			handleDarkMode();
+		}
+	
+		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+			setStorage("darkMode", "off", false);
+		}
+	}
+	
+	if(getStorage("darkMode", false) == "on")
+	{
+		handleDarkMode();
+	}
+
 	loadContentTo("#container_connection_lost", "connection_lost");
 	loadContentTo("#container_restart", "restart");
 	initWebSocket();
@@ -274,3 +292,19 @@ $(function () {
 $(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
 	$('body').css('padding-right', '0');
 });
+
+//Dark Mode
+$("#btn_darkmode").off().on("click",function(e){
+
+	if(getStorage("darkMode", false) != "on")
+	{
+		handleDarkMode();
+		setStorage("darkModeOverwrite", true, true);
+	}
+	else {
+		setStorage("darkMode", "off", false);
+		setStorage("darkModeOverwrite", true, true);
+		location.reload();
+	}
+	
+});
\ No newline at end of file
diff --git a/assets/webconfig/js/content_logging.js b/assets/webconfig/js/content_logging.js
index 7976f403..4ffbfeff 100644
--- a/assets/webconfig/js/content_logging.js
+++ b/assets/webconfig/js/content_logging.js
@@ -154,7 +154,7 @@ $(document).ready(function() {
 			messages = (event.response.result.messages);
 			if(messages.length != 0 && !createdCont)
 			{
-				$('#log_content').html('<pre><div id="logmessages" style="overflow:scroll;max-height:400px"></div></pre><button class="btn btn-success" id="btn_autoscroll"><i class="fa fa-long-arrow-down fa-fw"></i>'+$.i18n('conf_logging_btn_autoscroll')+'</button>');
+				$('#log_content').html('<pre><div id="logmessages" style="overflow:scroll;max-height:400px"></div></pre><button class="btn btn-primary" id="btn_autoscroll"><i class="fa fa-long-arrow-down fa-fw"></i>'+$.i18n('conf_logging_btn_autoscroll')+'</button>');
 				createdCont = true;
 				
 				$('#btn_autoscroll').off().on('click',function() {
diff --git a/assets/webconfig/js/ui_utils.js b/assets/webconfig/js/ui_utils.js
index 6d2e74c7..25f10a43 100644
--- a/assets/webconfig/js/ui_utils.js
+++ b/assets/webconfig/js/ui_utils.js
@@ -940,3 +940,15 @@ function getReleases(callback)
 	});
 }
 
+function handleDarkMode()
+{
+		$("<link/>", {
+			rel: "stylesheet",
+			type: "text/css",
+			href: "../css/darkMode.css"
+		}).appendTo("head");
+
+		setStorage("darkMode", "on", false);
+		$('#btn_darkmode_icon').removeClass('fa fa-moon-o');
+		$('#btn_darkmode_icon').addClass('fa fa-sun-o');
+}
\ No newline at end of file