Add dark mode (only available with prefers-color-scheme currently)

5 files changed, 30 insertions, 14 deletions

diff --git a/templates/account.html.ep b/templates/account.html.ep
index f41f07f..b0e60cb 100644
--- a/templates/account.html.ep
+++ b/templates/account.html.ep
@@ -119,7 +119,7 @@
 						<button class="btn waves-effect waves-light" type="submit" name="action" value="generate">
 							Generieren
 						</button>
-						<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
+						<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
 							Löschen
 						</button>
 					%= end
@@ -213,7 +213,7 @@
 			</div>
 			<div class="input-field col s12 m12 l4 center-align">
 				%= csrf_field
-				<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
+				<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
 					Account löschen
 				</button>
 			</div>
diff --git a/templates/add_journey.html.ep b/templates/add_journey.html.ep
index 10e74eb..02f30d5 100644
--- a/templates/add_journey.html.ep
+++ b/templates/add_journey.html.ep
@@ -2,7 +2,7 @@
 % if (not get_oldest_journey_ts()) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card yellow lighten-4">
+			<div class="card info-color">
 				<div class="card-content">
 					<span class="card-title">Hinweis</span>
 					<p>travelynx ist darauf ausgelegt, über die Hauptseite in
@@ -16,7 +16,7 @@
 % if ($error) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<span class="card-title">Ungültige Eingabe</span>
 					<p><%= $error %></p>
diff --git a/templates/landingpage.html.ep b/templates/landingpage.html.ep
index 725640a..dfe3361 100644
--- a/templates/landingpage.html.ep
+++ b/templates/landingpage.html.ep
@@ -2,7 +2,7 @@
 	% if (stash('error')) {
 		<div class="row">
 			<div class="col s12">
-				<div class="card red darken-4">
+				<div class="card caution-color">
 					<div class="card-content white-text">
 						<span class="card-title">Backend-Fehler</span>
 						<p><%= stash('error') %></p>
@@ -18,7 +18,7 @@
 				%= include '_checked_in', journey => $status;
 			% }
 			% elsif ($status->{cancelled}) {
-				<div class="card yellow lighten-4">
+				<div class="card info-color">
 					<div class="card-content">
 						<span class="card-title">Zugausfall dokumentieren</span>
 						<p>Prinzipiell wärest du nun eingecheckt in
@@ -47,20 +47,20 @@
 				</div>
 			% }
 			% else {
-				<div class="card grey darken-4">
-					<div class="card-content white-text">
+				<div class="card">
+					<div class="card-content">
 						<span class="card-title">Hallo, <%= current_user()->{name} %>!</span>
 						<p>Du bist gerade nicht eingecheckt.</p>
 						<div class="geolocation">
-							<button class="btn waves-effect waves-light btn-flat white">Stationen in der Umgebung abfragen</button>
+							<button class="btn waves-effect waves-light btn-flat">Stationen in der Umgebung abfragen</button>
 						</div>
 						%= form_for 'list_departures' => begin
 							<div class="input-field">
-								%= text_field 'station', id => 'station', class => 'autocomplete white-text', required => undef
+								%= text_field 'station', id => 'station', class => 'autocomplete contrast-color-text', required => undef
 								<label for="station">Manuelle Eingabe (Name oder DS100)</label>
 							</div>
 							<div class="center-align">
-								<button class="btn waves-effect waves-light btn-flat white" type="submit" name="action" value="departures">
+								<button class="btn waves-effect waves-light btn-flat" type="submit" name="action" value="departures">
 									<i class="material-icons left">send</i>
 									Abfahrten
 								</button>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a63242c..40793e1 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -18,7 +18,23 @@
 	<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"
+	<script>
+			function addStyleSheet(path) {
+				var st = document.createElement('link');
+				st.href = path;
+				st.rel = 'stylesheet';
+				document.head.appendChild(st);
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: dark').matches) {
+				addStyleSheet("/static/<%= $av %>/css/dark.min.css");
+		} else {
+				addStyleSheet("/static/<%= $av %>/css/light.min.css");
+		}
+	</script>
+	<noscript>
+	%= stylesheet "/static/${av}/css/light.min.css"
+	</noscript>
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/local.css"
 	%= javascript "/static/${av}/js/jquery-3.4.1.min.js"
@@ -66,7 +82,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>
diff --git a/templates/privacy.html.ep b/templates/privacy.html.ep
index 9fa2048..4469154 100644
--- a/templates/privacy.html.ep
+++ b/templates/privacy.html.ep
@@ -14,7 +14,7 @@
 		<div class="input-field col s12">
 			<label>
 				%= check_box public_status => 1
-				<span class="black-text">Aktueller Status</span>
+				<span>Aktueller Status</span>
 			</label>
 		</div>
 	</div>