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 /templates | |
| 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
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/layouts/default.html.ep | 20 |
1 files changed, 10 insertions, 10 deletions
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', () => { |