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
---
 templates/layouts/default.html.ep | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'templates/layouts/default.html.ep')

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