Provide light theme by default, avoid re-styling unless dark theme is active

This eliminates a large portion of main-thread work on page load
This commit is contained in:
Daniel Friesel 2019-05-16 20:39:54 +02:00
parent 6457ef2f9d
commit 681ecabdf6

View file

@ -18,12 +18,15 @@
<link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png"> <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="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
<link rel="manifest" href="/static/<%= $av %>/manifest.json"> <link rel="manifest" href="/static/<%= $av %>/manifest.json">
%= stylesheet "/static/${av}/css/light.min.css", id => 'theme'
<script> <script>
function addStyleSheet(name, id) { function addStyleSheet(name, id) {
var path = '/static/<%=$av%>/css/' + name + '.css'; var path = '/static/<%=$av%>/css/' + name + '.css';
var old = document.getElementById(id); var old = document.getElementById(id);
if (old) { if (old) {
if (old.href != path) {
old.href = path; old.href = path;
}
} else { } else {
var st = document.createElement('link'); var st = document.createElement('link');
st.id = id; st.id = id;
@ -48,9 +51,6 @@ function toggleTheme() {
addStyleSheet(currentTheme, 'theme'); addStyleSheet(currentTheme, 'theme');
} }
</script> </script>
<noscript>
%= stylesheet "/static/${av}/css/light.min.css"
</noscript>
%= stylesheet "/static/${av}/css/material-icons.css" %= stylesheet "/static/${av}/css/material-icons.css"
%= stylesheet "/static/${av}/css/local.css" %= stylesheet "/static/${av}/css/local.css"
%= javascript "/static/${av}/js/jquery-3.4.1.min.js" %= javascript "/static/${av}/js/jquery-3.4.1.min.js"