summaryrefslogtreecommitdiff
path: root/templates/layouts
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2019-05-18 08:31:13 +0200
committerDaniel Friesel <derf@finalrewind.org>2019-05-18 08:31:13 +0200
commitc3071d54eb1275e36067f8549a7a7ac2c6876de9 (patch)
tree4669ca1548f7887305cb3ea35aad6b677531000c /templates/layouts
parent3668c69d1fad5855fd9bcd190855a7f6c6ec2195 (diff)
parent2107c0bbaf9f4b7f66c09eb7d242790145456292 (diff)
Merge branch 'marudor-darkMode'
Diffstat (limited to 'templates/layouts')
-rw-r--r--templates/layouts/default.html.ep44
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>