summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2019-05-18 08:23:59 +0200
committerDaniel Friesel <derf@finalrewind.org>2019-05-18 08:23:59 +0200
commitfa98aba3d3bab9d08f58f45acfc697cb7992c5cb (patch)
tree74e28f66adfd4ab16ed519583fad8bbdcbcf9ce0 /templates
parentccff20876496fdc465cd6c3fa7999329d68b28c5 (diff)
Pre-select theme css in backend
Diffstat (limited to 'templates')
-rw-r--r--templates/layouts/default.html.ep54
1 files changed, 26 insertions, 28 deletions
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index fd21635..4b11a06 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -18,38 +18,36 @@
<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/light.min.css", id => 'theme'
+ % 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 + '.css';
- var old = document.getElementById(id);
- if (old) {
- if (old.href != path) {
- old.href = path;
- }
- } else {
- var st = document.createElement('link');
- st.id = id;
- st.href = "/static/<%=$av%>/css/" + name + '.css';
- st.rel = 'stylesheet';
- document.head.appendChild(st);
- }
+ 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.min': 'light.min',
- 'light.min': 'dark.min',
-};
-var currentTheme = localStorage.getItem('theme');
-if (!otherTheme.hasOwnProperty(currentTheme)) {
- currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark.min' : 'light.min';
-}
-addStyleSheet(currentTheme, 'theme');
+ '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.min';
- localStorage.setItem('theme', currentTheme);
- 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"