From 2539e9f0aec1a54dae2646d8a02d27d71c660966 Mon Sep 17 00:00:00 2001
From: Birte Kristina Friesel <derf@finalrewind.org>
Date: Sat, 23 Mar 2024 15:23:26 +0100
Subject: Allow light/dark/auto rather than just light/dark for theme

Replaces the theme switcher in the nav bar with a less intrusive link at the
bottom.

Closes #125
---
 public/static/js/travelynx-actions.js |  9 +++++++++
 sass/src/common/local.scss            |  4 ++++
 templates/layouts/default.html.ep     | 20 ++++++++++----------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/public/static/js/travelynx-actions.js b/public/static/js/travelynx-actions.js
index 52ca482..d20eab7 100644
--- a/public/static/js/travelynx-actions.js
+++ b/public/static/js/travelynx-actions.js
@@ -9,6 +9,15 @@ var j_arrival = 0;
 var j_dest = '';
 var j_stops = [];
 var j_token = '';
+
+function setTheme(theme) {
+	localStorage.setItem('theme', theme);
+	if (!otherTheme.hasOwnProperty(theme)) {
+		theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+	addStyleSheet(theme, 'theme');
+}
+
 function upd_journey_data() {
 	$('.countdown').each(function() {
 		const journey_token = $(this).data('token');
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index 244da6a..5a5adda 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -7,6 +7,10 @@
 	cursor: pointer;
 }
 
+.config a {
+	cursor: pointer;
+}
+
 .navbar-fixed {
 	z-index: 1001;
 }
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 64550c2..472ac38 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -46,12 +46,6 @@
 			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"
 	% if (stash('with_map')) {
@@ -95,9 +89,6 @@
 						</div>
 					</div>
 				</li>
-				<li class="waves-effect waves-light">
-					<a onClick="javascript:toggleTheme()" title="Farbschema invertieren"><i class="material-icons" aria-label="Farbschema invertieren">invert_colors</i></a>
-				</li>
 				% if ($acc) {
 					<li class="<%= navbar_class('/history') %>"><a href='/history' title="Vergangene Zugfahrten"><i class="material-icons" aria-label="Vergangene Zugfahrten">history</i></a></li>
 					<li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons" aria-label="Account"><%= $acc->{notifications} ? 'notifications' : 'account_circle' %></i></a></li>
@@ -147,8 +138,17 @@
 			<a href="/legend">Legende</a>
 		</div>
 	</div>
+	<div class="row">
+		<div class="col s12 center-align grey-text config">
+			Farbschema:
+			<a onClick="javascript:setTheme('light')">hell</a>
+			·
+			<a onClick="javascript:setTheme('dark')">dunkel</a>
+			·
+			<a onClick="javascript:setTheme('default')">automatisch</a>
+		</div>
+	</div>
 </div>
-
 <script>
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-- 
cgit v1.2.3