summaryrefslogtreecommitdiff
path: root/templates/layouts/app.html.ep
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2020-04-20 20:20:52 +0200
committerDaniel Friesel <derf@finalrewind.org>2020-04-20 20:20:52 +0200
commiteeedb40bdc0510dec0e2ddca149e82bff7495d0a (patch)
treeb80eb0f9908016382e8a36d9dd9f321cdd44473f /templates/layouts/app.html.ep
parent375f02ad634c10030f47af94f0530dda0d2d044d (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.ep45
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)