PrivateCoffee/travelynx
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow light/dark/auto rather than just light/dark for theme

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

Closes #125
This commit is contained in:
Birte Kristina Friesel 2024-03-23 15:23:26 +01:00
parent 150c5a137f
commit 2539e9f0ae
No known key found for this signature in database
GPG key ID: 19E6E524EBB177BA
3 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public/static/js/travelynx-actions.js
View file

@ -9,6 +9,15 @@ var j_arrival = 0;
var j_dest = ''; var j_dest = '';
var j_stops = []; var j_stops = [];
var j_token = ''; 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() { function upd_journey_data() {
$('.countdown').each(function() { $('.countdown').each(function() {
const journey_token = $(this).data('token'); const journey_token = $(this).data('token');

4
sass/src/common/local.scss
View file

@ -7,6 +7,10 @@
cursor: pointer; cursor: pointer;
} }
.config a {
cursor: pointer;
}
.navbar-fixed { .navbar-fixed {
z-index: 1001; z-index: 1001;
} }

20
templates/layouts/default.html.ep
View file

@ -46,12 +46,6 @@
currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
} }
addStyleSheet(currentTheme, 'theme'); addStyleSheet(currentTheme, 'theme');
function toggleTheme() {
currentTheme = otherTheme[currentTheme] || 'light';
localStorage.setItem('theme', currentTheme);
addStyleSheet(currentTheme, 'theme');
}
</script> </script>
%= stylesheet "/static/${av}/css/material-icons.css" %= stylesheet "/static/${av}/css/material-icons.css"
% if (stash('with_map')) { % if (stash('with_map')) {
@ -95,9 +89,6 @@
</div> </div>
</div> </div>
</li> </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) { % 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('/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> <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> <a href="/legend">Legende</a>
</div> </div>
</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> </div>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {