Merge branch 'marudor-darkMode'

1 files changed, 37 insertions, 7 deletions

diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a63242c..76c130b 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -9,7 +9,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<meta name="apple-mobile-web-app-title" content="Travelynx">
-	% my $av = 'v20'; # asset version
+	% my $av = 'v21'; # asset version
 	<link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-16x16.png" sizes="16x16">
 	<link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-32x32.png" sizes="32x32">
 	<link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-96x96.png" sizes="96x96">
@@ -18,7 +18,37 @@
 	<link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png">
 	<link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
 	<link rel="manifest" href="/static/<%= $av %>/manifest.json">
-	%= stylesheet "/static/${av}/css/materialize.min.css"
+	% if (session('theme') and session('theme') eq 'dark') {
+		%= stylesheet "/static/${av}/css/dark.min.css", id => 'theme'
+	% }
+	% else {
+		%= stylesheet "/static/${av}/css/light.min.css", id => 'theme'
+	% }
+	<script>
+		function addStyleSheet(name, id) {
+			var path = '/static/<%=$av%>/css/' + name + '.min.css';
+			var old = document.getElementById(id);
+			if (old && (old.href != path)) {
+				old.href = path;
+				document.cookie = 'theme=' + name;
+			}
+		}
+		var otherTheme = {
+			'dark': 'light',
+			'light': 'dark',
+		};
+		var currentTheme = localStorage.getItem('theme');
+		if (!otherTheme.hasOwnProperty(currentTheme)) {
+			currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+		addStyleSheet(currentTheme, 'theme');
+
+		function toggleTheme() {
+			currentTheme = otherTheme[currentTheme] || 'light';
+			localStorage.setItem('theme', currentTheme);
+			addStyleSheet(currentTheme, 'theme');
+		}
+	</script>
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/local.css"
 	%= javascript "/static/${av}/js/jquery-3.4.1.min.js"
@@ -51,6 +81,9 @@
 						</div>
 					</div>
 				</li>
+				<li class="waves-effect waves-light">
+					<a onClick="javascript:toggleTheme()"><i class="material-icons">invert_colors</i></a>
+				</li>
 				% if (is_user_authenticated()) {
 					<li class="<%= navbar_class('/history') %>"><a href='/history' title="History"><i class="material-icons">history</i></a></li>
 					<li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons">account_circle</i></a></li>
@@ -66,7 +99,7 @@
 % if (app->mode eq 'development') {
 <div class="container">
 	<div class="row">
-		<div class="col s12 red darken-4 white-text">
+		<div class="col s12 caution-color white-text">
 			Development Mode – Datenbank: <%= app->config->{db}->{database} %>
 			@ <%= app->config->{db}->{host} %>
 		</div>
@@ -87,10 +120,7 @@
 <script>
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/service-worker.js')
-        .then((reg) => {
-          console.log('Service worker registered.', reg);
-        });
+    navigator.serviceWorker.register('/service-worker.js');
   });
 }
 </script>