Further color improvements

18 files changed, 44 insertions, 30 deletions

diff --git a/templates/_cancelled.html.ep b/templates/_cancelled.html.ep
index d35c849..585d2ad 100644
--- a/templates/_cancelled.html.ep
+++ b/templates/_cancelled.html.ep
@@ -1,4 +1,4 @@
-<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
diff --git a/templates/_checked_in.html.ep b/templates/_checked_in.html.ep
index 3030325..d51097e 100644
--- a/templates/_checked_in.html.ep
+++ b/templates/_checked_in.html.ep
@@ -1,4 +1,4 @@
-<div class="card autorefresh blue-grey lighten-5">
+<div class="card autorefresh">
 	<div class="card-content">
 		<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
 		<span class="card-title">Eingecheckt in <%= $journey->{train_type} %> <%= $journey->{train_no} %></span>
@@ -31,8 +31,8 @@
 					Ankunft in mehr als zwei Stunden
 				% }
 			</div>
-			<div class="progress purple lighten-4" style="height: 1ex;">
-				<div class="determinate purple darken-3" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div>
+			<div class="progress " style="height: 1ex;">
+				<div class="determinate" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div>
 			</div>
 		</p>
 		% if ($journey->{arr_name}) {
diff --git a/templates/_checked_out.html.ep b/templates/_checked_out.html.ep
index 1b6113a..9c7ff48 100644
--- a/templates/_checked_out.html.ep
+++ b/templates/_checked_out.html.ep
@@ -1,5 +1,5 @@
-<div class="card grey darken-4">
-	<div class="card-content white-text">
+<div class="card">
+	<div class="card-content">
 		<span class="card-title">Ausgecheckt</span>
 		<p>Aus <%= $journey->{train_type} %> <%= $journey->{train_no} %>
 			bis <a href="/s/<%= $journey->{arr_ds100} %>"><%= $journey->{arr_name} %></a></p>
diff --git a/templates/_deletion_note.html.ep b/templates/_deletion_note.html.ep
index 89cf271..5be2f99 100644
--- a/templates/_deletion_note.html.ep
+++ b/templates/_deletion_note.html.ep
@@ -1,6 +1,6 @@
 <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">Account wird gelöscht</span>
 				<p>
diff --git a/templates/_history_stats.html.ep b/templates/_history_stats.html.ep
index 715fa1a..8197ed1 100644
--- a/templates/_history_stats.html.ep
+++ b/templates/_history_stats.html.ep
@@ -1,7 +1,7 @@
 % if (@{$stats->{inconsistencies}}) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<i class="material-icons small right">warning</i>
 					<span class="card-title">Inkonsistente Reisedaten</span>
diff --git a/templates/_invalid_input.html.ep b/templates/_invalid_input.html.ep
index ad01c15..4cebf29 100644
--- a/templates/_invalid_input.html.ep
+++ b/templates/_invalid_input.html.ep
@@ -1,6 +1,6 @@
 <div class="row">
 	<div class="col s12">
-		<div class="card red darken-4">
+		<div class="card caution-color">
 			<div class="card-content white-text">
 				% if ($invalid eq 'csrf') {
 					<span class="card-title">Ungültiger CSRF-Token</span>
diff --git a/templates/_public_status_card.html.ep b/templates/_public_status_card.html.ep
index d19cb9f..0863723 100644
--- a/templates/_public_status_card.html.ep
+++ b/templates/_public_status_card.html.ep
@@ -1,5 +1,5 @@
 % if ($journey->{checked_in}) {
-	<div class="card white autorefresh">
+	<div class="card autorefresh">
 		<div class="card-content">
 			<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
 			<span class="card-title"><%= $name %> ist unterwegs</span>
@@ -80,8 +80,8 @@
 	</div>
 % }
 % else {
-	<div class="card grey darken-4 autorefresh">
-		<div class="card-content white-text">
+	<div class="card autorefresh">
+		<div class="card-content">
 			<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
 			<span class="card-title"><%= $name %> ist gerade nicht eingecheckt</span>
 			<p>
diff --git a/templates/account.html.ep b/templates/account.html.ep
index b0e60cb..2c58a7b 100644
--- a/templates/account.html.ep
+++ b/templates/account.html.ep
@@ -5,7 +5,7 @@
 % if (my $success = flash('success')) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card green darken-4">
+			<div class="card success-color">
 				<div class="card-content white-text">
 					% if ($success eq 'mail') {
 						<span class="card-title">Mail-Adresse geändert</span>
diff --git a/templates/change_mail.html.ep b/templates/change_mail.html.ep
index 65d3d8d..4f9108a 100644
--- a/templates/change_mail.html.ep
+++ b/templates/change_mail.html.ep
@@ -5,7 +5,7 @@
 % if (stash('success')) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card green darken-4">
+			<div class="card success-color">
 				<div class="card-content white-text">
 					<span class="card-title">Mail-Änderung wird durchgeführt</span>
 					<p>
diff --git a/templates/departures.html.ep b/templates/departures.html.ep
index fb917f3..3c9638e 100644
--- a/templates/departures.html.ep
+++ b/templates/departures.html.ep
@@ -2,8 +2,8 @@
 	<div class="col s12">
 		% my $status = $self->get_user_status;
 		% if ($status->{checked_in}) {
-			<div class="card grey darken-4">
-				<div class="card-content white-text">
+			<div class="card">
+				<div class="card-content">
 					<span class="card-title">Aktuell eingecheckt</span>
 					<p>In <%= $status->{train_type} %> <%= $status->{train_no} %>
 						ab <%= $status->{dep_name} %></p>
diff --git a/templates/edit_journey.html.ep b/templates/edit_journey.html.ep
index c37adba..06338f6 100644
--- a/templates/edit_journey.html.ep
+++ b/templates/edit_journey.html.ep
@@ -2,7 +2,7 @@
 % if ($error and $error eq 'notfound') {
 	<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">Fehler</span>
 					<p>Zugfahrt nicht gefunden.</p>
@@ -15,7 +15,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/exception.html.ep b/templates/exception.html.ep
index e4daf9a..290efc5 100644
--- a/templates/exception.html.ep
+++ b/templates/exception.html.ep
@@ -1,6 +1,6 @@
 <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">500 Internal Server Error</span>
 				<p>Das hätte nicht passieren sollen.</p>
diff --git a/templates/journey.html.ep b/templates/journey.html.ep
index 76e7f79..cd2b04e 100644
--- a/templates/journey.html.ep
+++ b/templates/journey.html.ep
@@ -1,7 +1,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">Fehler</span>
 					<p>Zugfahrt nicht gefunden.</p>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 54f9e1f..a512314 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -32,8 +32,22 @@
 					document.head.appendChild(st);
 				}
 		}
+		var otherTheme = {
+    'dark.min': 'light.min',
+    'light.min': 'dark.min',
+};
+var currentTheme = localStorage.getItem('theme');
+if (!otherTheme.hasOwnProperty(currentTheme)) {
+    currentTheme = window.matchMedia('(prefers-color-scheme: dark').matches ? 'dark.min' : 'light.min';
+}
+addStyleSheet(currentTheme, 'theme');
+
+function toggleTheme() {
+    currentTheme = otherTheme[currentTheme] || 'light.min';
+    localStorage.setItem('theme', currentTheme);
+    addStyleSheet(currentTheme, 'theme');
+}
 	</script>
-	%= javascript "/static/${av}/js/theme.min.js"
 	<noscript>
 	%= stylesheet "/static/${av}/css/light.min.css"
 	</noscript>
diff --git a/templates/login.html.ep b/templates/login.html.ep
index 474f165..a5aa8e3 100644
--- a/templates/login.html.ep
+++ b/templates/login.html.ep
@@ -1,8 +1,8 @@
 % if (my $user = current_user()) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card grey darken-4">
-				<div class="card-content white-text">
+			<div class="card">
+				<div class="card-content">
 					<span class="card-title">Hallo, <%= $user->{name} %>!</span>
 					<p>
 						Du bist bereits angemeldet. Falls du mehrere Accounts hast
@@ -27,8 +27,8 @@
 	<div class="row">
 		<div class="col s12">
 			% if ($from eq 'register') {
-				<div class="card grey darken-4">
-					<div class="card-content white-text">
+				<div class="card">
+					<div class="card-content">
 						<span class="card-title">Bitte warten</span>
 						<p>Ein Verifizierungslink wurde an die von dir angegebene
 						Mail-Adresse geschickt. Sobald du diesen angeklickt hast,
@@ -37,7 +37,7 @@
 				</div>
 			% }
 			% elsif ($from eq 'verification') {
-				<div class="card green darken-4">
+				<div class="card success-color">
 					<div class="card-content white-text">
 						<span class="card-title">Account freigeschaltet</span>
 						<p>Du kannst dich nun anmelden.</p>
diff --git a/templates/not_found.html.ep b/templates/not_found.html.ep
index de0d533..c2bc09f 100644
--- a/templates/not_found.html.ep
+++ b/templates/not_found.html.ep
@@ -1,6 +1,6 @@
 <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">404 Not Found</span>
 				<p>Diese Seite gibt es hier nicht.</p>
diff --git a/templates/recover_password.html.ep b/templates/recover_password.html.ep
index a3332c3..c56ffe2 100644
--- a/templates/recover_password.html.ep
+++ b/templates/recover_password.html.ep
@@ -5,7 +5,7 @@
 % if (stash('success')) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card green darken-4">
+			<div class="card success-color">
 				<div class="card-content white-text">
 					<span class="card-title">Passwort-Reset wird durchgeführt</span>
 					<p>
diff --git a/templates/webhooks.html.ep b/templates/webhooks.html.ep
index b782823..930732d 100644
--- a/templates/webhooks.html.ep
+++ b/templates/webhooks.html.ep
@@ -8,7 +8,7 @@
 	<div class="row">
 		<div class="col s12">
 			% if ($hook->{errored}) {
-				<div class="card red darken-4">
+				<div class="card caution-color">
 					<div class="card-content white-text">
 						<span class="card-title">Web-Hook fehlerhaft</span>
 						<p><%= $hook->{output} %></p>
@@ -16,7 +16,7 @@
 				</div>
 			% }
 			% else {
-				<div class="card green darken-4">
+				<div class="card success-color">
 					<div class="card-content white-text">
 						<span class="card-title">Web-Hook erfolgreich getestet</span>
 						<p><%= $hook->{output} %></p>