more changes to css theming; it should now be much more responsive, have less FOUC's and not load a bunch of unused css when it isn't in use.

static/js/switchcss.js

@@ -1,8 +1,66 @@
+(function (switch_css) {
+    //Constants
     const THEME_KEY = "ZULMA_THEME";
+    const STOP_LINK_CSS_ID = "stop-blink";
 
+    //Variables
+    let link = null;
     let theme = localStorage.getItem(THEME_KEY);
-if (theme) {
+
-    changeTheme(theme);
+    //Private Methods
+    function changeTheme(themeName, firstLoad) {
+        var fileref = document.createElement("link");
+        fileref.rel = "stylesheet";
+        fileref.type = "text/css";
+        fileref.href = `/${themeName}.css`;
+        link = document.getElementsByTagName("head")[0].appendChild(fileref);
+
+        link.addEventListener('load', onLinkLoad);
+        if (firstLoad) {
+            document.querySelectorAll('.stylesheet').forEach((el) => {
+                el.remove();
+            });
+        }
+
+        saveTheme(themeName);
+    };
+
+    function onLinkLoad() {
+        link.removeEventListener('load', onLinkLoad);
+        document.querySelectorAll('.stylesheet').forEach((el) => {
+            el.remove();
+        });
+        link.className += 'stylesheet';
+        addcss('body{visibility:visible;}');
+    };
+
+    function saveTheme(themeName) {
+        localStorage.setItem(THEME_KEY, themeName);
+    };
+
+    function addcss(css) {
+        let el = document.getElementById(STOP_LINK_CSS_ID);
+        if (el) {
+            el.innerText = css;
+        } else {
+            var head = document.getElementsByTagName('head')[0];
+            var style = document.createElement('style');
+            style.id = STOP_LINK_CSS_ID;
+            style.setAttribute('type', 'text/css');
+            if (style.styleSheet) { // IE
+                style.styleSheet.cssText = css;
+            } else { // the world
+                style.appendChild(document.createTextNode(css));
+            }
+            head.insertBefore(style, head.firstChild);
+        }
+    };
+
+    //Public Methods
+    switch_css.init = function () {
+        if (theme && !document.getElementById(theme)) {
+            addcss('body{visibility:hidden;}')
+            changeTheme(theme, true);
             window.addEventListener('DOMContentLoaded', () => {
                 document.querySelectorAll('#theme-select>option').forEach(element => {
                     if (element.value === theme) {
@@ -11,34 +69,12 @@ if (theme) {
                 });
             });
         }
-
         window.addEventListener('DOMContentLoaded', () => {
             document.getElementById('theme-select').onchange = function () {
                 changeTheme(this.value);
             }
         });
-
-function changeTheme(themeName) {
-    let alternates = [];
-
-    document.querySelectorAll('link.stylesheet').forEach(element => {
-        if (element.id === themeName) {
-            element.disabled = false;
-            element.media = '';
     }
-        else {
+}(switch_css = window.switch_css || {}));
-            alternates.push(element);
-        }
-    });
 
-    alternates.forEach(element => {
+switch_css.init();
-        element.disabled = true;
-        element.media = 'none';
-    });
-
-    saveTheme(themeName);
-}
-
-function saveTheme(themeName) {
-    localStorage.setItem(THEME_KEY, themeName);
-}

templates/index.html

@@ -16,23 +16,20 @@
         {% block title %}{{ config.title }}{% endblock title %}
     </title>
 
-    {% block css %}
-    {{ index_macros::css() }}
-    {% endblock css %}
 
+
+    {{ index_macros::css() }}
+    {% if config.extra.zulma_allow_theme_selection %}
+    <script type="text/javascript" src="{{ get_url(path="js/switchcss.js") }}"></script>
+    {% endif %}
     {% if config.generate_rss %}
     <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
     {% endif %}
 
-    {% block js %}
     {% if config.build_search_index %}
     <script defer type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
     <script defer type="text/javascript" src="{{ get_url(path="search_index.en.js") }}"></script>
     {% endif %}
-    {% if config.extra.zulma_allow_theme_selection %}
-    <script type="text/javascript" src="{{ get_url(path="js/switchcss.js") }}"></script>
-    {% endif %}
-    {% endblock js %}
 
     {% block extra_head %}
     {% endblock extra_head %}
@@ -79,9 +76,11 @@
             {% endif %}
             <!-- END PAGINATION -->
         </div>
-        {{ index_macros::footer() }}
     </main>
     {% endblock content %}
+    {% block footer %}
+    {{ index_macros::footer() }}
+    {% endblock footer %}
 
     <script type="text/javascript" src="{{ get_url(path="js/bulma.js") }}"></script>
 

templates/index_macros.html

@@ -125,24 +125,10 @@
 {% endmacro footer %}
 
 {% macro css() %}
-{% if config.extra.zulma_allow_theme_selection %}
-{% for theme in config.extra.zulma_themes %}
 {% if config.extra.zulma_theme %}
-{% set default_theme = config.extra.zulma_theme %}
+<link id="{{config.extra.zulma_theme}}" class="stylesheet" rel="stylesheet"
+    href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
 {% else %}
-{% set default_theme = "default" %}
+<link id="default" class="stylesheet" rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
-{% endif %}
-{% if default_theme == theme %}
-<link id="{{theme}}" class="stylesheet" rel="stylesheet"
-    href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
-{% else %}
-<link id="{{theme}}" class="alternate stylesheet" media="none" rel="stylesheet"
-    href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
-{% endif %}
-{% endfor %}
-{% elif config.extra.zulma_theme %}
-<link rel="stylesheet" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
-{% else %}
-<link rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
 {% endif %}
 {% endmacro css %}

templates/page.html

@@ -7,6 +7,7 @@
 {{ super() }}
 {% endblock header %}
 <!-- END NAV -->
+<main>
     <section class="container">
         <div class="columns is-desktop">
             <div class="column is-10-desktop is-offset-1-desktop">
@@ -26,4 +27,5 @@
             </div>
         </div>
     </section>
+</main>
 {% endblock content %}