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: [PATCH] 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 52ca482e..d20eab74 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 244da6a8..5a5addad 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 64550c2c..472ac38a 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', () => {
--
GitLab