trotFunky/Zulma-Theme
1
0
Fork 0
Code Releases Activity

made theme switching better

Browse source
This commit is contained in:
Worble 2019-05-06 22:16:37 +01:00
parent dc3d52a7cb
commit df5fc9890b
4 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -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]

46
static/js/switchcss.js
View file

@ -1,29 +1,5 @@
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);
@ -33,8 +9,30 @@ window.addEventListener('DOMContentLoaded', () => {
}
});
}
function changeTheme(themeName) {
let alternates = [];
document.querySelectorAll('link.stylesheet').forEach(element => {
if (element.id === themeName) {
element.disabled = false;
}
else {
alternates.push(element);
}
});
alternates.forEach(element => {
element.disabled = true;
});
saveTheme(themeName);
}
function saveTheme(themeName) {
localStorage.setItem(THEME_KEY, themeName);
}
window.addEventListener('load', () => {
document.getElementById('theme-select').onchange = function () {
changeTheme(this.value);

5
templates/index.html
View file

@ -28,10 +28,10 @@
{% 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 %}
@ -52,6 +52,7 @@
</head>
<body>
{% block body%}
{% block content %}
<!-- START NAV -->
{% block header %}
@ -87,6 +88,8 @@
{% if config.build_search_index %}
<script type="text/javascript" src="{{ get_url(path="js/search.js") }}"></script>
{% endif %}
{% endblock body%}
</body>
</html>

2
templates/index_macros.html
View file

@ -136,7 +136,7 @@
<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"
<link id="{{theme}}" class="alternate stylesheet" disabled rel="stylesheet"
href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
{% endif %}
{% endfor %}