summaryrefslogtreecommitdiff
path: root/templates/layouts
diff options
context:
space:
mode:
authorBirte Kristina Friesel <derf@finalrewind.org>2023-12-03 12:07:07 +0100
committerBirte Kristina Friesel <derf@finalrewind.org>2023-12-03 12:07:07 +0100
commita702051aef4b32fca7fd516a34415fcbb1e8c871 (patch)
treec5aa171840e44874484d1fe6d0d7e190070aab5d /templates/layouts
parenta36801c967c790ed10d7d074af12f9832a42aa50 (diff)
Move theme switcher to bottom; add 'use device theme'
Diffstat (limited to 'templates/layouts')
-rw-r--r--templates/layouts/app.html.ep36
1 files changed, 21 insertions, 15 deletions
diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep
index 1795471..7e8e38a 100644
--- a/templates/layouts/app.html.ep
+++ b/templates/layouts/app.html.ep
@@ -27,14 +27,14 @@
% }
<script>
function addStyleSheet(name, id) {
- var path = '/static/<%=$av%>/css/' + name + '.min.css';
- var old = document.getElementById(id);
+ const path = '/static/<%=$av%>/css/' + name + '.min.css';
+ const old = document.getElementById(id);
if (old && (old.href != path)) {
old.href = path;
document.cookie = 'theme=' + name;
}
}
- var otherTheme = {
+ const otherTheme = {
'dark': 'light',
'light': 'dark',
};
@@ -43,12 +43,6 @@
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"
@@ -88,9 +82,6 @@
<a href="<%= stash('api_link') %>"><span class="visually-hidden"><%= stash('api_text') %></span><i class="material-icons" aria-hidden="true"><%= stash('api_icon') %></i></a>
</li>
% }
- <li class="waves-effect waves-light">
- <a onClick="javascript:toggleTheme()"><span class="visually-hidden">Farbschema invertieren</span><i class="material-icons" aria-hidden="true">invert_colors</i></a>
- </li>
% if (stash('hide_opts')) {
<li><a href="/"><span class="visually-hidden">Hauptseite</span><i class="material-icons" aria-hidden="true">edit</i></a></li>
% }
@@ -296,13 +287,28 @@
</div> <!-- container -->
<div class="container">
+<div class="config">
+Theme:
+<a onClick="javascript:setTheme('dark')">dark</a>
+<a onClick="javascript:setTheme('light')">light</a>
+<a onClick="javascript:setTheme('default')">device theme</a>
+<!--<br/>
+Language:
+<a onClick="javascript:setLang('de')">DE</a>
+<a onClick="javascript:setLang('en')">EN</a>
+<a onClick="javascript:setLang('default')">system language</a>
+<br/>-->
+</div>
<div class="about">
-<a href="_about"><%= l 'Über DBF' %></a>
+<a href="_about">DBF</a> v<%= stash('version') // '???' %>
·
<a href="_datenschutz" rel="nofollow"><%= l 'Datenschutz' %></a>
·
-<a href="_impressum" rel="nofollow"><%= l 'Impressum' %></a><br/>
-Version <%= stash('version') // '???' %>
+<a href="_impressum" rel="nofollow"><%= l 'Impressum' %></a>
</div> <!-- about -->
</div> <!-- container -->
% }