diff options
Diffstat (limited to 'templates/layouts/default.html.ep')
| -rw-r--r-- | templates/layouts/default.html.ep | 44 |
1 files changed, 37 insertions, 7 deletions
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index a63242c..76c130b 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -9,7 +9,7 @@ <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Travelynx"> - % my $av = 'v20'; # asset version + % my $av = 'v21'; # asset version <link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-96x96.png" sizes="96x96"> @@ -18,7 +18,37 @@ <link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png"> <link rel="manifest" href="/static/<%= $av %>/manifest.json"> - %= stylesheet "/static/${av}/css/materialize.min.css" + % if (session('theme') and session('theme') eq 'dark') { + %= stylesheet "/static/${av}/css/dark.min.css", id => 'theme' + % } + % else { + %= stylesheet "/static/${av}/css/light.min.css", id => 'theme' + % } + <script> + function addStyleSheet(name, id) { + var path = '/static/<%=$av%>/css/' + name + '.min.css'; + var old = document.getElementById(id); + if (old && (old.href != path)) { + old.href = path; + document.cookie = 'theme=' + name; + } + } + var otherTheme = { + 'dark': 'light', + 'light': 'dark', + }; + var currentTheme = localStorage.getItem('theme'); + if (!otherTheme.hasOwnProperty(currentTheme)) { + 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" %= stylesheet "/static/${av}/css/local.css" %= javascript "/static/${av}/js/jquery-3.4.1.min.js" @@ -51,6 +81,9 @@ </div> </div> </li> + <li class="waves-effect waves-light"> + <a onClick="javascript:toggleTheme()"><i class="material-icons">invert_colors</i></a> + </li> % if (is_user_authenticated()) { <li class="<%= navbar_class('/history') %>"><a href='/history' title="History"><i class="material-icons">history</i></a></li> <li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons">account_circle</i></a></li> @@ -66,7 +99,7 @@ % if (app->mode eq 'development') { <div class="container"> <div class="row"> - <div class="col s12 red darken-4 white-text"> + <div class="col s12 caution-color white-text"> Development Mode – Datenbank: <%= app->config->{db}->{database} %> @ <%= app->config->{db}->{host} %> </div> @@ -87,10 +120,7 @@ <script> if ('serviceWorker' in navigator) { window.addEventListener('load', () => { - navigator.serviceWorker.register('/service-worker.js') - .then((reg) => { - console.log('Service worker registered.', reg); - }); + navigator.serviceWorker.register('/service-worker.js'); }); } </script> |