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

public/static/js/travelynx-actions.js

+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');

sass/src/common/local.scss

+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;

}

templates/layouts/default.html.ep

+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', () => {