diff options
| author | Daniel Friesel <derf@finalrewind.org> | 2020-04-20 20:20:52 +0200 |
|---|---|---|
| committer | Daniel Friesel <derf@finalrewind.org> | 2020-04-20 20:20:52 +0200 |
| commit | eeedb40bdc0510dec0e2ddca149e82bff7495d0a (patch) | |
| tree | b80eb0f9908016382e8a36d9dd9f321cdd44473f /templates/layouts/app.html.ep | |
| parent | 375f02ad634c10030f47af94f0530dda0d2d044d (diff) | |
switch to a proper dark theme using javascript and sass3.1.0
The dark=1 option is still supported, but no longer visible in the UI.
Diffstat (limited to 'templates/layouts/app.html.ep')
| -rw-r--r-- | templates/layouts/app.html.ep | 45 |
1 files changed, 35 insertions, 10 deletions
diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep index 258c6fd..6485a22 100644 --- a/templates/layouts/app.html.ep +++ b/templates/layouts/app.html.ep @@ -19,7 +19,37 @@ % } % my $av = 'v28'; # asset version - %= stylesheet "/static/${av}/css/app.css" + % if (session('theme') and session('theme') eq 'dark' or param('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/jquery-ui.min.css" %= javascript '/static/js/jquery-3.4.1.min.js', defer => undef @@ -33,7 +63,7 @@ %= javascript "/static/${av}/leaflet/leaflet.js" % } </head> -<body style="<%= (param('dark') ? 'background-color: #000000; color: #ffffff;' : q{}) %>"> +<body> <div class="navbar-fixed"> <nav style="color: #ffffff; background-color: #00838f;"> @@ -42,6 +72,9 @@ %= stash('title') || 'DBF' </span> <ul id="nav-mobile" style="float: right;"> + <li class="waves-effect waves-light"> + <a onClick="javascript:toggleTheme()"><i class="material-icons" aria-label="Farbschema invertieren">invert_colors</i></a> + </li> % if (stash('hide_opts')) { <li><a href="/"><i class="material-icons">edit</i></a></li> % } @@ -139,14 +172,6 @@ Bitte eine Station aus der Liste auswählen</div> </div> <div class="field"> <div class="desc"> - %= check_box 'dark' => 1, id => 'id_dark' - <label for="id_dark"> - Dunkles Layout (experimentell) - </label> - </div> - </div> - <div class="field"> - <div class="desc"> %= check_box 'hide_opts' => 1, id => 'id_hide_opts' <label for="id_hide_opts"> Formular verstecken (für Infoscreens) |