extra config option to allow users to select their own style

README.md

@@ -149,12 +149,19 @@ In extra, setting `zulma_theme` to a valid value will change the current colour
 - pulse
 - simplex
 
-Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
+All valid themes can also be found under the `extras.zulma_themes` variable in the `config.toml`. Choosing no theme will set default as the theme. Setting an invalid theme value will cause the site to render improperly.
 
 ```toml
 [extra]
 zulma_theme = "darkly"
 ```
 
+Additionally, in extra, you can also set the `zulma_allow_theme_selection` boolean. Setting this to true will allow a menu in the footer to allow users to select their own theme. This requires javascript to be enabled to function; if the page detects javascript is disabled on the clients machine, it will hide itself.
+
+```toml
+[extra]
+zulma_allow_theme_selection = true
+```
+
 ## Original
 This template is based on the [blog template](https://dansup.github.io/bulma-templates/templates/blog.html) over at [Free Bulma Templates](https://dansup.github.io/bulma-templates/). The code behind from adapted from the [after-dark](https://github.com/getzola/after-dark/blob/master/README.md) zola template.

config.toml

@@ -3,3 +3,12 @@ base_url = "https://example.com"
 
 # Whether to automatically compile all Sass files in the sass directory
 compile_sass = true
+
+build_search_index = true
+
+[extra]
+zulma_title = "Blog"
+zulma_brand = { image = "$BASE_URL/images/bulma.png", text = "Home" }
+zulma_theme = "darkly"
+zulma_themes = ["default", "darkly", "flatly", "pulse", "simplex"]
+zulma_allow_theme_selection = true

content/_index.md

@@ -1,3 +0,0 @@
-+++
-paginate_by = 5
-+++

content/some-article.md

@@ -1,10 +1,6 @@
 +++
 title = "What is Gutenberg"
 date = 2017-09-20
-
-[taxonomies]
-categories = ["Hello world"]
-tags = ["rust", "ssg"]
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.

content/some-other-article.md

@@ -1,10 +1,6 @@
 +++
 title = "A first theme for Gutenberg"
 date = 2017-09-29
-
-[taxonomies]
-categories = ["Hello world"]
-tags = ["rust", "ssg", "other"]
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.

sass/_blog.scss

@@ -2,11 +2,6 @@ html,
 body {
     font-family: 'Open Sans', sans-serif;
     font-size: 14px;
-    //background: #F0F2F4;
-}
-
-.navbar.is-white {
-    //background: #F0F2F4;
 }
 
 .navbar-brand .brand-text {
@@ -26,17 +21,6 @@ body {
     }
 }
 
-.author-image {
-    position: absolute;
-    top: -30px;
-    left: 50%;
-    width: 60px;
-    height: 60px;
-    margin-left: -30px;
-    //border: 3px solid #ccc;
-    border-radius: 50%;
-}
-
 .media-center {
     display: block;
     margin-bottom: 1rem;
@@ -74,10 +58,7 @@ body {
 .article-footer {
     font-style: italic;
     padding: 1.5rem;
-
+    width:100%;
-    .columns {
-        width: 100%;
-    }
 
     .button,
     .tag {
@@ -129,3 +110,8 @@ body {
 input#search::placeholder{
     color: $grey-darker;
 }
+
+.footer{
+    margin-top: 4rem;
+    padding: 2rem;
+}

static/js/switchcss.js

@@ -0,0 +1,42 @@
+const THEME_KEY = "ZULMA_THEME";
+
+function changeTheme(themeName) {
+    let alternates = [];
+
+    document.querySelectorAll('link.stylesheet').forEach(element => {
+        if (element.id === themeName) {
+            element.media = '';
+        }
+        else {
+            alternates.push(element);
+        }
+    });
+
+    alternates.forEach(element => {
+        element.media = 'none';
+    });
+
+    saveTheme(themeName);
+}
+
+function saveTheme(themeName) {
+    localStorage.setItem(THEME_KEY, themeName);
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+    let theme = localStorage.getItem(THEME_KEY);
+    if (theme) {
+        changeTheme(theme);
+        document.querySelectorAll('#theme-select>option').forEach(element => {
+            if (element.value === theme) {
+                element.selected = 'selected';
+            }
+        });
+    }
+});
+
+window.addEventListener('load', () => {
+    document.getElementById('theme-select').onchange = function () {
+        changeTheme(this.value);
+    }
+});

templates/index.html

@@ -5,6 +5,7 @@
 <html>
 
 <head>
+    {% block head %}
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
@@ -15,28 +16,27 @@
         {% block title %}{{ config.title }}{% endblock title %}
     </title>
 
-    {% if config.extra.zulma_theme %}
+    {% for theme in config.extra.zulma_themes %}
-    <link rel="preload" as="style" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
+    <link rel="preload" as="style" href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
-    {% else %}
+    {% endfor %}
-    <link rel="preload" as="style" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
+
-    {% endif %}
+    {% block css %}
+    {{ index_macros::css() }}
+    {% endblock css %}
 
     {% if config.generate_rss %}
     <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
     {% endif %}
 
-    {% block css %}
+    {% block js %}
-    {% if 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 %}
-    {% endblock css %}
-
     {% 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 %}
+    {% endif %}
+    {% endblock js %}
 
     {% block extra_head %}
     {% endblock extra_head %}
@@ -52,6 +52,7 @@
             }
         </style>
     </noscript>
+    {% endblock head %}
 </head>
 
 <body>
@@ -84,6 +85,8 @@
     </main>
     {% endblock content %}
 
+    {{ index_macros::footer() }}
+
     <script type="text/javascript" src="{{ get_url(path="js/bulma.js") }}"></script>
 
     {% if config.build_search_index %}

templates/index_macros.html

@@ -76,6 +76,7 @@
                     </a>
                     {% endfor %}
                     {% endif %}
+
                     {% if config.build_search_index %}
                     <div class="navbar-item search-container js-only">
                         <input class="input is-primary" id="search" type="search" placeholder="Search">
@@ -92,3 +93,56 @@
 </header>
 {% endif %}
 {% endmacro navbar %}
+
+{% macro footer() %}
+{% if config.extra.zulma_allow_theme_selection %}
+<footer class="footer js-only">
+    <div class="columns">
+        <div class="column">
+            <div class="content">
+                <div class="is-pulled-right">
+                    Theme:
+                    <select id="theme-select">
+                        {% for theme in config.extra.zulma_themes %}
+                        {% if config.extra.zulma_theme %}
+                        {% set default_theme = config.extra.zulma_theme %}
+                        {% else %}
+                        {% set default_theme = "default" %}
+                        {% endif %}
+                        {% if default_theme == theme %}
+                        <option selected="selected" value="{{ theme }}">{{ theme }}</option>
+                        {% else %}
+                        <option value="{{ theme }}">{{ theme }}</option>
+                        {% endif %}
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+{% endif %}
+{% 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 %}
+{% else %}
+{% set default_theme = "default" %}
+{% 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="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/post_macros.html

@@ -46,19 +46,21 @@
 {% endmacro page_in_list %}
 
 {% macro post_footer(page) %}
-<footer class="card-footer article-footer">
+<footer class="card-footer">
-    <div class="columns is-multiline">
+    <div class="article-footer">
-        <div class="column is-12">
+        <div class="columns is-multiline">
-            <p>
+            <div class="column is-12">
-                Published
+                <p>
-                {{self::post_footer_date(page=page)}}
+                    Published
-                {{self::post_footer_authors(page=page)}}
+                    {{self::post_footer_date(page=page)}}
-                {{self::post_footer_categories(page=page)}}
+                    {{self::post_footer_authors(page=page)}}
-                {{self::post_footer_tags(page=page)}}
+                    {{self::post_footer_categories(page=page)}}
-            </p>
+                    {{self::post_footer_tags(page=page)}}
-        </div>
+                </p>
-        <div class="column">
+            </div>
-            <a class="button is-pulled-right is-info" href="/">Back Home</a>
+            <div class="column">
+                <a class="button is-pulled-right is-info" href="/">Back Home</a>
+            </div>
         </div>
     </div>
 </footer>