diff options
| author | marudor <marudor@marudor.de> | 2019-05-16 15:02:17 +0200 |
|---|---|---|
| committer | marudor <marudor@marudor.de> | 2019-05-16 15:04:08 +0200 |
| commit | 5c2388d3a2092505aff9f7b2e78e561c4db65385 (patch) | |
| tree | a4a469baef25b98c3a33125ac8a65334775c7ec8 /templates/layouts | |
| parent | b85db3a10df32cb2648607c83d37160ac3ee8691 (diff) | |
Add dark mode (only available with prefers-color-scheme currently)
Diffstat (limited to 'templates/layouts')
| -rw-r--r-- | templates/layouts/default.html.ep | 20 |
1 files changed, 18 insertions, 2 deletions
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index a63242c..40793e1 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -18,7 +18,23 @@ <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" + <script> + function addStyleSheet(path) { + var st = document.createElement('link'); + st.href = path; + st.rel = 'stylesheet'; + document.head.appendChild(st); + } + + if (window.matchMedia('(prefers-color-scheme: dark').matches) { + addStyleSheet("/static/<%= $av %>/css/dark.min.css"); + } else { + addStyleSheet("/static/<%= $av %>/css/light.min.css"); + } + </script> + <noscript> + %= stylesheet "/static/${av}/css/light.min.css" + </noscript> %= stylesheet "/static/${av}/css/material-icons.css" %= stylesheet "/static/${av}/css/local.css" %= javascript "/static/${av}/js/jquery-3.4.1.min.js" @@ -66,7 +82,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> |