mirror of
https://github.com/simple-login/app.git
synced 2024-09-30 05:31:30 +02:00
Dark theme: prevent white flash on page load
This commit is contained in:
parent
4d87df01a3
commit
c6e291f7e8
@ -104,17 +104,4 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Dark mode controller */
|
|
||||||
if (store.get('dark-mode') === true) {
|
|
||||||
document.documentElement.setAttribute('data-theme', 'dark')
|
|
||||||
}
|
|
||||||
$('[data-toggle="dark-mode"]').on('click', function () {
|
|
||||||
if (store.get('dark-mode') === true) {
|
|
||||||
store.set('dark-mode', false);
|
|
||||||
return document.documentElement.setAttribute('data-theme', 'light')
|
|
||||||
}
|
|
||||||
store.set('dark-mode', true)
|
|
||||||
document.documentElement.setAttribute('data-theme', 'dark')
|
|
||||||
})
|
|
||||||
});
|
});
|
40
static/assets/js/theme.js
Normal file
40
static/assets/js/theme.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
let setCookie = function(name, value, days) {
|
||||||
|
if (!name || !value) return false;
|
||||||
|
let expires = '';
|
||||||
|
let secure = '';
|
||||||
|
if (location.protocol === 'https:') secure = 'Secure; ';
|
||||||
|
|
||||||
|
if (days) {
|
||||||
|
let date = new Date();
|
||||||
|
date.setTime(date.getTime() + (days * 24*60*60*1000));
|
||||||
|
expires = 'Expires=' + date.toUTCString() + '; ';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.cookie = name + '=' + value + '; ' +
|
||||||
|
expires +
|
||||||
|
secure +
|
||||||
|
'sameSite=Lax; ' +
|
||||||
|
'domain=' + window.location.hostname + '; ' +
|
||||||
|
'path=/';
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
let getCookie = function(name) {
|
||||||
|
let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
|
||||||
|
if (match) return match[2];
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
/** Dark mode controller */
|
||||||
|
if (getCookie('dark-mode') === "true") {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
}
|
||||||
|
$('[data-toggle="dark-mode"]').on('click', function () {
|
||||||
|
if (getCookie('dark-mode') === "true") {
|
||||||
|
setCookie('dark-mode', 'false', 30);
|
||||||
|
return document.documentElement.setAttribute('data-theme', 'light')
|
||||||
|
}
|
||||||
|
setCookie('dark-mode', 'true', 30);
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark')
|
||||||
|
})
|
||||||
|
});
|
@ -1,7 +1,7 @@
|
|||||||
{% from "_formhelpers.html" import render_field, render_field_errors %}
|
{% from "_formhelpers.html" import render_field, render_field_errors %}
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en" dir="ltr" data-theme="{% if request.cookies.get('dark-mode') == 'true' %}dark{% endif %}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
@ -40,6 +40,8 @@
|
|||||||
<script src="/static/assets/js/vendors/circle-progress.min.js"></script>
|
<script src="/static/assets/js/vendors/circle-progress.min.js"></script>
|
||||||
<script src="/static/assets/js/core.js"></script>
|
<script src="/static/assets/js/core.js"></script>
|
||||||
|
|
||||||
|
<script src="/static/assets/js/theme.js"></script>
|
||||||
|
|
||||||
<!-- ClipboardJS -->
|
<!-- ClipboardJS -->
|
||||||
<script src="/static/vendor/clipboard.min.js"></script>
|
<script src="/static/vendor/clipboard.min.js"></script>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user