diff --git a/README.md b/README.md
index 3254cf9..b2e5ff4 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@
- [Brand](#brand)
- [Search](#search)
- [Title](#title)
+ - [Theming](#theming)
- [Original](#original)
## Installation
@@ -149,14 +150,14 @@ In extra, setting `zulma_theme` to a valid value will change the current colour
- pulse
- simplex
-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.
+All valid themes can also be found under the `extra.zulma_themes` variable in the `theme.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.
+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 option will store their theme choice in their localstorage and apply it on every page, assuming `zulma_allow_theme_selection` is still true. 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]
diff --git a/static/js/switchcss.js b/static/js/switchcss.js
index 403ece2..9866bf3 100644
--- a/static/js/switchcss.js
+++ b/static/js/switchcss.js
@@ -1,11 +1,21 @@
const THEME_KEY = "ZULMA_THEME";
+let theme = localStorage.getItem(THEME_KEY);
+if (theme) {
+ changeTheme(theme);
+ document.querySelectorAll('#theme-select>option').forEach(element => {
+ if (element.value === theme) {
+ element.selected = 'selected';
+ }
+ });
+}
+
function changeTheme(themeName) {
let alternates = [];
document.querySelectorAll('link.stylesheet').forEach(element => {
if (element.id === themeName) {
- element.media = '';
+ element.disabled = false;
}
else {
alternates.push(element);
@@ -13,7 +23,7 @@ function changeTheme(themeName) {
});
alternates.forEach(element => {
- element.media = 'none';
+ element.disabled = true;
});
saveTheme(themeName);
@@ -23,18 +33,6 @@ 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);
diff --git a/templates/index.html b/templates/index.html
index fd723d9..c2a44c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,10 +28,10 @@
{% if config.build_search_index %}
+ {% endif %}
{% if config.extra.zulma_allow_theme_selection %}
{% endif %}
- {% endif %}
{% endblock js %}
{% block extra_head %}
@@ -52,6 +52,7 @@
+ {% block body%}
{% block content %}
{% block header %}
@@ -87,6 +88,8 @@
{% if config.build_search_index %}
{% endif %}
+
+ {% endblock body%}