Unverified Commit 2539e9f0 authored by Birte Kristina Friesel's avatar Birte Kristina Friesel
Browse files

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
parent 150c5a13
Loading
Loading
Loading
Loading
+9 −0
Original line number Diff line number Diff line
@@ -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');
+4 −0
Original line number Diff line number Diff line
@@ -7,6 +7,10 @@
	cursor: pointer;
}

.config a {
	cursor: pointer;
}

.navbar-fixed {
	z-index: 1001;
}
+10 −10
Original line number Diff line number Diff line
@@ -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', () => {