diff options
| author | Birte Kristina Friesel <derf@finalrewind.org> | 2024-03-23 15:23:26 +0100 |
|---|---|---|
| committer | Birte Kristina Friesel <derf@finalrewind.org> | 2024-03-23 15:23:26 +0100 |
| commit | 2539e9f0aec1a54dae2646d8a02d27d71c660966 (patch) | |
| tree | a15b43bbe37db4e9a77995ff0d8245d66e117165 | |
| parent | 150c5a137f8c34faf6936c8c64a4949224c319c9 (diff) | |
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
| -rw-r--r-- | public/static/js/travelynx-actions.js | 9 | ||||
| -rw-r--r-- | sass/src/common/local.scss | 4 | ||||
| -rw-r--r-- | 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 52ca482..d20eab7 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 244da6a..5a5adda 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 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', () => { |